事件绑定第一种形式:obj.onclick = fn1;
给文档添加多个点击事件,后面会覆盖前面的事件,所以只有最后一个事件执行了。
window.onload = function(){ function fn1(){alert(‘1‘);} function fn2(){alert(‘2‘);} function fn3(){alert(‘3‘);} document.onclick = fn1; document.onclick = fn2; document.onclick = fn3; //最后一个会覆盖前面的事件 };
事件绑定第二种形式:【IE:obj.attachEvent(事件名称,事件函数); 标准:obj.addEventListener(事件名称,事件函数,是否捕获); 】
IE:obj.attachEvent(事件名称,事件函数);
1.没有捕获
2.事件名称有on
3.事件函数执行的顺序:标准IE -> 正序 非标准 IE -> 倒序
4.this指向window
标准:obj.addEventListener(事件名称,事件函数,是否捕获);
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this触发该事件的对象
IE:obj.attachEvent(事件名称,事件函数);
window.onload = function(){ function fn1(){alert(‘1‘);} function fn2(){alert(‘2‘);} function fn3(){alert(‘3‘);}
/*document.attachEvent(‘onclick‘, function() { fn1.call(document); }); document.attachEvent(‘onclick‘, fn2);*/
};
标准:obj.addEventListener(事件名称,事件函数,是否捕获);
window.onload = function(){ function fn1(){alert(‘1‘);} function fn2(){alert(‘2‘);} function fn3(){alert(‘3‘);} /* 是否捕获 : 默认是false false:冒泡 true:捕获 object.addEventListener(type , fn ,false); */ document.addEventListener(‘click‘ , fn1 , false); document.addEventListener(‘click‘ , fn2 , false); document.addEventListener(‘click‘ , fn3 , false); };
上面都方法都只兼容个别浏览器,以下是集合两种做的兼容进行封装处理:
window.onload = function(){ function fn1(){alert(‘1‘);} function fn2(){alert(‘2‘);} function fn3(){alert(‘3‘);} //函数封装 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); bind(document , ‘click‘ ,fn3); };
时间: 2024-10-14 06:30:14