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);

posted on 2017-06-04 20:19 洛水三千 阅读(...) 评论(...) 编辑 收藏

导航