JS事件之事件绑定与事件监听

事件绑定

  在我们对一个元素绑定了事件处理函数，并且事件触发后，我们才会得到自己想要的与网页的交互。抛开事件监听函数不谈，我们有两种绑定事件处理函数的方法:

  1.通过HTML来绑定事件处理函数

<a href="" onclick="fo()">hello</a>
    <script>
        function fo(){
            alert('Hello World!')
        }
    </script>

  这种方式和写css样式时通过标签的style属性直接设置行内样式类似。这样会让代码看起来一团糟，也违背了将实现动态行为的代码与显示文档静态内容的代码相分离的原则。

  2.在JavaScript 中绑定事件处理函数

  如果在JavaScript 中分配事件处理函数， 首先获得要处理的对象的引用，然后将函数赋值给对应的事件处理函数属性。

<button id="mylink"></button>
<script>
        var link = document.getElementById("mylink");
        link.onclick = function () {
            alert("Hello World !");
        };
</script>

  但我们想要对同一个对象使用onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，只会执行最后绑定的方法。但事件监听就不受一个元素只能绑定一个事件的限制

  3.事件监听器

  关于事件监听起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。

IE浏览器（IE9以下的浏览器，以下提到的IE均表示IE9以下的）：

 element.attachEvent(onevent,function);

event：事件类型,需要在事件类型前加‘on’。
function：指定要事件触发时执行的函数。

要注意:利用attachEvent注册的处理函数调用时this指向不再是先前绑定事件的元素，这时的this为window对象。

支持W3C标准事件监听器的浏览器：

element.addEventListener(event, function, boolean)

event : 事件类型名，与IE不同的是前面不用加‘on’ 。
function：指定要事件触发时执行的函数。
boolean：指定事件在捕获或冒泡阶段调用。默认时为false，true表示捕获阶段。false表示冒泡阶段。

封装一个可以兼容的绑定事件监听的函数：

function addEvent(ele,event,function,boolean){
            if(ele.addEventlistener){//支持W3C标准事件监听器的浏览器
                ele.addEventlistener(event,function,boolean)
            }
            else if(ele.attachEvent){//IE9以下的浏览器
                ele.attachEvent('on'+event,function(){ },boolean)
            }
            else{
                ele['on'+event] = function;
            }
        }
        addEvent(box,'click',function,false)