事件代理

96
stefanie_lucky
2017.08.30 17:30* 字数 477

为什么要使用事件代理?

抽取相同的事件处理函数或者是对象,提高程序的工作效率。

添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;

每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了。

什么是事件代理?

事件委托实际上是使用了事件冒泡的原理:从事件最深层的节点开始,逐步向上传播事件。

将不好完成的事件交给另一方完成。经常使用的是为了提高性能,将子对象的事件提交给父对象,根据冒泡原理,让父对象完成,减少相应的dom操作。

事件委托最好用的地方在于,新添加的子节点,由于是冒泡向父节点来完成事件,不用再单独给子节点添加事件或是改变原有的dom结构。


ps:如何寻找事件源

js提供了target函数来指向事件源。

function getEventTarget(e) {

e = e || window.event;

vartarget = ev.target ||ev.srcElement;

}

前端
Web note ad 1