【JS】addEventListener方法介绍

addEventListener()，事件监听，用于向指定的元素添加事件监听

语法：addEventListener(event,function,useCapture);

第一个参数event：指事件的类型（如’click’,‘mousedown’）
第二个参数function：事件触发后调用的函数
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；值为true时，捕获传递。

例：

   

      点击
        

(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)
例：

         

   点击
            

可以添加不同的事件类型
例：

           

 点击
            

使用匿名函数传递参数
例：

            点击
            

removeEventListener(),用来移除事件的监听
例：

       

 点击
        

事件的传递有两种方式：冒泡与捕获

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素； 【从里到外】
在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。【从外到里】

例：

             

                
冒泡
            
            

            

                
捕获
            

            

浏览器的兼容性问题：在IE9之前，只能使用attachEvent

添加：attachEvent()方法
移除：detachEvent()方法

使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素

addEventListener() 跨浏览器的解决方法
例：

      

  点击
        

冒泡传递和捕获传递：

    
        
冒泡
    






    
        
捕获