事件监听

Posted 2022-12-28 cnlisiyiii-stu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件监听相关的知识，希望对你有一定的参考价值。

在同一个文件中，代码会预解析并且提升。

若加载多个文件时，后续的文件默认会等待上一个文件加载完并执行后，才会继续预解析并执行。

若一定要把先使用的程序文件放在后面的话，可以给它的script标签加上async属性。

1. 事件监听注册事件

语法：事件源.addEventListener(‘事件类型‘,事件处理程序,是否捕获);

 1 <body>
 2     <button>点击</button>
 3     <div>
 4         内容
 5     </div>
 6     <script>
 7         var btn = document.querySelector(‘button‘);
 8         var div = document.querySelector(‘div‘);
 9         btn.addEventListener(‘click‘,function()
10             div.style.width = ‘300px‘;
11             div.style.height = ‘300px‘;
12             div.style.background = ‘red‘;
13         );
14         btn.addEventListener(‘click‘,function()
15             div.style.color = ‘gold‘;
16             div.style.fontSize = ‘50px‘;
17         )
18     </script>
19 </body>

事件监听注册事件属于叠加事件，后一个不会覆盖前面相同的事件。

传统注册事件属于覆盖事件，事件源.事件类型 = 事件处理程序。会让后面的事件覆盖前面相同的事件。

若考虑以后的事件扩展，选择事件监听；若不需要扩展，选择传统方式。

事件监听是标准的（官方认可的），但是有兼容问题。（移动端使用较多）

传统方式是非标准的，但是没有兼容问题。（PC端使用较多）

2. 事件监听移除事件

传统移除事件，把原来的事件重新赋值为null

1     btn.onclick = null;

语法：事件源.removeEventListener(‘事件类型‘,事件处理程序的名称);

 1 <body>
 2     <button>点击</button>
 3     <div>
 4         内容
 5     </div>
 6     <script>
 7         var btn = document.querySelector(‘button‘);
 8         var div = document.querySelector(‘div‘);
 9         var fn1 = function()  
10             div.style.width = ‘300px‘;
11             div.style.height = ‘300px‘;
12             div.style.background = ‘red‘;
13         ;
14         var fn2 = function()  
15             div.style.color = ‘gold‘;
16             div.style.fontSize = ‘50px‘;
17         
18         btn.addEventListener(‘click‘,fn1); //fn1不要加小括号()
19         btn.addEventListener(‘click‘,fn2);
20         // 移除fn2
21         btn.removeEventListener(‘click‘,fn2);
22     </script>
23 </body>