小冒泡阶段从小到大

document.addEventListener(事件类型事件处理函数是否使用捕获机制)

第三个参数传入true代表是捕获阶段触发默认false很少使用事件冒泡

当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发。

这一过程称为冒泡

简单理解当一个元素触发事件后会依次向上调用所有父级元素的同名事件

style.father{w

document.querySelector(.father)

const

document.addEventListener(click,function(){alert(我是爷爷)

father.addEventListener(click,function(){alert(我是爸爸)

son.addEventListener(click,function(){alert(我是儿子)

爸爸----

事件对象.stopPropagation();//事件对象回调函数中的参数此方法可以阻断事件流动传播不光在冒泡阶段有效捕获阶段也有效

const

document.querySelector(.father)

const

document.addEventListener(click,function(){alert(我是爷爷)

father.addEventListener(click,function(){alert(我是爸爸)

son.addEventListener(click,function(e){alert(我是儿子)e.stopPropagrtion();//阻断事件流动传播

})解绑事件

btn.onclickfunction(){alert(点击了我);

addEventListener方式必须使用removeEventListener(事件类型事件处理函数[获取捕获或者冒泡阶段])

function

btn.addEventListener(click,fn);//绑定事件

btn.removeEventListener(click,fn);//解绑事件注意匿名函数无法被解绑

mouseover和mouseout会有冒泡效果mouseenter和mouseleave没有冒泡效果推荐使用

事件委托

给父元素注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事件

ulli1/lili2/lili3/lili4/lili5/lip我不需要变色/p

const

ul.addEventListener(click,function(e){//传递事件对象if(e.target.tagNameLI){//判断获取到的元素标签类型是否为li标签e.target.style.colorred;//通过target属性获得点击对象的信息并设置颜色}

})阻止默认行为

actionhttps//www.baidu.cominput

typesubmit

hrefwww.baidu.com百度/ascriptconst

form

document.querySelector(form);form.addEventListener(submit,function(e){e.preventDefault();});const

document.querySelector(a);a.addEventListener(click,function(e){e.preventDefault();//阻止默认行为点击不会跳转});

/script页面加载事件

加载外部资源如图片外联CSS和JavaScript等加载完毕时触发的事件

事件名load

window.addEventListener(load,function(){})事件名DOMContentLoaded

作用当初始的HTML文档被完全加载和解析完成之后DOMContentLoaded事件被触发而无需等待样式表、图片等完全加载

document.addEventListener(DOMContentLoaded,function(){});页面滚动事件

事件名scroll

监听整个页面的滚动给window推荐或document添加scroll事件

window.addEventListener(scroll,function(){//页面滚动事件})也可以给某个元素添加监听某个元素内部的滚动

smooth;

获取被卷去的大小获取元素内容往左往上滚出去看不到的距离这两个值是可读写的在scoll事件里面获取被卷去的距离

window.addEventListener(scroll,function(){//document.documentElement

获取当前页面的html元素console.log(document.documentElement.scrollTop);//★打印垂直方向卷去的像素const

document.documentElement.scrollTop;if(n100){元素.style.displayblock}else{元素.style.displaynone}

语法元素.scrollTo(x,y)

window.addEventListener(resize,function(){})检测屏幕宽度

window.addEventListener(resize,function(){let

document.documentElement.clientWidth;console.log(w);

获取宽高

获取元素的自身宽高、包含元素自身设置的宽高、padding、borderoffsetWidth和offsetHeigth获取出来的是数值方便计算注意获取的是可视宽高如果盒子是隐藏的获取的结果是0

获取位置

获取元素距离自己定位父级元素的左、上距离offsetLeft和offsetTop注意是只读属性

element.getBoundingClientRect()//返回当前元素的位置信息对象