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

随机推荐

OpenCascade Primitives BRep-Torus
OpenCascade Primitives BRep-Torus eryar@163.com Abstract. BRep is short for Boundary Representation. ...
Unity3D知识框架
美术部分: 3d模型,材质,纹理,shader,Animator,Animation,天空盒,灯光效果,烘焙程序部分: 基本组成: ...
AngularJS之Filter（二）
前言本节我们来讲讲AngularJS中主要的部分之一,那就是过滤器,当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在A ...
4、解析配置文件 redis.conf、Redis持久化RDB、Redis的主从复制
1.Units单位配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 对大小写不敏感 2.INCLUDES包含和我们的Struts2配置文件类似,可以通过includes包 ...
karma单元测试入门
学习angularjs,都会遇到karma单元测试,可是初学者面对复杂的测试配置往往不知从何入手,下面我们将抛开angularjs,单独使用两个js文件,完成一次测试入门. 0,karma原理
[c++] Exceptions
注意优先级关系,如下: try { throw logic_error{"blah"}; } catch (exception) { // caught here! // 有点if ...
Using Headless Mode in the Java SE Platform--转
原文地址: By Artem Ananiev and Alla Redko, June 2006 Articles Index This article explains how to use ...
Java位运算总结-leetcode题目
按位操作符只能用于整数基本数据类型中的单个bit中,操作符对应表格: Operator Description & 按位与(12345&1=1,可用于判断整数的奇偶性) | 按位或 ^ ...
linker command failed with exit code
转载 : http://blog.csdn.net/chengwuli125/article/details/25051741
初识openstack
<1>虚拟化技术的功能和特点多个虚拟机运行在一台物理服务器上,虚拟机之间共享物理资源,虚拟机可以分别安装不同的操作系统,应用程序相互隔离. 虚拟化技术的优势:虚拟机的操作系统和应用程序不 ...

[JS]笔记14之事件委托

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

随机推荐

热门专题