JavaScript学习笔记——addEventListener

DOM0绑定事件

DOM0采用 " .onclick " 的写法绑定事件

element.onclick = function(){
    
    
}

但是这样的绑定方法只可以绑定一个事件，而同时绑定两个事件可能会导致事件的层叠

    <div class="box1">点我</div>
    <script>
        var div = document.querySelector(".box1");
		
		//发生事件层叠
        div.onclick = function(){
    
    
            console.log("警告1");
        }

        div.onclick = function(){
    
    
            console.log("警告2");
        }
    </script>

	//输出：警告2

DOM2绑定事件

DOM2采用 addEventListener 绑定事件

element.addEventListener("事件名",function(){
    
    
},false);

element.addEventListener("事件名",fn,false);

参数详解：

• 事件名：注意没有on
• function：执行函数
• true/false：true表示捕获阶段触发，false表示冒泡阶段触发(默认)。如果不写，则默认为false（重要）

    <div class="box1">点我</div>
    <script>
        var div = document.querySelector(".box1");

        div.addEventListener("click",function(){
    
    
            console.log("警告1");
            console.log("警告2");
        });
    </script>

	/*
		点击后输出：
		警告1
		警告2
	*/

addEventListener：

事件监听器，原事件被执行后，后面的事件照样被执行而不会发生层叠；适合团队开发

romoveEventListener：

移除事件监听，用法与 addEventListener 类似

冒泡和捕获

冒泡事件

当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。

捕获事件

件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获

事件到达目标元素后，它会接着通过DOM节点再进行冒泡

共存情况

捕获阶段是在冒泡阶段前面