[JS]笔记14之事件委托

来源：互联网发布：门捷列夫没得奖知乎编辑：程序博客网时间：2024/05/29 15:01

-->什么是事件委托
-->事件委托原理
-->事件委托优点
-->事件源 / 目标源

一、什么是事件委托

通俗的讲，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="005.jpg" alt="">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 -->

0 0