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

一.添加移除事件

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

//ie添加和移除事件方法
//好處:也可以添加多個(gè)事件,但是執(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)

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

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