EVENT下
1、事件的传播
这个就叫做事件的传播:
当元素触发一个事件的时候,其父元素也会触发相同的事件,父元素的父元素也会触发相同的事件
就像上面的图片一样
点击在红色盒子上的时候,会触发红色盒子的点击事件
也是点击在了粉色的盒子上,也会触发粉色盒子的点击事件
也是点击在了body 上,也会触发 body 的点击事件
也是点击在了html 上,也会触发 html 的点击事件
也是点击在了document 上,也会触发 document 的点击事件
也是点击在了window 上,也会触发 window 的点击事件
也就是说,页面上任何一个元素触发事件,都会一层一层最终导致window 的相同事件触发,前提是各层级元素得有注册相同的事件,不然不会触发
在事件传播的过程中,有一些注意的点:
只会传播同类事件
只会从点击元素开始按照html 的结构逐层向上元素的事件会被触发
内部元素不管有没有该事件,只要上层元素有该事件,那么上层元素的事件就会被触发
2、冒泡、捕获、目标
目标
你是点击在哪个元素身上了,那么这个事件的目标就是什么
冒泡
就是从事件目标的事件处理函数开始,依次向外,直到window 的事件处理函数触发
也就是从下向上的执行事件处理函数
捕获
就是从window 的事件处理函数开始,依次向内,只要事件 目标 的事件处理函数执行
也就是从上向下的执行事件处理函数
3、事件委托
就是把我要做的事情委托给别人来做
因为我们的冒泡机制,点击子元素的时候,也会同步触发父元素的相同事件
所以我们就可以把子元素的事件委托给父元素来做
4、事件触发
点击子元素的时候,不管子元素有没有点击事件,只要父元素有点击事件,那么就可以触发父元素的点击事件
target
target 这个属性是事件对象里面的属性,表示你点击的目标
当你触发点击事件的时候,你点击在哪个元素上,target 就是哪个元素
这个target 也不兼容,在 IE 下要使用 srcElement
委托
这个时候,当我们点击li 的时候,也可以触发 ul 的点事件
并且在事件内不,我们也可以拿到你点击的到底是ul 还是 li
这个时候,我们就可以把li 的事件委托给 ul 来做
5、默认行为
默认行为,就是不用我们注册,它自己就存在的事情
不需要我们注册就能实现的事情,我们叫做默认事件
阻止默认行为
有的时候,我们不希望浏览器执行默认事件
比如我给a 标签绑定了一个点击事件,我点击你的时候希望你能告诉我你的地址是什么
而不是直接跳转链接
那么我们就要把a 标签原先的默认事件阻止,不让他执行默认事件
我们有两个方法来阻止默认事件
e.preventDefault() : 非 IE 使用
e.returnValue = false:IE 使用
我们阻止默认事件的时候也要写一个兼容的写法:
try{
e.preventDefault()
}catch(error){
e.returnValue = false
}