js的事件绑定

来源：互联网发布：如何学数据库管理系统编辑：程序博客网时间：2024/05/01 15:36

我们想用两个window.onload的时候，起作用的其实是最后一个。就和变量一个道理，如果写 var a=5; a=9; 最后a是9；同学说，可以写到一个window.onload里面，但是实战项目中，我们都是分工合作的，每个人都想用自己的window.onload，这个时候就需要用到事件绑定了。

例如下面这个例子，结果只会弹出b，而不会先弹出a，再弹出b

window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
alert('a');
};
oBtn.onclick=function(){
alert('b');
};

};

如果我们要实现先弹出a，再弹出b，就要运用事件绑定
attachEvent只兼容IE，addEventListener不兼容IE，兼容其他浏览器
语法：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){var oBtn=document.getElementById('btn1');//attachEvent(事件名， 函数)//IE/*oBtn.attachEvent('onclick', function (){alert('a');});oBtn.attachEvent('onclick', function (){alert('b');});*///FF//addEventListener(事件名, 函数, false)oBtn.addEventListener('click', function (){alert('a');}, false);oBtn.addEventListener('click', function (){alert('b');}, false);/*oBtn.onclick=function (){alert('a');};oBtn.onclick=function (){alert('b');};*/};</script></head><body><input id="btn1" type="button" value="按钮" /></body></html>在js中，我们要同时在IE与非IE浏览器下起作用，我们稍作更改就可以了<pre name="code" class="javascript"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload=function(){var oBtn=document.getElementById('btn');if(oBtn.attachEvent){oBtn.attachEvent('onclick',function(){alert('a');})oBtn.attachEvent('onclick',function(){alert('b');})}else{oBtn.addEventListener('click',function(){alert('a');},false)oBtn.addEventListener('click',function(){alert('b');},false)}};</script></head><body><input type="button" value="点击" id="btn" /></body></html>

封装一下函数

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function addeven(obj,ev,fn){if(obj.attachEvent){obj.attachEvent('on'+ev,fn)obj.attachEvent('on'+ev,fn)}else{obj.addEventListener(ev,fn,false);obj.addEventListener(ev,fn,false)}}window.onload=function(){var oBtn=document.getElementById('btn');addeven(oBtn,'click',function(){alert('a');})addeven(oBtn,'click',function(){alert('b');})};</script></head><body><input type="button" value="点击" id="btn" /></body></html>

0 0