JS事件绑定

给一个对象绑定一个事件处理函数的第一种形式

如：obj.onclick=fn;

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

当需要给一个对象的同一个事件绑定多个不同的函数时，上面的方法就会被覆盖掉，这就需要用到下面的第二种形式来解决了

给一个元素绑定事件函数的第二种形式

ie: obj.attachEvent(事件名称，事件函数)；

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

function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}
//ie下的
document.attachEvent('onclick',fn1);//this指向window
document.attachEvent('onclick',fn2);//2       两个函数的执行不发生冲突

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

1、有事件捕获

2、事件名称没有‘on’

3、事件函数执行的顺序：正序

4、this触发该事件的对象

function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}
//标准下的
document.addEventListener('click', fn1, false);//document    this触发当前事件的对象
document.addEventListener('click', fn2, false);//2

 

是否捕获：默认是false，false----冒泡， true-----捕获，什么是事件捕获和事件冒泡？

事件函数执行的顺序不影响函数的执行，不必考虑

如何解决ie下obj.attachEvent的this指向的问题？

函数下的一个方法，call（参数1，参数2，参数3）；

参数1：改变函数执行过程中的内部this的指向问题，如果参数1为null则不改变this的指向问题

参数2：从第二个参数开始就是原来函数的参数列表

function fn1(a,b){
            alert(this);
            alert(a+b);
}
 //fn1();//window
// fn1.call(1,10,20);//调用函数   fn1()=fn1.call  指向1
 fn1.call(null,10,20);//指向window

 

obj.attachEvent中改变this指向的问题，例如：

function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}
document.attachEvent('onclick', function() {
    fn1.call(document);//this指向document
});
document.attachEvent('onclick', fn2);

 

这里总结一下绑定事件函数的第二种形式

function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}

//封装，以后就直接拿来用
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);