用对象属性方式给同一对象绑定事件,会相互抵消
新的添加事件的方法addEventListener(1,事件类型(字符串 不加on,2监听器(事件处理函数)3是否使用捕获)
通过添加事件监听器的方法注册事件,不会被抵消,但是有兼容问题
btn1.addEventListener("click",function () {
alert("第一个人的代码");
},false);
btn1.addEventListener("click",function () {
alert("第二个人的代码");
},false);
//兼容问题,ie678支持attachEvent方式:
//1,事件类型(字符串 要加on) 2,监听器(事件处理函数)
btn1.attachEvent("onclick",function () {
alert("第一个人的代码");
});
btn1.attachEvent("onclick",function () {
alert("第二个人的代码");
});
//移除事件的新方法:
function fn() {
alert("第二个人的代码");
};
btn1.attachEvent("onclick",fn);
btn1.detachEvent("onclick",fn);
第三个参数:捕获
false,不使用捕获的方式 也就是使用冒泡顺序,自下而上,从子级到父级
true,使用捕获的方式,自上而下,捕获的顺序。
day04封装 兼容所有浏览器的添加/移除事件的函数
function fn() {
alert("绑定事件");
};
addEvent(btn1,"click",fn);//调用添加
removeEvent(btn1,"click",fn);//调用移除
function addEvent(element,eventName,Listener) {
if (element.addEventListener) {
element.addEventListener(eventName,Listener,false);//主流浏览器兼容
}else if (element.attachEvent) {
element.attachEvent("on"+eventName,Listener);
}else{
//element.onclick=Listener;//点语法,可以不用写死
element["on"+eventName]=Listener;//中括号语法可以写活
}
};
function removeEvent(element,eventName,Listener) {
if (element.addEventListener) {
element.addEventListener(eventName,Listener,false);//主流浏览器兼容
}else if (element.detachEvent) {
element.detachEvent("on"+eventName,Listener);
}else{
element["on"+eventName]=Listener;//中括号语法可以写活
}
};