JavaScript基础(31)_事件的绑定、事件的传播

使用对象.事件 = 函数的形式绑定响应函数。它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个，则后边的事件会覆盖前边的事件。

            var box1 = document.getElementById("box1");
            box1.onclick = function () {
                alert(1);
            }
            // 后者事件会覆盖前者事件
            box1.onclick = function () {
                alert(2);
            }

addEventListener()事件监听器

通过这个方法也可以为元素绑定响应函数 （不支持IE8及以下浏览器）
参数：
1、事件的字符串，不要on
2、回调函数，当事件触发时该函数会被调用
3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数。这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

            // 先绑定先执行
            box1.addEventListener("click", function () {
                alert(1);
            }, false)
            box1.addEventListener("click", function () {
                alert(2);
            }, false)

attachEvent()事件监听器

在IE8及以下中可以使用attachEvent()来绑定事件
参数：
1.事件的字符串，要on
2.回调函数

这个方法也可以同时为一个事件绑定多个处理函数。不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

            // 后绑定先执行
            box1.attachEvent("onclick", function () {
                alert(1);
            })
            box1.attachEvent("onclick", function () {
                alert(2);
            })
        }

解决各浏览器不兼容问题

定义一个bind函数，用来为指定元素绑定响应函数
参数：
obj 要绑定事件的对象
evenStr 事件的字符串
callback 回调函数
addEventListener()中的this，是绑定事件的对象。attachEvent()中的this，是window。需要统一两个方法this。

        function bind(obj, eventStr, callback) {
            if (obj.addEventListener) {
                // 大部分浏览器兼容的方式
                obj.addEventListener(eventStr, callback, false);
            }
            else {
                // this是谁由调用方式决定 callback.call(obj)
                // 兼容IE8及以下浏览器
                obj.attachEvent("on" + eventStr, function () {
                    // 在匿名函数中调用回调函数
                    callback.call(obj);
                })
            }
        }

事件的传播

关于事件的传播：
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素。

W3C综合了两个公司的方案，将事件的传播分成了三个阶段：
1、捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
2、目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3、冒泡阶段
事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件。

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下，我们不会希望在捕获阶段触发事件。所以这个参数一般都是false。

IE8及以下浏览器中没有捕获阶段。