事件
HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,
可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。
事件流描述的是从页面中接收事件的顺序
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:
① 事件捕获阶段;
② 处于目标阶段;
③ 事件冒泡阶段
addEventListener 是DOM2 级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
2、document、documentElement和document.body三者之间的关系:
document代表的是整个html页面;
document.documentElement代表的是<html>
标签;
document.body代表的是<body>
标签;
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
事件冒泡的作用
事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止
阻止默认行为
//阻止表单提交 $('#form1').submit(function(event){ event.preventDefault(); })
合并阻止操作
//实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用 // event.stopPropagation(); // event.preventDefault(); // 合并写法: return false;
demo
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .father{ 300px; height: 300px; background-color: red; } </style> </head> <body> <div class="father"> <button>按钮</button> <a href="http://www.baidu.com">百度一下</a> </div> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 给按钮绑定事件 // 在所有的事件回调函数中 都会有默认的事件对象 $('.father button').click(function(event){ // 原生js的事件对象 console.log(event); alert($(this).text()); // 阻止事件冒泡 //event.stopPropagation(); }); $('a').click(function(e){ // e.preventDefault(); // e.stopPropagation(); alert('a被点击了'); //return false; }); $('.father').click(function(event){ alert('父亲被点击了'); // event.stopPropagation(); console.log('哈哈哈哈哈'); // 既阻止了默认事件 又阻止了冒泡 //return false; }); $('body').click(function(){ alert('body被点击了'); }) }); </script> </body> </html>
事件委托
定义:
事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作。
作用:
事件委托首先可以极大减少事件绑定次数,提高性能;
其次可以让新加入的子元素也可以拥有相同的操作。
1、一般绑定事件的写法:
2、事件委托的写法:(实际开发中,如果是对大量子元素进行操作时,应该用事件委托的方式,提高性能)
demo
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>xx</li> <li class="item">yy</li> </ul> <button>添加</button> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script type="text/javascript"> $(function(){ /* $('ul>li').click(function(){ alert($(this).text()); }); */ // 事件委托 (看时机 如果是未来追加的元素 建议使用 事件委托来绑定事件) // 原理: 利用冒泡的原理,把事件加到父级上,触发执行效果。 //如果接收到了click事件触发通知,并且这个click事件是由我们这些li元素其中之一触发的, //就执行祖辈元素上委托绑定的事件处理函数。。 $('ul').on('click','li',function(e){ //on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下, //即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效 alert($(this).text()); }); // 未来 动态的 往ul中追加了li标签 // 未来追加的li标签 自己完成不了click事件,那么这个时候考虑“事件委托(代理)” $('button').click(function(event) { $('ul').append('<li>zz</li>') }); }); </script> </body> </html>