原生js绑定和解绑事件,兼容IE,FF,chrome

时间:2023-03-09 02:47:51
原生js绑定和解绑事件,兼容IE,FF,chrome

   主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了。

   需求:当鼠标移上去以后,给Select加载元素,接着解除这个事件。贴上代码,这个是可以运行的,兼容 IE FF chrome

  

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js绑定和解绑事件</title>
</head>
<body>
选择
<select id="sel1">
<option>--请选择--</option>
</select> <br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
选择2
<select id="sel2">
<option>--请选择--</option>
</select> <script type="text/javascript"> var _obj = {}; // 事件绑定
_obj.bindHandler = (function() {
return function(obj,type,fn){
var func = function(){
fn.call(obj); //这里主要是想将obj这个哥们传到我们后期要调用的函数中,所以可以将参数绑定在这个哥们身上
};
obj.fnn = func; //这里主要是为了在解绑的时候取到函数名
obj.addEventListener ? obj.addEventListener(type,func,false) : obj.attachEvent("on"+type,func);
}
})(); // 事件解除
_obj.removeHandler = (function() {
return function(obj,type,fn){
obj.removeEventListener ? obj.removeEventListener(type,fn,false) : obj.detachEvent("on"+type,fn);
}
})(); _obj.selEvent=function(){
var id = this.id;
//添加option
for(var j=0;j<5;j++){
this.options[this.length]=new Option("tl"+j,"值"+j);
} //解除绑定
_obj.removeHandler(this,'mouseover',this.fnn); //如果 id = sel1
if("sel1"==id){
//移除sel2的绑定
var sel2 = document.getElementById('sel2');
_obj.removeHandler(sel2,'mouseover',sel2.fnn);
}
} _obj.init=function(){
//绑定事件
var sels = document.getElementsByTagName("select");
for(var i=0;i<sels.length;i++){
_obj.bindHandler(sels[i],'mouseover',_obj.selEvent);
}
} _obj.init(); </script> </body>
</html>