事件代理
来源:互联网 发布:linux中mysql忘记密码 编辑:程序博客网 时间:2024/05/22 06:19
所谓的事件代理就是将本身所要执行的事件放在别的东西的身上,达到所要实现的效果
(1)第一种形式:利用事件源
a.没有利用事件代理之前利用的是for循环形况下的代码
<!DOCTYPE html><html><head><title>事件代理</title><meta charset="utf-8"><script type="text/javascript">window.onload=function(){var oll=document.getElementsByTagName('ul')[0];var lli=oll.getElementsByTagName('li');for (var i = lli.length - 1; i >= 0; i--) {lli[i].onmouseover=function(){this.style.backgroundColor="red";}lli[i].onmouseout=function(){this.style.backgroundColor="";}}}</script></head><body><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul></body></html>
b.利用事件代理的时候的代码(利用的就是事件源)
事件源:执行的对象是谁,事件源就是谁(下面的代码存在的问题就是不能区分li和ul,在文章的后面说到nodeName的时候就将这个问题进行解决了)
明显就可以看出来如果利用事件代理可以提高性能,这里可能表现得不是很明显,如果<li>元素很多的情况下,相信你就可以感受到了
补充:获得事件源的标签的名字利用的是:nodeName
其中将转换为小写:toLowerCase
因此就可以利用其中的标签名字来进行判断防止出现的其中的的对象发生在ul上,因此对于利用事件源进行的事件委托的代码修改为:
<!DOCTYPE html><html><head><title>事件代理</title><meta charset="utf-8"><script type="text/javascript">window.onload=function(){var oll=document.getElementsByTagName('ul')[0];var lli=oll.getElementsByTagName('li');oll.onmouseover=function(ev){var ev= ev || window.event;var target = ev.srcElement || ev.target;if(target.nodeName.toLowerCase()=='li'){target.style.background="red"; }}oll.onmouseout=function(ev){var ev= ev || window.event;var target = ev.srcElement || ev.target;if(target.nodeName.toLowerCase()=='li'){target.style.background="white"; }}};</script></head><body><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul></body></html>
*****需要注意的就是背景颜色如果想要转换为白色,在谷歌里面不能写成:xxx.style.background=" ";这样是不起作用的
(2)利用的是事件冒泡进行事件代理
假如点击每一个li的时候都让弹出来123
a.不利用事件代理
<!DOCTYPE html><html><head><title>事件代理</title><meta charset="utf-8"><script type="text/javascript">window.onload=function(){var oll=document.getElementsByTagName('ul')[0]; var lli=oll.getElementsByTagName('li'); for (var i = lli.length - 1; i >= 0; i--) { lli[i].onclick=function(){ alert(123); } }}</script></head><body><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul></body></html>
b。利用事件代理,利用冒泡将事件绑在它的父级元素或者是父父级的元素上
<!DOCTYPE html><html><head><title>事件代理</title><meta charset="utf-8"><script type="text/javascript">window.onload=function(){ var oll=document.getElementsByTagName('ul')[0]; var lli=oll.getElementsByTagName('li'); oll.onclick=function(){ alert(123); }}</script></head><body><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul></body></html>
阅读全文
0 0
- 事件代理
- 事件代理
- 事件代理
- 事件代理
- js--事件--事件代理
- js--事件--事件代理
- js代理模式-代理事件
- 事件代理和事件委托
- js事件委托(事件代理)
- JavaScript 事件委托/事件代理
- JavaScript事件委托/事件代理
- javascript-委托事件(事件代理)
- js 事件委托(事件代理)
- 事件委托和事件代理
- 事件委托或事件代理
- 代理和事件
- 范型,事件,代理【转】
- [转]代理和事件
- 无向图最小环算法floy
- ImageView的使用小手段
- 1043. 输出PATest(20)
- 三维数据处理软件架构
- html和CSS基础学习(十三)
- 事件代理
- selector踩坑记
- javascript原型继承(第一篇)---对象
- viewpager踩坑记录
- 让listview显示几条数目,高度固定死
- 使用pandas优化Spark内存消耗(节省90%)
- PAT甲级1003---迷宫问题(DFS或Dijkstra)
- HashMap循环遍历方式及其性能对比
- DataTable fnRowCallback 使用