[JS]笔记14之事件委托

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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="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之事件委托的主要内容,如果未能解决你的问题,请参考以下文章

js事件流之事件冒泡的应用----事件委托

原生js如何绑定a连接点击事件?

JS之捕获冒泡和事件委托

js事件事件委托

每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点:事件

js事件委托