javascript事件委托的原理与实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

事件委托

事件流

捕获：查找目标元素；
目标：执行目标的事件；
冒泡：依次执行祖先元素的事件。

onmouseenter和onmouseleave不支持冒泡；

onmouseover和onmouseout支持冒泡。

事件对象

event

属性target:可以判定当前点击的目标对象火狐

谷歌:

target

srcElement
在IE低版本 event不兼容
window.event

srcElement

要想获取到目标对象
3.事件委托

将对自己的操作委托给父元素去执行

//box是父元素 box.onclick=function(event){ //事件对象的兼容 var eve=event||window.event; //获取的是目标对象 var target=eve.target||eve.srcElement; //target是当前点击的对象 }

在事件委托的时候，鼠标点击的对象有很多中情况，我们要找到我们需要的那个对象；

解决方法：

若target为当前点击的对象，可能有ul,li,h2,p,span,i ；

需要点击li里面的内容，li改变样式，点击ul没有变化；

点击的时候需要找到li

下面的函数传参

var target = function getTarget(target, “tagName”, “LI”, “UL“)；

target表示我们点击的事件源，tagName表示查找的属性，LI为属性值，UL为结束条件。

如果target不是UL，证明点击的不是ul，继续查找，如果target[tagName]等于"LI",则证明查找到了li，直接返回target，否则继续查找父节点，直到查找到UL，此时代表没有找到，返回undefined。

function getTarget(target, attr, value, end) { while (target != end) { //如果鼠标点击的是end，则直接结束 if (target[attr] == value) { //如果点击的对象的attr属性值为value，则返回该对象 return target; } target = target.parentNode; //否则查找其父节点 } }