js事件

 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     }

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

 1     /**
 2      *
 3      * @type {HTMLBodyElement}addEventListener(事件类型名称,触发事件执行的函数,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});

 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})