事件流　

事件流：页面中接收事件的顺序；

IE的事件流是冒泡流，其他的浏览器是捕获流，如下图；

DOM事件流

DOM 事件流同时支持这两种事件流，并且规定DOM任何事件流都包含三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段；

注册事件

之前注册事件的方法或多或少都会存在一些问题，现在通常是使用AddEventlistener()来注册事件/监听事件，与之对应的还有removeEventListener()来删除事件;

所有DOM节点都有这两个方法，并且他们都是接收3个参数（事件类型，事件处理，boolean）,第三个参数如果是在冒泡阶段处理是false,反之true；

建议将事件处理程序添加到事件冒泡阶段，这样可以最大限度的兼容各种浏览器；

 var btn=document.getElementById("btn1");

 btn.addEventListener("click",function(){alert("hello")},false);

关于事件这里差不多了没多少东西；

委托事件

一开始我以为js中的委托事件跟.net中的delegate(委托)是一个概念，其实不是这样，js中的委托事件其实是利用事件冒泡到父节点，通过父节点来监听事件，在通过事件对象来判断是那个元素，然后相应的处理；

event 事件对象：在触发DOM上任何事件都会产生这个event对象，这个对象包含了所有与事件相关的信息（很强大的一个对象具体的可以自己查相关资料）；

委托实例

这里的委托还是挺容易理解的，就是委托别人来帮你做事情，根据我前面说的原理，翻译从HTML应该是这样的：本来是该你这个节点上该做的事情，现在委托了父节点来做；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="ul">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>
<script>

    window.onload = function(){
        var oUl = document.getElementById("ul");
        oUl.addEventListener("mouseover",mouseoverDemo,false);
        oUl.addEventListener("mouseout",mouseoutDemo,false);

        function mouseoverDemo(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement; //兼容IE
            if(target.nodeName.toLowerCase() == "li"){
                target.style.background = "red";
            }
        }
        function mouseoutDemo(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == "li"){
                target.style.background = "";
            }
        }
    }

</script>
</html>
 

委托事件优点

1、相比之前遍历每一个li在绑定一个事件感觉爽了很多；

2、很明显没有了for 性能肯定是有提升；

3、动态的添加新的元素还是会有之前的事件（因为不管怎么样还是要冒泡到父元素的嘛）；

内容很少都是些基础；

js事件、事件委托的更多相关文章

  1. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  2. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. 对JS中事件委托的理解

    什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. 使 ...

  4. js的事件委托

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

  5. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  6. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  7. JS的事件模型

    之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...

  8. JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理

    1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...

  9. js的事件学习笔记

    目录 0.参考 1.事件流 冒泡传播 事件捕获 2.事件绑定--onclick接口 onclick类的接口,只能注册一个同类事件 onclick类的接口,使用button.onclick = null ...

  10. 我也来说说js的事件机制

    原文链接:http://www.w3cfuns.com/notes/17398/8062de2558ef495ce6cb7679f940ae5c.html 学js,不懂事件机制,基本可以说学了js,就 ...

随机推荐

  1. CGLib动态代理引起的空指针异常

    一个同事将公司的开发框架基于最新的Spring.Tomcat.Java版本作了部分修改,拿来开发运行之后,发现一个奇怪的空指针异常. 还原一下当时的场景,代码大概如下,所有的Servlet继承自Bas ...

  2. 解决Maven下载依赖慢

    微服务spring boot,在使用maven下载依赖的时候非常慢,几十K的依赖JAR,也需要漫长的等待,更悲剧呢的漫长等待结果提示下载失败,为彻底解决这个问题,决定使用国内的镜像库,想象总是美好的, ...

  3. 【Visual Installer】如何注册自已的文件类型

    一.前言 这几天在做公司软件产品的安装包,产品有一个特定的后缀名为:.isbimqs,需要的功能是双击该后缀名文件后,会有一个启动程序launchRevit.exe去打开Revit,由Revit去打开 ...

  4. 【BZOJ1443】游戏（二分图匹配，博弈论）

    [BZOJ1443]游戏(二分图匹配,博弈论) 题面 BZOJ 题解 很明显的二分图博弈问题. 发现每次移动一定是从一个黑点到达一个白点,或者反过来. 所以可以对于棋盘进行染色然后连边. 考虑一下必胜 ...

  5. mysql主从复制 master和slave配置的参数大全

    master所有参数1 log-bin=mysql-bin 1.控制master的是否开启binlog记录功能: 2.二进制文件最好放在单独的目录下,这不但方便优化.更方便维护. 3.重新命名二进制日 ...

  6. mysql允许远程特定ip访问

    1.登录 mysql -u root -p 之后输入密码进行登陆 2.权限设置及说明 2.1添加远程ip访问权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'10.1 ...

  7. 51nod 1623 完美消除（数位DP）

    首先考虑一下给一个数如何求它需要多少次操作. 显然用一个单调栈就可以完成:塞入栈中,将比它大的所有数都弹出,如果栈中没有当前数,答案+1. 因为数的范围只有0~9,所以我们可以用一个二进制数来模拟这个 ...

  8. 【bzoj4872】【shoi2017】分手即是祝愿

    4872: [Shoi2017]分手是祝愿 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 746  Solved: 513[Submit][Statu ...

  9. PID控制算法的c语言实现十二 模糊PID的参数整定

    这几天一直在考虑如何能够把这一节的内容说清楚,对于PID而言应用并没有多大难度,按照基本的算法设计思路和成熟的参数整定方法,就算是没有经过特殊训练和培训的人,也能够在较短的时间内容学会使用PID算法. ...

  10. maven私服Nexus3.2的使用

    maven搭建私服的步骤: 分三步: 第一步:下载maven的安装包,然后配置好maven的环境变量. 第二步:将maven的私服Nexus安装好,修改maven的配置文件setting.xml问,在 ...