js事件

Posted 2021-12-29 evilliu

一、事件绑定：

onclick方式：

 1     /**
 2      * 在js中如果我们在写的事件的时候通过onclick方式的时候同一个元素在绑定相同的事件的时候，后注册的时间会被前一个事件覆盖。
 3      * 如果通过addEventListener注册事件的时候，不会发生覆盖情况。
 4      */
 5     var test=document.querySelector(".test");
 6     test.onclick=function()
 7         alert(1)
 8     ;
 9     test.onclick=function () 
10         alert(2)
11     

 

addEventListener:

1    test.addEventListener("click",function () 
2         console.log(1);
3     );
4     test.addEventListener(‘click‘,function () 
5         console.log(2);
6     )

二、事件流。

js中事件流分两种：

• 冒泡事件：当子元素的事件被执行，他的父元素相同事件也依次执行。有子元素事件依次执行父元素的相同的事件。
• 捕获事件：当触发子元素的事件的时候，先执行其父元素的相同的事件，由大到小依次执行相同的事件。最后执行的是子元素。

 1     /**
 2      *
 3      * @type htmlBodyElementaddEventListener(事件类型名称,触发事件执行的函数,boolean/)
 4      * 当我们第三个参数传递的是boolean的时候，表示该事件是在捕获阶段执行（true）还是捕获阶段执行（false）
 5      */
 6     var  body=document.querySelector(‘body‘);
 7     body.addEventListener(‘click‘,function()
 8         console.log("body")
 9     ,true);
10     test.addEventListener(‘click‘,function()
11         console.log(‘test‘)
12     ,true)

1     /**
2      * addEventListener 第三参数传递对象的时候：capture：boolean true表示在捕获阶段执行 false是非捕获阶段执行
3      */
4     body.addEventListener(‘click‘,function()
5         console.log(‘body‘)
6     ,capture:true);
7     test.addEventListener(‘click‘,function()
8         console.log(‘test‘)
9     ,capture:true);

默认情况下：js在执行事件的时候，是非捕获阶段执行即冒泡。

 默认事件：就是浏览器给元素提供的默认事件或者默认行为。比如a标签的点击跳转，button标签在form表单里进行提交等等。

 1   /**
 2      * 阻止默认事件： 使用事件提供的函数：event.preventDefault()来阻止浏览器提供的默认事件。
 3      */
 4     var a=document.querySelector(‘a‘);
 5     a.addEventListener(‘click‘,function(e)
 6         e.preventDefault();
 7         alert(22);
 8     );
 9     /**
10      * addEventListener： 第三个参数可以传递once：boolean 表示改事件是否执行一次.
11      */
12     test.addEventListener(‘click‘,function()
13         alert(‘test‘)
14     ,once:true);

 

1     /**
2      * addEvenetListener 第三个参数传递passive:boolean表示我们是否阻止默认时间发生 true:表示无法阻止默认事件发生，false表示可以阻止默认事件发生。
3      */
4     a.addEventListener(‘click‘,function(event)
5         event.preventDefault();
6         alert(2)
7     ,passive:true)