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

一、什么是事件委托

通俗的讲，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之事件委托的更多相关文章

  1. JS与Jquery的事件委托——解决了绑定相同事件的问题

    概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...

  2. JS性能优化 之 事件委托

    面试中2次被问到过这个知识点,实际开发中,应用事件委托也比较常见.JS中事件委托的实现主要依赖于 事件冒泡 .那什么是事件冒泡?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一 ...

  3. JS与Jquery的事件委托

    参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  4. JS与Jquery的事件委托机制

    传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  5. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  6. Js笔记 14

      <script> // <!-- 课 对象   // //对象的创建方法 // 1.var obj = {} plainobject 对象字面量 对象直接量 // 2.构造函数 ...

  7. js笔记14

    1.作用域面试题 画图分析 2.DOM document object model 节点树状图 document>documentElement>body>tagname 3.我们常 ...

  8. 事件处理& 事件委托& 区别mouseover与mouseenter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. 判断手机端用户打开页面时是android还是ios,并将判断结果通过ajax返回给url接口，传递回去

    首先判断页面是android还是ios,然后利用ajax将结果通过接口url返回回去,记录到log日志中,以统计android和ios用户访问该页面的数量(数据统计) <script type= ...

  2. Overview of OpenCascade Library

    Overview of OpenCascade Library eryar@163.com 摘要Abstract:对OpenCascade库的功能及其实现做简要介绍. 关键字Key Words:Ope ...

  3. document.getElementById()与 $()区别

    document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象 什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象 ...

  4. MongoDB学习系列(3)--解决MongoDB Unexpected Shutdown问题

    晚上准备继续学习PHP+MongoDB,点击Run_MongoDB_Service.bat文件,这个文件是我写的bat文件,就是快速启动MongoDB.但是命令行一闪而过,我很奇怪.昨天晚上写代码还是 ...

  5. 在Windows中安装NodeJS的正确姿势

    NodeJS已经非常流行了,而且可以预见他将继续受到追捧.这确实是一个不错的创举,想想看他现在能做什么吧 1.服务器程序(典型的就是用来做网站或者restful服务,主打就是多线程,非阻塞,最后,一个 ...

  6. 在Linux客户机与Windows宿主机之间建立共享（VitrualBox）

    VirtualBox中,如果客户机和宿主机都是Windows的话,共享相对是比较方便的.一般是通过\\vboxsvr\shared 这样的路径访问即可. 但是如果客户机是Linux的话,就略微麻烦一点 ...

  7. javascript中异步和闭包产生的困惑

    这里我不打算大谈特谈什么是异步,什么是闭包,这些内容在博客园都已经写的够多的了,但是这些内容出现的多,并不代表所有初学者都已经撑握了,所以我还是打算,用一个比较常见的示例来分析一下,或许能让对这个问题 ...

  8. 【数据挖掘】朴素贝叶斯算法计算ROC曲线的面积

    题记:          近来关于数据挖掘学习过程中,学习到朴素贝叶斯运算ROC曲线.也是本节实验课题,roc曲线的计算原理以及如果统计TP.FP.TN.FN.TPR.FPR.ROC面积等等.往往运用 ...

  9. Cesium应用篇：3控件（4）Geocoder

    Geocoder是一个非常简单的控件,但也是非常常用且实用的控件,顾名思义,Geocoder就是地理编码的意思,而平常我们经常会查询一些地物,也就是常用的POI搜索,就是Geocoder的功劳. 首先 ...

  10. 【LeetCode】Counting Bits（338）

    1. Description Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num ...