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

随机推荐

SSISDB4：Execution
Execution是Package或Project的Execution Instance,每次执行都会生成一个唯一的ExecutionID,并记录Execution 执行的结果.在每次Executio ...
WPF根据Oracle数据库的表，生成CS文件小工具
开发小工具的原因: 1.我们公司的开发是客户端用C#,服务端用Java,前后台在通讯交互的时候,会用到Oracle数据库的字段,因为服务器端有公司总经理开发的一个根据Oracle数据库的表生成的cla ...
ASP.NET MVC之表单集合数据自动绑定到对象属性（集合）中
前言之前没遇到过这个问题,在项目中遇到这个问题时想法挺好,按照流程走下去,结果事与愿违,于是开始探索着解决方案,接下来我们来看看这个问题,早已经明了的童鞋请绕道,此文仅供未遇到的童鞋提供一种解决方案 ...
iOS开发之使用Runtime给Model类赋值
本篇博客算是给网络缓存打个基础吧,本篇博客先给出简单也是最容易使用的把字典转成实体类的方法,然后在给出如何使用Runtime来给Model实体类赋值.本篇博客会介绍一部分,主要是字典的key与Mode ...
用html5的视频元素所遇到的第一个坑
html5 有一个video标签,这个是被大家所熟知的事情.按照w3c的规范,我认真的写出如下代码: <video preload="auto" controls=" ...
【记录】GitHub/TortoiseGit 修改邮箱/提交者
我使用 Git 客户端工具是 TortoiseGit,在提交更新的时候,不知何时起会出现下面这种情况: 正常提交作者信息显示应该是: 本来也没怎么注意,但是在提交历史中,记录就不显示出来了,也就是在首 ...
Spring对事务管理的支持的发展历程--转
原文地址:http://www.iteye.com/topic/1123049 1.问题 Connection conn = DataSourceUtils.getConnection(); //开启 ...
SPIRE.DOC - .NET开发者的福利
SPIRE.DOC - .NET开发者的福利前面我们使用过Spire.XLS for .NET Component创建Excel文件.最近试用了下.DOC 方面的API.这次测试的产品是.通过使用S ...
C++ 制作 json 数据并传送给服务端(Server) 的 php
json数据格式,这里举个基础的例子: {"name":"LGH"} 在C++里面,我用个函数把特定的数据组合成 json void toJson(int co ...
如何用 js 获取table 或者其他块状标签的宽和高
这个比较简单,总体思想,标签标记一个id,js获取id,就能用它的属性了.介绍两种方法.请看下面代码. 第一种 <script> function width_table_all() { ...

[JS]笔记14之事件委托

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

随机推荐

热门专题