-->什么是事件委托
-->事件委托原理
-->事件委托优点
-->事件源 / 目标源
一、什么是事件委托
通俗的讲，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 -->
时间： 2024-12-28 13:22:30