JS中的事件流及DOM0、DOM2简介

DOM0级事件和DOM2级事件

事件就是用户或浏览器自身执行的某种操作，如click、load、mouseover等，都是事件的名字，而响应某个事件的函数就被称为事件处理程序。

事件过程
当用户操作浏览器的时候，浏览器一直监听者用户的操作，会触发若干个事件,同时检测事件是否有赋值某个事件函数，如果未赋值为null , 如果某个事件上有事件函数，那么就被执行；
btn.onclick // ==null == 未赋值
btn.haha // == undefined == 自定义的

---

一、0级DOM

0级DOM分为两种

1、在标签内写onclick事件

2、在JS写οnclick=function（）{}函数

• 解除事件将某个元素的事件赋值为null
  ele.事件 = null

// 1、行内
<button id="btn" onclick="alert(1)">按钮</button>

// 2、元素，on事件名 = 函数
document.getElementById("btn")..onclick = function(){
   
    alert(1);       
}

0级DOM事件的特点

• 1、DOM0级事件只能触发事件冒泡阶段不能触发事件捕获阶段。

box2.onclick = function(){
   
	alert("我是box2");
}
box3.onclick = function(){
   
	alert("我是box3");
}

不管怎么改变事件的绑定顺序，不影响弹出框。box2–>box3，因为DOM0只能触发事件冒泡不能触发事件捕获。

2、同一元素绑定相同的事件，后面的会覆盖前面的。

点击btn 只会弹出2，因为on**方法相当于给元素添加属性。后面写的会覆盖先写的。

///1、覆盖事件演示
btn.onclick = function(){
   
   alert('hello');       
}

btn.onclick = function(){
   
   alert('hello,我是真的');
   btn.onclick = null; //  只弹一次
        }
//此时只会弹出‘hello,我是真的’，因为下边把上边的覆盖了；

// 2、如果需要添加多个事件，那么可以通过一遍这种形式操作
btn.onclick = function(){
   
          fn();
          fn2();      
      };
      
function fn(){
   
      alert(1)
  };
function fn2