[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之事件委托的主要内容,如果未能解决你的问题,请参考以下文章