<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") {
//要执行的代码
}
}