javascript 中的事件委派的作用是什么

JavaScript07

javascript 中的事件委派的作用是什么,第1张

所谓事件委托,就是让一个下属分别干的事情交给上司办了。比如说,鼠标点击事件,本来页面上有很多的鼠标点击事件,需要一个个的去写实现函数,但是如果你把鼠标点击事件交个上司来完成,那么就是你鼠标点击那里的时候,就相当于上司找对应的下属来完成此事件,而不像前面的一个个的去找实现函数。很简单的例子就是给ul中的li加事件:

<ul id="ul1">

<li>111</li>

<li>222</li>

<li>333</li>

<li>444</li>

</ul>

如果给每个li添加点击事件:

var li=document.getElementsByTagName('li')

for(var i=0i<li.lengthi++)

alert(li[i].innerHTML)

要是用事件委托

var ul=document,getElementById('ul1')

var target = ul.target || ul.srcElement //兼容处理

alert(target,innerHTML)

这样做的好处就是不在进行查询,减少了DOM操作,极大地改善了代码性能。

因为JS并不支持指针与委托,其实,这就是Javascript所实现的类似C++中的指针,C#中的委托.XXX相当于托委的函数变量.JS模拟面向对象编程中的一个常手段.

而一楼并未说明它的真正意思,所举的两个例子也都是委托的具体运用.正document.body.focus = function(){}是将后边的执行函数"委托"给了句柄一样,但在JS中没有委托与句柄等相关概念,它中是一种编程的风格而已.上文表示当body得到焦点后会执行后边的函数.而一楼的别一个例子,将函数委托给了一个属性,那么这个属性就相当于一个方法了.事实上JS实现面向对象方法时,的确就是这样实现的.不但可以实现一个无参数的方法,也可以实现一个有参数的方法.正如一楼所写的第二个例子一样,你可以使用对象的del(n)去直接执行这样一个函数的!

而将函数直接委托给变量而不是对象的属性也是一样的.只要用XXX()就可以执行对应的函数了!但你也可能看到来了,想要问一下var xxx = function(){}与function xxx(){}的区别.两者在使用上有其实是没有区别的.可以看作一样.但在使用this等指针时是有区别的!还有就是function后边如果不是一个单纯的方法而是一个对象时,前一种方法直接开辟了内存空间,而后一种只是一个定义,使用时才开辟空间的!不过大多数时间使用前一种方法是为了正确的引用this变量,(称指针有些不太合适)而使用的一种方法,这借助了JS的闭包特性的!

前面写页面老用jquery的on方法来给动态添加的元素绑定事件,有一天有人问我原生怎么写,然后我自己测试了一下,终于知道了原生js是如何给动态的元素绑定的事件的。

先把事件绑定在静态的祖先级元素上,当时间触发时在过滤元素,执行里面的方法,代码如下:

document.body.onclick=function(e){

if (e.target.className=="dongtai") {

//要执行的代码

}

}