浏览器的evetloop机制(浏览器对象是什么)

导语：浏览器的Event对象

React Redux ES6 等可以在个人主页中找到相关文章

概念

当事件发生时， event 对象就会被创建并依次传递给事件监听器。

兼容

火狐使用event获取，而ie使用window.event

var e= event || window.event;

属性

1. target & srcElement

对事件起源目标元素的引用，冒泡是触发的最内层元素，捕获是触发的最外层元素。

srcElement 在IE低版本有效，在火狐上无此属性

//为了兼容性，一般这么获取targetvar traget= event.traget || event.srcElement;

2. currentTarget

绑定了事件的元素的引用，恒等于 this

事件委托的实现

利用冒泡，将事件绑定在父元素上，再去找目标元素

1. 可以使用target属性来查是否点的是目标元素

//假设存在一个ul，一开始ul内没li（不知道什么时候插入），如何点击li的时候弹出li内文字呢？

//利用冒泡和target

document.getElementsByTagName('ul')[0].addEventListener('click',function(e){

　var e=e||window.e;

　var target=e.target || e.srcElement;

　//判断点击的是不是li

　if(target.tagName.toLowerCase()==='li'){

　　alert(target.innerText);

　}

})

缺点：如果li内再套了一层span，target指向的是span而非li，多层嵌套时目标不在最内层时，这种方式不可用

2. 可以查找指定的元素是否存在

如果已知目标元素，比如特定的class等，完全一层层查找所有子节点来屏蔽1中的弊端。

【前方雾大，关注一下不迷路 = 。=】

【html】【css】【html】【css】【javascript】【html】【javascript】【css】【javascript】【css】

本文内容由快快网络小德创作整理编辑！