摘要：一添加移除事件級添加和移除事件方法級添加和移除事件方法好處可以添加多個點擊方法按添加順序執(zhí)行添加和移除事件方法好處也可以添加多個事件但是執(zhí)行順序和添加順序是相反的二和的區(qū)別代碼代碼代碼返回表示該事件產(chǎn)生冒泡返回表示不產(chǎn)生冒泡說明的第三個參

一.添加移除事件

 //Dom0級添加和移除事件方法
var div = document.getElementById("box");
div.onclick = function() {
  console.log("click the div ", event, "this", this);
}
div.onclick = null;
//Dom2級添加和移除事件方法
//好處:可以添加多個點擊方法,按添加順序執(zhí)行
function clickFun() {
  console.log("click the div", event);
}
div.addEventListener("click", clickFun, false);
div.removeEventListener("click", clickFun);

//ie添加和移除事件方法
//好處:也可以添加多個事件,但是執(zhí)行順序和添加順序是相反的
div.attachEvent("onclick", clickFun)
div.detachEvent("onclick", clickFun)

二.mouseover 和mouseenter的區(qū)別

css代碼:
.box,
.box2 {
  width: 100px;
  height: 200px;
  background: pink;
  border: 1px solid black;
}

.box2 {
  margin-top: 20px;
  background: brown;
  border: 1px solid yellow;
}
html代碼:
mouseover
      
box
      
box
      
box
    
    
mouseenter:
      
box2
      
box2
      
box2
 
    
 js代碼:
    var box = document.getElementById("box");
    var box2 =document.getElementById("box2");
    var x = y = 0;
    box.addEventListener("mouseover", function(event) {
      console.log("x:", x += 1,event.bubbles);//event.bubbles返回true表示該事件產(chǎn)生冒泡
    }, false)
    box2.addEventListener("mouseenter", function(event) {
      console.log("y:", y += 1,event.bubbles);//event.bubbles返回false,表示mouseenter不產(chǎn)生冒泡
    }, false)

說明:addEventListener的第三個參數(shù),這個布爾值參數(shù)如果是 true，表示在捕獲
階段調(diào)用事件處理程序；如果是 false，表示在冒泡階段調(diào)用事件處理程序

輸出結(jié)果描述:鼠標(biāo)每次移動到id為box的元素(和子元素)都會觸發(fā)mouseover事件,而mouseenter只在移入id=box2的元素才會觸發(fā),移入子元素中不會觸發(fā)mouseenter事件,由此得出:mouseover會通過事件冒泡向父元素傳播mouseover事件,而mouseenter不會產(chǎn)生事件冒泡