您的位置:首页 > Web前端 > JavaScript

Javascript事件模型、事件绑定、事件委托。

2017-03-16 19:36 190 查看
事件模型

Javascript事件模型分为,冒泡事件和捕获事件。

其中IE浏览器支持冒泡事件,其余支持捕获事件。

所谓冒泡事件,就是事件从最精确的元素触发,向上沿DOM结构冒泡触发至最不精确的元素。

而捕获事件则相反,事件从最不精确的元素触发,向下至最精确的元素。

事件冒泡测试



输出结果:



事件捕获,将addEventListener,第三个参数设为true即可



输出结果:



事件绑定

上面例子用的事件绑定方法时addEventListener(),而IE8以下的浏览器不支持这个方法

IE8以下支持attachEvent(event, handler),只支持事件冒泡阶段。

下面编写一个兼容浏览器的事件绑定函数addEvent()和解绑函数



事件委托

事件委托利用事件冒泡,只指定一个事件处理程序就可以管理某一类型的所有事件,

比较典型的例子是,一个 ul 元素 中的所有 li元素 都需要绑定统一类型的事件,那么只需要给这个 ul 绑定事件就可以了~

页面结构:



js代码:



事件委托不仅可以让我们节省大量的代码,还能提升性能。

一方面,为每个元素添加绑定事件,会有大量相似的代码,另外每个函数都是对象,都会占用内存,占用的内存越多,性能也就越差,还有为每个元素
4000
指定事件处理程序,会增加DOM访问次数,会延迟页面交互时间


总的来说,当同一类事件较多时,牢记事件委托!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: