首页 > 代码库 > JavaScript事件委托

JavaScript事件委托

//事件委托

//事件委托        function f2(d) {            document.onclick = function(e) {                var e = e || window.event;                var target = e.srcElement || e.target;                if (target.tagName == “LI”) {                    ……                }      }}

  

事件委托:利用事件冒泡机制,把事件加到父级上,触发执行效果。

好处:

1.提高性能

2.新添加的元素还会有之前的事件

e.srcElement || e.target: 获取事件发生时,最初的那个dom元素。

target.tagName:最初的那个dom元素的标签名字,例如:LI;

 

通过对元素属性的判断,例如标签名,ID ,CLASS等等,来执行不同的处理函数。

这样做比起每一个元素都绑定一个事件,然后为每一个事件再绑定一个函数效率要高很多。

 

上例:点击任何一个LI都会触发,document的onclick的事件,(注意这里的LI并没有绑定任何的onclick事件),这样就可以理解为一种“委托”。

把事件交给document.让它去处理li点击后应该执行的语句。

JavaScript事件委托