事件的绑定方式:
事件属性DOM0
把事件写在标签的属性里面
好处:大家都会,几乎所有的浏览器都支持
坏处:夹杂在HTML代码中,代码不简洁; 这种事件写法效率不高;不符合“行为,样式,结构”相分离。
<input type="button" οnclick="alertMessage()" value="按钮"/>
事件赋值式DOM0
缺点: 只能给一个元素注册一个事件,绑定一个事件,后一个会覆盖前一个
好处: 符合“行为,样式,结构”相分离;便于操作当事对象;方便读取事件对象
事件监听DOM2
addEventListener : 非 IE 7 8 下使用
attachEvent :IE 7 8 下使用
两个方式的区别
事件解绑方式
事件的执行机制:
事件的传播
思考:点击红色区域会不会触发粉色区域?
就像上面那个图片一样,我们点击在红色盒子身上的同时,也是点击在了粉色盒子上 这个是既定事实,那么两个盒子的点击事件都会触发 这个就叫做 事件的传播
在事件传播的过程中,有一些注意的点:
只会传播同类事件 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发 内部元素不管有没有该事件,只要上层元素有该事件,那么上层元素的事件就会被触发
事件传播方向
目标:你是点击在哪个元素身上了,那么这个事件的 目标 就是什么
事件冒泡
就是从事件 目标 的事件处理函数开始,依次向外,直到 window 的事件处理函数触发 也就是从下向上的执行事件处理函数
特点: 事件传播方向,由内向外传
事件捕获
就是从 window 的事件处理函数开始,依次向内,只要事件 目标 的事件处理函数执行 也就是从上向下的执行事件处理函数
事件原型图
实现: 事件捕获和事件冒泡
addEventListener的第三个参数决定了是事件捕获还是事件冒泡
true:表示注册的事件在捕获阶段触发
false:表示注册的事件在冒泡阶段触发-----默认值
事件处理三个阶段
事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段;
事件目标对象 target
target 这个属性是事件对象里面的属性,表示你点击的目标 当你触发点击事件的时候,你点击在哪个元素上,target 就是哪个元素 这个 target 也不兼容,在 IE 下要使用 srcElement
target与currentTarget属性
当我点击哪个元素时,event.target返回的是点击的元素节点
event.currentTarget返回的是绑定事件的元素
阻止事件传播
e.stopPropagation() 标准浏览器 e.cancelBubble=true IE低版本
兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble = true
事件委托
这个时候,当我们点击 li 的时候,也可以触发 ul 的点事件 并且在事件内不,我们也可以拿到你点击的到底是 ul 还是 li 这个时候,我们就可以把 li 的事件委托给 ul 来做
为什么要用事件委托
事件委托的好处 减少了事件绑定的数量; 对后来动态创建的元素依然有效, 解决动态添加的元素节点无法绑定事件的问题;
缺点
1.事件委托基于冒泡,对于不冒泡的事件不支持。
2.层级过多,冒泡过程中,可能会被某层阻止掉。
3.理论上委托会导致浏览器频繁调用处理函数,虽然很可能不需要处理。所以建议就近委托,比如在table上代理td,而不是在document上代理td。
4.把所有事件都用代理就可能会出现事件误判。比如,在document中代理了所有button的click事件,另外的人在引用改js时,可能不知道,造成单击button触发了两个click事件。
默认行为:
阻止默认行为
有的时候,我们不希望浏览器执行默认事件 比如我给 a 标签绑定了一个点击事件,我点击你的时候希望你能告诉我你的地址是什么 而不是直接跳转链接 那么我们就要把 a 标签原先的默认事件阻止,不让他执行默认事件
两个方法来阻止默认事件
e.preventDefault() : 非 IE 使用 e.returnValue = false :IE 使用
阻止默认事件的时候也要写一个兼容的写法