本文共 1636 字，大约阅读时间需要 5 分钟。

1. 事件绑定的第一种方式

给一个对象绑定一个事件处理函数的第一种形式在上一节提过，obj.onclick = fn;如下所示

function fn1() {       alert(this);}document.onclick = fn1;

这种方式会存在一个问题，即后面的事件会覆盖前面绑定的事件，如下所示，只会弹出2.

function fn1() {       alert(this);}function fn2() {       alert(2);}document.onclick = fn1;document.onclick = fn2; //会覆盖前面绑定fn1

所以，如何解决这个办法，这就用到事件绑定的第二种形式。

2. 事件绑定的第二种形式

给一个元素绑定事件函数的第二种形式，给一个对象的同一个事件绑定多个不同的函数。注意这里会有兼容性问题。

ie：obj.attachEvent(事件名称，事件函数);

    1.没有捕获    2.事件名称有on    3.事件函数执行的顺序：标准ie-》正序   非标准ie-》倒序    4.this指向window

上面的代码这样改写，就不会出现覆盖的问题document.attachEvent('onclick',fn1);document.attachEvent('onclick',fn2);

标准：obj.addEventListener(事件名称，事件函数，是否捕获);

    1.有捕获    2.事件名称没有on    3.事件执行的顺序是正序    4.this指向触发该事件的对象

//是否捕获 : 默认是false    false:冒泡 true：捕获document.addEventListener('click', fn1, false);document.addEventListener('click', fn2, false);

3. 关于call

由于obj.attachEvent()中的this始终指向window。可以用call来解决。
首先来介绍一下call()
call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表

function fn1(){     alert(this);}fn1();//window

注意，fn1()和fn1.call()的作用一样，都是调用这个函数。

function fn1(){     alert(this);}fn1.call();//window调用函数 fn1()==fn1.call()

fn1()和fn1.call()的不同之处就是call()里面可以去传参。call方法第二个参数开始就是原来函数的参数列表

function fn1(a, b) {       alert(this);    alert(a + b);}fn1.call(1,10,20);//弹出1,30//null的话就指向windowfn1.call(null, 10, 20); //弹出window,30

最后我们封装一个函数，完美的解决了上面的问题

function bind(obj, evname, fn) {       if (obj.addEventListener) {        obj.addEventListener(evname, fn, false);    } else {        obj.attachEvent('on' + evname, function() {               fn.call(obj);        });    }}bind(document, 'click', fn1);bind(document, 'click', fn2);

看懂了吗？是不是觉得头晕晕哒O(∩_∩)O