DOM Event

网景 Navigator -> FireFox
微软IE -> Edge
谷歌 -> Chrome
W3C统一标准的 详细：https://www.w3.org/DOM/DOMTR
DOM level0 onclick

//onclick="要执行的代码"
//一旦用户点击，浏览器就eval("要执行的代码")
function print(){console.log('hi')}
eval('print');
eval('print()');
eval('print.call()')

function print(){console.log('hi')}
x.onclick=print //类型为函数对象
y.onclick=print() //undefined
z.onclick=print.call()// undefined
//一旦用户点击，那么浏览器就执行
x.onclick.call(x,{})//onclick是函数属性

DOM level1
DOM level2(DOM Events)
addEventListener和onclick的区别：

//队列
xxx.addEventListener("click",function(){
  console.log(1);
});
xxx.addEventListener("click",function(){
  console.log(2);
});
///xxx拥有一个队列eventListeners
//最后打印出 1，2

//属性唯一，存在覆盖
xxx.onclick=function(){
 console.log(2);
}
xxx.onclick=function(){
 console.log(3);
}
//最后打印只有3

function f1(){console.log(1)}
function f2(){console.log(2)}
function f3(){console.log(3)}
xxx.addEventListener('click',f1);
xxx.addEventListener('click',f2);
xxx.removeEventListener('click',f1);
xxx.addEventListener('click',f3);
xxx.removeEventListener('click',f3);

图

  <div id="grand1">
             爷爷
     <div id="parent1">
             父亲
        <div id="child1">
             儿子   
        </div>
      </div>
  </div>

//默认为false
//先捕获后冒泡
grand1.addEventListener('click',function(){
  console.log('爷爷');
},false);
parent1.addEventListener('click',function(){
  console.log('父亲');
},false);
child1.addEventListener('click',function(){
  console.log('儿子');
},false);
//儿子，父亲，爷爷
grand1.addEventListener('click',function(){
  console.log('爷爷');
},true);
parent1.addEventListener('click',function(){
  console.log('父亲');
},true);
child1.addEventListener('click',function(){
  console.log('儿子');
},true);
//爷爷，父亲，儿子
//如果发生在同一个节点，按顺序
child1.addEventListener('click',function(){
  console.log('儿子1');
});
child1.addEventListener('click',function(){
  console.log('儿子2');
},true);

事件模型

DOM level3
DOM level4(处于起草中)
目前程序员常用的是：DOM level2