初学事件委托
2016-06-17 21:20
162 查看
刚开始接触到事件委托这个概念,还是看javascritp高级程序设计接触到的(js学习必备的书有木有)。
知道了什么是事件冒泡机制,(事件捕获因为不常用就不说了),然后明白了为什么会有事件委托的产生,其实在学习html的时候,就应该明白一个网页不只是平面的,更是立体的,一个页面实际的空间比我们眼睛看到的还要多的多,就像隐藏在海平面下的冰山一样。
如果明白了网页是立体的就好理解为什么有事件冒泡这个东西了。当你鼠标点击或者划过的时候,并不只是点击了最上面的一层,在这个点击的地方重叠的所有元素其实都被点击了。那我们怎么区分点击的是哪个呢,哪个该对点击这个事件响应呢,所以就有了冒泡这个东西,我每次都从最底层向上跑,都跑一遍,匹配到哪一个哪一个元素就响应。
在这个过程中通过event.target来判断,
假设有一个这样的结构:
你可以通过
来判断你想要触发的元素,比如这里,你想当鼠标对 li 执行了点击或者划过事件做某些事情时,可以这样判断。
或者换个写法:
先给每一个 li 添加一个id 的属性。然后这样:
当点击到对应 id 的 li 的时候就会响应对应的事件了。
那么,要怎么实现事件委托呢,先来上代码,页面结构还是上面的结构:
是不是比较简单呢,但是事件委托却有一个很大的作用,就是提高页面的性能,同时降低与页面的耦合。
当你要给多个(好多个)元素绑定同一个事件时,就可以使用事件委托了,省却了给每一个元素绑定的麻烦,还能提高性能,何乐而不为呢。
还有个好处就是,当你的页面结构发生变化时,你也不用辛辛苦苦的变更事件的代码了,因为事件是绑定在父层元素上,变动父层元素内的页面结构不会影响事件的发生,因为事件流最终都会传递到父层元素的。
知道了什么是事件冒泡机制,(事件捕获因为不常用就不说了),然后明白了为什么会有事件委托的产生,其实在学习html的时候,就应该明白一个网页不只是平面的,更是立体的,一个页面实际的空间比我们眼睛看到的还要多的多,就像隐藏在海平面下的冰山一样。
如果明白了网页是立体的就好理解为什么有事件冒泡这个东西了。当你鼠标点击或者划过的时候,并不只是点击了最上面的一层,在这个点击的地方重叠的所有元素其实都被点击了。那我们怎么区分点击的是哪个呢,哪个该对点击这个事件响应呢,所以就有了冒泡这个东西,我每次都从最底层向上跑,都跑一遍,匹配到哪一个哪一个元素就响应。
在这个过程中通过event.target来判断,
假设有一个这样的结构:
<ul id="list"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul>
你可以通过
var target=event.target; target.nodeName.toLowerCase() == 'li'
来判断你想要触发的元素,比如这里,你想当鼠标对 li 执行了点击或者划过事件做某些事情时,可以这样判断。
或者换个写法:
先给每一个 li 添加一个id 的属性。然后这样:
switch(target.id){ case 0:{ // do something break; } case 1:{ // do something break; } // ... }
当点击到对应 id 的 li 的时候就会响应对应的事件了。
那么,要怎么实现事件委托呢,先来上代码,页面结构还是上面的结构:
var list=document.getElementById("list"); var items=list.getElementsByTagName("li"); for(var i=0,len=items.length;i<len;i++){ items[i].id=i; } list.addEventListener('click',clickItem,false); function clickItem(event){ var event=event||window.event; var target=event.target||window.srcElement; if(target.nodeName.toLowerCase() == 'li'){ console.log(target.innerHTML); } }
是不是比较简单呢,但是事件委托却有一个很大的作用,就是提高页面的性能,同时降低与页面的耦合。
当你要给多个(好多个)元素绑定同一个事件时,就可以使用事件委托了,省却了给每一个元素绑定的麻烦,还能提高性能,何乐而不为呢。
还有个好处就是,当你的页面结构发生变化时,你也不用辛辛苦苦的变更事件的代码了,因为事件是绑定在父层元素上,变动父层元素内的页面结构不会影响事件的发生,因为事件流最终都会传递到父层元素的。
相关文章推荐
- Fragment使用--文章集锦
- 设置android studio 的代码字体大小
- CentOS6.5升级Git版本
- Android Fragment简介及生命周期
- android使用Fragment实现底部菜单使用show()和hide()来切换以保持Fragment状态
- C++补交作业三
- 【增强学习】Recurrent Visual Attention源码解读
- 定位new运算符
- HTML5自学(一)
- 安卓的发展历程
- 334. Increasing Triplet Subsequence
- 更换mysql数据目录后出现ERROR 2002 (HY000): Can't connect to local MySQL serve
- C++补做实验一
- 对象存储
- 3.4.数组和指针的关联
- 安卓日记——玩转Material Design(伸缩顶部篇)
- Cocos2d-Lua之异常处理
- Struts2文件上传
- ViewFlipper(翻转视图)的基本使用
- 【Unity Shaders】学习笔记——Shader和渲染管线