事件委派难点解析

事件委派

我们希望只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素，也就是事件的委派。事件的委派，是指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

 

案例演示：为ul列表中的所有a标签都绑定单击事件

 

   

   

   

• 超链接一

   

• 超链接二

   

• 超链接三

 

问题一:u1.onclick = function (event) {

                    event = event || window.event

           ｝中，

event 这个参数名可以随便改变,如mevent = mevent，前提是参数也要mevent。

event 是一个事件对象，发生事件时，他会生成一个一个“事件信息包，这个包就是event，浏览器会接收这个参数，不考虑兼容性，这行代码可以删除。但是由于IE浏览器不能自动接收参数，因此需要兼容性赋值，为了接下来的使用，如使用事件对象的方法等，window.event是基于浏览器的一种方法，IE浏览器支持。

问题二:冒泡就冒泡，他冒泡也是从内到外，题干上写的是给内部的添加方法，答案给外面的添加方法有什么用？

if (event.target.className == "link") {

            console.log("我是ul的单击响应函数");

        }

event.target是事件对象的一个方法，定义是第一个点击他的那个元素，也就是还没冒泡，他通过这种方式，选中了a，由于a本身也是属于链接性，所以不用添加点击事件，点击的话会自动提交事件对象，因此通过这种方法选中了a，只要是点击了a,就会输出"我是ul的单击响应函数",相当于把方法直接给了ul，ul 事件函数判断点击的是否是a，如果是，就输出，极大节省了性能开销。