首页 > 代码库 > [JS]笔记14之事件委托
[JS]笔记14之事件委托
-->什么是事件委托
-->事件委托原理
-->事件委托优点
-->事件源 / 目标源
一、什么是事件委托
通俗的讲，onclick，onmouseover，onmouseout等这些就是事件
委托，就是这个事件本来应该加在某些元素上的，而你却加到其他元素上来完成这个事件。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>事件委托1</title><style></style></head><body> <div id="parent"> <h3>我是h3标签</h3> <p>我是p标签</p> </div><script> var parent=document.getElementById(‘parent‘); var h3=parent.getElementsByTagName(‘h3‘)[0]; document.onclick=function(ev){//点击事件委托给document var e=ev||window.event; console.log(e); if (e.target.nodeName==‘H3‘) {//设置为h3的点击事件 alert(‘h3‘); } }</script></body></html>
二、事件委托原理
利用事件传播（冒泡）机制，就可以实现事件委托 。
具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）来完成。
三、事件委托优点
1、提高性能、效率高
2、新添加的元素也会有之前的事件(给未来元素添加事件)
3、代码量少
可以给未来元素添加事件：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>事件委托优2-target</title><style>*{margin:0;padding:0;list-style: none;}#list{overflow: hidden;}#box li{width:100px;height:100px;line-height:100px;font-size:20px;color:#fff;text-align:center;float: left;margin:10px;background: #ccc;}</style></head><body><div id="box"> <button id="btn">创建</button> <ul id="list1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <ul id="list2"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul></div><script> var btn=document.getElementById(‘btn‘); var box=document.getElementById(‘box‘); var list1=document.getElementById(‘list1‘); var lis=box.children; btn.onclick=function(){ var oli=document.createElement(‘li‘); oli.innerHTML=‘新建li‘; list1.appendChild(oli); } box.onclick=function(ev){ var e=ev||window.event; var target=e.target||e.srcElement;//获取事件源兼容写法 if (e.target.nodeName==‘LI‘&&e.target.parentNode.id==‘list1‘) { e.target.style.background=‘green‘;//此事件可以添加给未来新创建元素 } if (e.target.nodeName==‘LI‘&&e.target.parentNode.id==‘list2‘) { e.target.style.background=‘red‘; } }</script></body></html><!-- 事件委托、获取事件源兼容写法、e.target.nodeName==‘LI‘ --><!-- 事件委托给父级可以解决未来元素问题 -->
四、获取当前事件源
在火狐中获得触发事件的元素（事件源）可以用：event.target
在IE中获得触发事件的元素（事件源）可以用：event.srcElement
var Target = event.target||event.srcElement;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件委托2</title> 6 <style> 7 *{margin:0;padding:0;list-style: none;} 8 div{ 9 background: pink;10 }11 h3,p,span,h4,h5,var,strong,em{12 display: inline-block;13 width:230px;14 height:40px;15 line-height: 40px;16 text-align: center;17 font-size: 30px;18 background: #ccc;19 margin:10px;20 }21 </style>22 </head>23 <body>24 <div id="parent">25 <h3>我是h3标签</h3>26 <p>我是p标签</p>27 <span>我是span标签</span>28 <em>我是em标签</em>29 <h4>我是h4标签</h4>30 <strong>我是strong标签</strong>31 <var>我是var标签</var>32 <h5>我是h5标签</h5>33 <span>我是span标签</span>34 <p>我是p标签</p>35 </div>36 <script>37 var parent=document.getElementById(‘parent‘);38 var tags=parent.children;39 parent.onmouseover=function(ev){40 var e=ev||window.event;41 console.log(e); 42 var target=e.target||e.srcElement;//事件源43 if (target.id!=‘parent‘) {44 target.style.background=‘green‘;45 }46 }47 parent.onmouseout=function(ev){48 var e=ev||window.event;49 var target=e.target||e.srcElement;//事件源50 if (target.id!=‘parent‘) {51 target.style.background=‘#ccc‘;52 }53 }54 </script>55 </body>56 </html>
五、获取目标源
1、在mouseover事件中，它指向鼠标来自哪个元素
event.relatedTarget火狐获取触发事件的目标源，与target相反，也是事件委托类型
fromElement IE获取触发事件的目标源，与srcElement相反，也是事件委托类型
var from=event.relatedTarget||event.fromElement;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件委托4-from</title> 6 <style> 7 *{margin:0;padding:0;list-style: none;} 8 #box{ 9 width:200px;10 height:200px;11 margin:10px auto;12 border:1px solid #666;13 position: relative;14 overflow: hidden;15 }16 #box img{17 width:140px;18 height:140px;19 position:absolute;20 top:10px;21 left:30px;22 }23 #box h3{24 width:200px;25 height:40px;26 line-height: 40px;27 position: absolute;28 top:160px;29 left:0;30 text-align: center;31 background: #ccc;32 }33 </style>34 </head>35 <body>36 <div id="box">37 <img src="http://www.mamicode.com/005.jpg" >38 <h3>风景名胜</h3>39 </div>40 <script>41 var box=document.getElementById(‘box‘);42 var img=box.getElementsByTagName(‘img‘)[0];43 var timer=null,t=0;;44 box.onmouseover=function(ev){45 var e=ev||window.event;46 var from=e.relatedTarget||e.fromElement;//鼠标来自哪里47 while (from) {//阻止动画反复执行48 if (from==this) {49 return false;50 }51 from=from.parentNode;52 }53 t=-150;54 clearInterval(timer);55 timer=setInterval(function(){56 t+=2;57 if(t>=10){58 t=10;59 }60 img.style.top=t+‘px‘;61 },10)62 }63 </script>64 </body>65 </html>66 <!-- 获取目标源 var from=event.relatedTarget||event.fromElement -->67 <!-- 在mouseover事件中，它指向鼠标来自哪个元素 -->
2、在mouseout事件中，它指向鼠标去往的那个元素
event.relatedTarget火狐获取触发事件的目标源，与target相反，也是事件委托类型
event.toElement IE获取触发事件的目标源，与srcElement相反，也是事件委托类型
var to=event.relatedTarget||event.toElement;
六、事件监听-不覆盖
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title>12 </head>13 <body>14 <h1 id="con">我是h1标签</h1>15 <script>16 var con=document.getElementById(‘con‘);17 con.onclick=function (){18 alert(1);19 }20 con.onclick=function (){21 alert(2);22 }23 con.onclick=function (){24 alert(3);25 }26 con.addEventListener(‘click‘,function (){27 alert(4);28 },false);29 con.addEventListener(‘click‘,function (){30 alert(5);31 },false);32 con.addEventListener(‘click‘,function (){33 alert(6);34 },false);35 </script>36 </body>37 </html>38 <!-- 弹出结果：3,4,5,6 -->
[JS]笔记14之事件委托
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。