读书笔记，写的很乱
事件处理程序
事件处理程序分为三种： 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)