读书笔记,写的很乱  

事件处理程序

  事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1

同样的事件 DOM0会顶掉html事件   因为他们都是属性  而DOM0比html事件执行的晚(可以理解为谁离html元素近先执行谁)

JS事件执行顺序理解

先捕获(document-往下)->目标阶段(执行)->冒泡(具体到不具体);

addEventListener 第三个参数 默认false   (false 是冒泡阶段执行)   true 是捕获阶段执行

如果是多个元素嵌套的情况,先捕获不具体的,然后逐级往下捕获,到目标阶段

然后目标阶段就有意思了,到了目标阶段,addEventListener第三个参数不管是true还是false,都无所谓了,因为已经到了目标了,如果写了同样的事件,一个true一个false他们的执行顺序是谁在前先执行谁。

然后是一点疑惑,我测试的(chrome67.0,ie11里)事件到了目标阶段以及冒泡阶段 事件执行顺序都是先html-后DOM0后DOM2 这是一点疑惑可能是浏览器的差异

看图

来一段小代码  增强一下记忆:

    <div class="div">

            <p class="box">

            </p>

        </div>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var get = document.querySelector.bind(document);
var log = console.log.bind(this) get('p').addEventListener('click', function(e) {
log(e.eventPhase)
alert('p')
}, false) get('body').addEventListener('click', function(e) { log(e.eventPhase) alert('body') if(e.target.nodeName == 'DIV' || e.target.nodeName == 'P') { //如果点击的是div 那么 e.stopPropagation() } //true 是捕获阶段获取
}, false) get('div').addEventListener('click', function(e) { alert('div') //true 是捕获阶段获取
}, true)
</script>

聊聊  e.stopPropagation();

最早知道e.stopPropagation()的时候只知道是阻止冒泡,自己也一直死记硬背的用着,具体什么原理,一直没搞清楚.

今天学习了相关文档,说是阻止冒泡并不错,但是不全面.

按官方说法 stopPropagation()是不再派发事件。

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

  该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

  看来stopPropagation()是任何阶段都可以调用并且生效的.   那是不是可以理解为,如果给body加事件捕获  然后 再阻止派发事件,那么就可以做掉页面上的其他点击事件了?   确实是的!  用在点击页面任意位置关闭某个弹窗还是不错的.  也可以某种权限验证时来简单限制.

测试代码如下:

            get('body').addEventListener('click', function(e) {

            e.stopPropagation()

            alert(2)

            }, true)

javascript高级程序设计读书笔记-事件(一)的更多相关文章

  1. javascript高级程序设计读书笔记----事件

      DOM0级事件处理程序 传统处理方式,即讲一个函数赋值给一个事件处理程序属性.   DOM2级事件处理程序 addEventListener()和removeHandler()两个方法用于指定和删 ...

  2. JavaScript高级程序设计学习笔记--事件

    HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...

  3. javascript高级程序设计读书笔记

    第2章  在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...

  4. JavaScript高级程序设计-读书笔记(7)

    第22章 高级技巧 1.高级函数 (1)安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串. ...

  5. JavaScript高级程序设计 读书笔记

    第一章 JavaScript 简介 第二章 Html中使用JavaScript 第三章 基本概念 第四章 变量,作用域,内存 第五章 引用类型 第六章 面向对象 第七章 函数表达式 第八章 BOM 第 ...

  6. Javascript高级程序设计读书笔记(第六章)

    第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...

  7. JavaScript高级程序设计-读书笔记(6)

    第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JS ...

  8. JavaScript高级程序设计-读书笔记(5)

    第13章 事件 1.事件流 事件流描述的是从页面中接收事件的顺序.IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流. (1)事件冒泡,即事件开始时由最具体的元 ...

  9. JavaScript高级程序设计-读书笔记(4)

    第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Do ...

随机推荐

  1. Unity3D_(插件)小地图自刷新制作Minimap小地图

    制作小地图:小地图自刷新制作小地图 原理:用不同的图标表示场景中不同的游戏物体,将(场景中)游戏物体位置实时放置小地图上,并控制图标的位置更新 好处:可更好控制小地图上所需要显示的游戏物体 游戏项目已 ...

  2. H5视频活动踩坑

    最近做了一些嵌入视频的活动,积累了点视频方面的经验,下面记录下别人和自己踩过的坑以及相应的解决方案.1.碰到问题和解决方案1.1.ios 网页中播放视频默认全屏(点击视频会弹出播放器进行全屏播放).解 ...

  3. Android Handler 内存泄漏问题

    1. 问题先看以下代码: 第一种写法: public class MainActivity extends AppCompatActivity { ... ... ... private class ...

  4. Quartz.Net任务调度总结

    Quartz.Net使用经验总结: 学习参考的例子不错,分享一下: (1)https://www.cnblogs.com/jys509/p/4628926.html,该博文介绍比较全面 (2)http ...

  5. Servlet请求参数的方式

    今天整理了以下几种常用的Servlet请求参数的方式,下面简单地介绍 1)getParameter(String key)返回一个字符串,获得name和key 一样的表单控件的数据,如果有重复的nam ...

  6. unity3d卡在loading的解决方法

    解决方案: 关闭U3D,打开电脑的网络适配器把网给掐掉,打开U3D后会提示Workoffline 点击这个即可,然后再把网给起起来就可以了

  7. Tomcat常见启动问题

    1)闪退问题 原因:tomcat软件是java语言开发的. tomcat软件启动时,会默认到系统的环境变量中查找一个名称叫JAVA_HOME的变量.这个变量的作用找到tomcat启动所需的jvm. 解 ...

  8. [VBA]指定列求和

    ##指定列求和 需求: 求和:列为“销售金额”的数值 Sub 求和()Dim i As Integer, j As IntegerFor i = 3 To 56For j = 15 To 81 Ste ...

  9. 三十九:数据库之SQLAlchemy.relationship方法中的cascade参数

    在SQLAlchemy中,只要将一条数据添加到session中,其它和此条数据相关联的数据都会一起存到数据库中,这是因为在relationship中有一个关键字参数:cascade,默认选项为save ...

  10. elasticsearch-6.2.3单机搭建

    1.这里说明下,elasticsearch为了保证安全性需要创建新的用户名,需要在新的用户名下运行,本人用的是elasticsearch-6.2.3,centos7.3 2.切换目录到:cd usr/ ...