javascript事件

一.添加移除事件

 //Dom0级添加和移除事件方法
var div = document.getElementById('box');
div.onclick = function() {
  console.log('click the div ', event, 'this', this);
}
div.onclick = null;
//Dom2级添加和移除事件方法
//好处:可以添加多个点击方法,按添加顺序执行
function clickFun() {
  console.log('click the div', event);
}
div.addEventListener('click', clickFun, false);
div.removeEventListener('click', clickFun);

//ie添加和移除事件方法
//好处:也可以添加多个事件,但是执行顺序和添加顺序是相反的
div.attachEvent('onclick', clickFun)
div.detachEvent('onclick', clickFun)

二.mouseover 和mouseenter的区别

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

.box2 {
  margin-top: 20px;
  background: brown;
  border: 1px solid yellow;
}
html代码:
<div class="box" id="box">mouseover
      <div>box</div>
      <div>box</div>
      <div>box</div>
    </div>
    <div class="box2" id="box2">mouseenter:
      <div>box2</div>
      <div>box2</div>
      <div>box2</div>
 </div>
    
 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表示该事件产生冒泡
    }, false)
    box2.addEventListener('mouseenter', function(event) {
      console.log('y:', y += 1,event.bubbles);//event.bubbles返回false,表示mouseenter不产生冒泡
    }, false)

说明:addEventListener的第三个参数,这个布尔值参数如果是 true，表示在捕获
阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序

输出结果描述:鼠标每次移动到id为box的元素(和子元素)都会触发mouseover事件,而mouseenter只在移入id=box2的元素才会触发,移入子元素中不会触发mouseenter事件,由此得出:mouseover会通过事件冒泡向父元素传播mouseover事件,而mouseenter不会产生事件冒泡