DOM事件流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件流</title> <script> window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.addEventListener('click',function(){ console.log('btn处于事件捕获阶段'); }, true); oBtn.addEventListener('click',function(){ console.log('btn处于事件冒泡阶段'); }, false); document.addEventListener('click',function(){ console.log('document处于事件捕获阶段'); }, true); document.addEventListener('click',function(){ console.log('document处于事件冒泡阶段'); }, false); document.documentElement.addEventListener('click',function(){ console.log('html处于事件捕获阶段'); }, true); document.documentElement.addEventListener('click',function(){ console.log('html处于事件冒泡阶段'); }, false); document.body.addEventListener('click',function(){ console.log('body处于事件捕获阶段'); }, true); document.body.addEventListener('click',function(){ console.log('body处于事件冒泡阶段'); }, false); }; </script> </head> <body> <a href="javascript:;" id="btn">按钮</a> <!--1、addEventListener--> <!--addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：--> <!--要处理的事件名、作为事件处理程序的函数和一个布尔值。--> <!--最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；--> <!--如果是false，表示在冒泡阶段调用事件处理程序。--> <!--2、document、documentElement和document.body三者之间的关系：--> <!--document代表的是整个html页面；--> <!--document.documentElement代表的是`<html>`标签；--> <!--document.body代表的是`<body>`标签；--> <!--接着我们就来聊聊上面的例子中输出的结果为什么是这样：--> <!--在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。--> <!--控制台输出顺序如下--> <!--首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。--> <!--接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。--> </body> </html>
事件冒泡的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡的处理</title> <style type="text/css"> .father{ width: 300px; height: 300px; background-color: red; } </style> </head> <body> <div class="father"> <button>按钮</button> <a href="http://www.baidu.com" style="display: block">百度一下</a> <a href="http://www.baidu.com" style="display: block" id="a1">百度一下</a> <a href="http://www.baidu.com" style="display: block" id="a2">百度一下</a> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $('.father button').click(function (event) { console.log(event); // 原生js的事件对象 alert($(this).text()); //阻止冒泡事件 比如body html document 如果也有点击事件,将不会执行 所以这里body点击事件不会执行 event.stopPropagation(); }); $('a:eq(0)').click(function (e) { // 因为全都没有阻止 所以 后面父盒子 body的点击都将被执行,然后再执行默认事件-跳转百度 alert('没有阻止默认事件也没有阻止冒泡!'); }); $('#a1').click(function (e) { e.stopPropagation(); // 阻止冒泡 e.preventDefault(); // 阻止默认事件 指的是a标签的跳转 表单的提交 阻止这些 alert('点击a1！'); return false; }); $('#a2').click(function (e) { alert('点击a2！'); // 上面的两个阻止方法也可以写成这样 既阻止默认事件又阻止冒泡 return false; }); $('.father').click(function(event){ alert('父亲被点击了'); console.log('哈哈哈哈哈'); }); $('body').click(function(){ alert('body被点击了'); }) </script> </body> </html>
抽屉评论收起模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽屉评论收起</title> <style> .box{ height:400px; width: 300px; border:1px solid red; position: relative; display: none; } .closex{ position: relative; float:right; cursor: pointer; } .shouqi{ position: absolute; bottom: 0; right:0; } </style> </head> <body> <button id="btn1">评论</button> <div class="box"> <span class="closex">X</span> <button class="shouqi" id="btn2">收起</button> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $('#btn1').click(function (e) { // $('.box').css('display','block'); $('.box').stop().slideToggle(200); e.stopPropagation(); }); $('.closex,.shouqi').click(function () { // $('.box').css('display','none'); $('.box').stop().slideUp(200); e.stopPropagation(); }); $('.box').click(function () { return false; }); $(document).click(function () { $('.box').stop().slideUp(200); }) </script> </body> </html>