JavaScript 注册事件处理函数onclick和addEventListener的深入理解

在学习时，突然发现以下两个对加载完成事件的处理的不同。
第一个：一个是对一个成员属性进行（function）函数的赋值，
第二个：另一个则是直接使用成员方法，并且传入两个参数。
这种方式之间到底有什么区别呢？
第一个：window.onload=function(){
       alert('onload1')
        };
第二个： window.addEventListener('load',function () {
        alert(777);
        });

所有的事件都包含三个阶段即：捕获-》目标-》冒泡

1、如图：首先是捕获式传递事件，接着是冒泡式传递，所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。

DOM标准的事件模型最独特的性质是,文本节点也会触发事件(在IE不会)。

1、事件传送

转载于:https://www.cnblogs.com/chenjianhong/archive/2012/08/07/4145017.html

一、首先来谈谈第一种，对window这个dom元素对象进行一个事件绑定

首先是这个方式的使用语法

语法：

node.事件名 = function(){

  //事件被触发时，执行这个函数。

};
//例如
document.getElementById('btn').onclick = function(){
     console.log('你点击我了');
}

首先获取到btn这个按钮的DOM节点，然后通过dom元素对象的事件属性onclick注册一个事件处理函数，通俗的讲就是就是为dom元素对象的事件 属性 赋值一个函数，当事件触发时，就会调用此函数。
缺点：只能为同一个元素对象注册一个相同类型的事件处理函数，否则后面的会覆盖前面的。

事件句柄

事件句柄（又称事件处理函数，DOM称之为事件监听函数），用于响应某个事件而调用的函数称为事件处理函数
。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。

我们认为响应点击事件的函数是onclick事件处理函数。

事件传播

   <div id="d1">d1
    <div id="d2">d2
        <div id="d3">d3
            <div id="d4">d4</div>

        </div>
    </div>
</div>

// d1.onclick=function () {
    //     console.log('弹出d1');
    // };
    // d2.onclick=function () {
    //     console.log('弹出d2');
    // };
    // d3.onclick=function () {
    //     console.log('弹出d3');
    // };
    // d4.onclick=function () {
    //     console.log('弹出d4');
    // };
    // 弹出d4
    // 弹出d3
    // 弹出d2
    // 弹出d1
    //
   *************** 冒泡阶段处理事件**************

二、其次来谈谈这种ES5新增的事件处理方法

addEventListener方法可以为事件 注册监听器，也就是注册 事件处理函数。

DOM对象添加事件，也叫做事件监听。

1. IE浏览器中用：元素节点.attachEvent(事件名, 事件处理函数)；
2. 火狐浏览器用：元素节点.addEventListener(事件名, 事件处理函数)；// 事件名不要带on

意思是这dom节点对象调用里面的成员方法，并传入参数，进行事件绑定

优点：事件监听方式添加的事件，特点是可以为一个元素绑定多个同类型的事件。

事件传播

 d1.addEventListener('click',function () {console.log('弹出d1');},true);
    d2.addEventListener('click',function () {console.log('弹出d2');},false);
    d3.addEventListener('click',function () {console.log('弹出d3');},false);
    d4.addEventListener('click',function () {console.log('弹出d4');},true);


// 弹出d1
// 弹出d4
// 弹出d3
// 弹出d2
 1、 addeventlistener函数的第三个参数决定是冒泡阶段（false）处理事件，还是捕获阶段(true)处理事件
 2、d1为true捕获阶段处理，所以在点击d4时最先弹出，
 3、之后弹出d4，然后进行冒泡，冒泡过程中最先接触d3，所以d3弹出。之后冒泡到d2，弹出d2

三、笔者只能在浅层次的理解这两者的运行区别，对addEventListener方法的运行机制理解，只能等学习的深入了。