[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;

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>事件委托2</title>

 <style>

 *{margin:0;padding:0;list-style: none;}

 div{

     background: pink;

 }

 h3,p,span,h4,h5,var,strong,em{

     display: inline-block;

     width:230px;

     height:40px;

     line-height: 40px;

     text-align: center;

     font-size: 30px;

     background: #ccc;

     margin:10px;

 }

 </style>

 </head>

 <body>

     <div id="parent">

         <h3>我是h3标签</h3>

         <p>我是p标签</p>

         <span>我是span标签</span>

         <em>我是em标签</em>

         <h4>我是h4标签</h4>

         <strong>我是strong标签</strong>

         <var>我是var标签</var>

         <h5>我是h5标签</h5>

         <span>我是span标签</span>

         <p>我是p标签</p>

     </div>

 <script>

     var parent=document.getElementById('parent');

     var tags=parent.children;

     parent.onmouseover=function(ev){

         var e=ev||window.event;

         console.log(e);

         var target=e.target||e.srcElement;//事件源

         if (target.id!='parent') {

             target.style.background='green';

         }

     }

     parent.onmouseout=function(ev){

         var e=ev||window.event;

         var target=e.target||e.srcElement;//事件源

         if (target.id!='parent') {

             target.style.background='#ccc';

         }

     }

 </script>

 </body>

 </html>

五、获取目标源

1、在mouseover事件中，它指向鼠标来自哪个元素
event.relatedTarget火狐获取触发事件的目标源，与target相反，也是事件委托类型
fromElement IE获取触发事件的目标源，与srcElement相反，也是事件委托类型

var from=event.relatedTarget||event.fromElement;

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>事件委托4-from</title>

 <style>

 *{margin:0;padding:0;list-style: none;}

 #box{

     width:200px;

     height:200px;

     margin:10px auto;

     border:1px solid #666;

     position: relative;

     overflow: hidden;

 }

 #box img{

     width:140px;

     height:140px;

     position:absolute;

     top:10px;

     left:30px;

 }

 #box h3{

     width:200px;

     height:40px;

     line-height: 40px;

     position: absolute;

     top:160px;

     left:0;

     text-align: center;

     background: #ccc;

 }

 </style>

 </head>

 <body>

 <div id="box">

     <img src="005.jpg" alt="">

     <h3>风景名胜</h3>

 </div>

 <script>

     var box=document.getElementById('box');

     var img=box.getElementsByTagName('img')[0];

     var timer=null,t=0;;

     box.onmouseover=function(ev){

         var e=ev||window.event;

         var from=e.relatedTarget||e.fromElement;//鼠标来自哪里

         while (from) {//阻止动画反复执行

             if (from==this) {

49                 return false;

50             }

51             from=from.parentNode;

52         }

         t=-150;

         clearInterval(timer);

         timer=setInterval(function(){

             t+=2;

             if(t>=10){

                 t=10;

             }

             img.style.top=t+'px';

         },10)

     }

 </script>

 </body>

 </html>

 <!-- 获取目标源 var from=event.relatedTarget||event.fromElement -->

 <!-- 在mouseover事件中，它指向鼠标来自哪个元素 -->

2、在mouseout事件中，它指向鼠标去往的那个元素

event.relatedTarget火狐获取触发事件的目标源，与target相反，也是事件委托类型
event.toElement IE获取触发事件的目标源，与srcElement相反，也是事件委托类型

var to=event.relatedTarget||event.toElement;

六、事件监听-不覆盖

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title></title>

 </head>

 <body>

 <h1 id="con">我是h1标签</h1>

 <script>

     var con=document.getElementById('con');

     con.onclick=function (){

         alert(1);

     }

     con.onclick=function (){

         alert(2);

     }

     con.onclick=function (){

         alert(3);

     }

     con.addEventListener('click',function (){

         alert(4);

     },false);

     con.addEventListener('click',function (){

         alert(5);

     },false);

     con.addEventListener('click',function (){

         alert(6);

     },false);

 </script>

 </body>

 </html>

 <!-- 弹出结果：3,4,5,6 -->

[JS]笔记14之事件委托的更多相关文章

JS与Jquery的事件委托——解决了绑定相同事件的问题
概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...
JS性能优化之事件委托
面试中2次被问到过这个知识点,实际开发中,应用事件委托也比较常见.JS中事件委托的实现主要依赖于事件冒泡 .那什么是事件冒泡?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一 ...
JS与Jquery的事件委托
参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
JS与Jquery的事件委托机制
传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
Js笔记 14
<script> // <!-- 课对象 // //对象的创建方法 // 1.var obj = {} plainobject 对象字面量对象直接量 // 2.构造函数 ...
js笔记14
1.作用域面试题画图分析 2.DOM document object model 节点树状图 document>documentElement>body>tagname 3.我们常 ...
事件处理& 事件委托& 区别mouseover与mouseenter
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
vue—你必须知道的 js数据类型前端学习 CSS 居中事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的目录更多总结猛戳这里属性与方法语法计算属性特殊属性 vue 样式绑定 vue事件处理器表单控件绑定父子组件通信过渡效果 vue经验总结 javascript ...

随机推荐

OGNL相关代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
Security7：View Usage
一,在Database level上,主要有 sys.database_principals, sys.database_permissions 和 sys.database_role_members ...
IOS 消息机制(NSNotificationCenter)
消息机制 NSNotificationCenter 一直都在频繁使用,但是却对其原理不是十分了解.今天就花些时间,把消息机制原理重头到尾好好过一遍. iOS 提供了一种 "同步的" ...
JavaScript 面向对象继承的实现
<script type="text/javascript"> function Animal () { this.species="Animal" ...
ajax实现上传文件
1.html部分 <input style="width: 280px" type="file" name="upLoadProjectPl ...
初学ReactJS，写了一个RadioButtonList组件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>React Demo</title> ...
1Z0-053 争议题目解析498
1Z0-053 争议题目解析498 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 498.The database Is configured in ARCHIVELOG mode ...
归一化变换 Normalizing transformations
归一化变换包含两个部分,图像坐标的平移和尺度的缩放.进行归一化的变换不但能够提高处理结果的精确度,而且通过选择一个标准的坐标系预先的消除了图像尺度和坐标原点的选择对算法最终结果的影响. 归一化变换的步 ...
Linux上的SQL Server——预告片
大家可能都听说了,微软在几个星期前宣布发布可以在Linux上完整运行的SQL Server!如果你想看下在Linux上SQL Server如何运行,进行查询是什么样的体验,可以看下下面的视频.
企业 SOA 设计(2)–组件化产品开发平台
上一篇<企业 SOA 设计(1)–ESB 设计>中,写到我们的 SOA 设计分为两个层面来进行:一个是系统间的 SOA 设计,主要通过 ESB 来完成:另一方面则是单个应用系统内部的 SO ...

[JS]笔记14之事件委托

[JS]笔记14之事件委托的更多相关文章

随机推荐

热门专题