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

一、什么是事件委托

通俗的讲，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. CSS3盒模型display:box;box-flex:3;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  3. C#单例模式详解

    C#要实现单例模式必须要有以下三点: 声明私有静态成员.私有化构造函数.静态函数返回实例. private static GameManager s_GameManager=null; private ...

  4. 连接 insance 到 vlan101 - 每天5分钟玩转 OpenStack（97）

    前面我们创建了 vlan101,今天继续部署 instance 到该 vlan network, 并讨论 instance 之间的连通性. launch 新的 instance "cirro ...

  5. Oracle层次查询

    Oracle层次查询的语法如下: 下面根据两道“烧脑”的题具体来体现: 1. 根据时间先后顺序,十二星座的英文名称用逗号串起来为'Aries,Taurus,Gemini,Cancer,Leo,Virg ...

  6. 自己在总结前人经验下弄的几个opencv封装函数

    第一个是增加对比度的函数,就是变亮. IplImage* EqualizeHistColorImage(IplImage *pImage) { IplImage *pEquaImage = cvCre ...

  7. Linux入门

    参考资料:http://www.92csz.com/study/linux/ [Linux系统目录结构] 登录系统后,在当前命令窗口下输入 ls / 你会看到 以下是对这些目录的解释: /bin bi ...

  8. Cesium应用篇：2影像服务（下）

    文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d 上篇主要介绍了Cesium自带的影像Provider ,在本篇中,我们主要涉及到如何扩展这些 ...

  9. Masonry_设置比例

    [self.bgView addSubview:self.progressImageView]; [self.progressImageView mas_makeConstraints:^(MASCo ...

  10. 四大组件之ContentProvider

    前言 ContentProvider作为Android的四大组件之一,是属于需要掌握的基础知识,可能在我们的应用中,对于Activity和Service这两个组件用的很常见,了解的也很多,但是对Con ...