Javascript添加监听与删除监听⽤法详解
本⽂实例讲述了Javascript添加监听与删除监听的⽤法。分享给⼤家供⼤家参考。具体分析如下：
js中事件监听就是利⽤addEventListener来绑定⼀个事件，这个⽤法在jquery中⾮常常⽤并且简单，但在原⽣js中⽐较复杂，这⾥整理了addEventListener事件各⽅法的测试与例⼦供⼤家参考学习。
在前两天做播放器的时候添加监听后删除监听遇到了⼀点⿇烦，删不掉，后来看了⼀下才发现，参数需要完全对应，什么叫完全对应呢，换句话说：
复制代码代码如下:
$('.video')[0].addEventListener('timeupdate', currentTimeHandler, true);
⽐如这句，需要传⼊三个参数，这样才能够删除，为什么⼀定要这样，没错，蛋疼的地⽅就在这⾥：
在add和remove时，第三个参数确实可以不写，但此时他们的默认情况是不⼀样的！！
通常情况下addEventListener是false…
1、添加⾃定义事件监听
复制代码代码如下:
var eventHandlesCounter=1;//统计添加事件监听的个数，0作为预留位
function addEvent(obj,evt,fn){
if(!fn.__EventID){ fn.__EventID=eventHandlesCounter++;}
if(!obj.__EventHandles){ obj.__EventHandles=[]; }
if(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
if(obj["on"+evt] instanceof Function){
obj.__EventHandles[evt][0]=obj["on"+evt];
obj["on"+evt]=handleEvents;
}
}
obj.__EventHandles[evt][fn.__EventID]=fn;
function handleEvents(){
var fns = obj.__EventHandles[evt];
for (var i=0;i<fns.length;i++)
fns[i].call(this);
}
}
2、⾃定义删除事件监听
复制代码代码如下:
function delEvent(obj,evt,fn){
if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
return false;
}
if(obj.__EventHandles[evt][fn.__EventID]==fn){
script在html中的用法delete obj.__EventHandles[evt][fn.__EventID];
}
}
3. 对上述⽅法进⾏修正
复制代码代码如下:
function addEvent(obj,evt,fn,useCapture){
if(obj.addEventListener){//优先使⽤W3C事件注册
obj.addEventListener(evt,fn,!!useCapture);
}else{
if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter++;}
if(!obj.__EventHandles){ obj.__EventHandles=[];}
if(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
if(obj["on"+evt]){
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;
}
obj["on"+evtype]=EventHandles;
}
}
}
addEvent.__EventHandlesCounter=1;
if(!this.__EventHandles) {return true;}
evt = evt || window.event;
var fns = this.__pe];
for (var i=0;i<fns.length;i++){
if(fns[i] instanceof Function){
fns[i].call(this);
}
}
};
function delEvent(obj,evt,fn,useCapture){
if (veEventListener) {//先使⽤W3C的⽅法移除事件处理函数
}else {
if(obj.__EventHandles){
var fns = obj.__EventHandles[evt];
if(fns){delete fns[fn.__EventID];}
}
}
4、标准化事件对象
复制代码代码如下:
function fixEvent(evt){
if(!evt.target){
evt.target = evt.srcElement;
evt.preventDefault=fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
pe == "mouseover"){
}else pe == "mouseout"){
}
evt.charCode =(pe == "keypress")?evt.keyCode:0;
evt.eventPhase = 2;
evt.timeStamp = (new Date()).getTime();
}
return evt;
}
fixEvent.preventDefault=function(){ urnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};
fixEvent函数不是单独执⾏的，它必须有⼀个事件对象参数，⽽且只有事件发⽣时它才被执⾏！最好的⽅法是把它整合到addEvent函数的execEventHandles⾥⾯。
复制代码代码如下:
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在这⾥对其进⾏标准化操作
var fns = this.__pe];
for (var i=0;i< fns.length;i++) {
if (fns[i] instanceof Function) {
fns[i].call(this,evt);//并且将其作为事件处理函数的第⼀个参数
//这样在事件处理函数内部就可以使⽤统⼀的⽅法访问事件对象了 } } };
上⾯是⾼⼿写了，下⾯整理⼏个实际的监听事情的例⼦
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test6.html</title>
<script type="text/javascript">
function test(){
window.alert("您投了⼀次票");
}
</script>
</head>
<body>
<input type="button" value="投票" id="1"/>
<script type="text/javascript">
</script>
</body>
</html>
这⾥使⽤ElementById("1").attachEvent("onclick",test)；进⾏动态的事件绑定，使⽤
复制代码代码如下:
进⾏动态的时间的取消，这样就实现了这个事件只能相应⼀次，下次再点击这个按钮的时候就不会再产⽣什么效果。
下⾯再演⽰⼀个时时监听键盘事件，判断输⼊的是否是数字，如果不是数字直接动态提⽰，然后拒绝其输⼊
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test7.html</title>
<script type="text/javascript">
function test(event){
//⽤户每按下⼀个按键，就去判断是不是数字
if(event.keyCode<48 || event.keyCode > 57){
window.alert("您输⼊的不是⼀个数字");
return false;
}
}
</script>
</head>
<body>
<input type="text" onkeypress="return test(event);" />请输⼊数字
</body>
</html>
这⾥的event就是⼀个事件对象，他能返回很多的信息，具体请参考相关⽂档。
补充：事件监听⽅⾯的兼容
1. IE使⽤attachEvent/detachEvent⽅法来添加和删除事件；w3c使⽤addEventListener/removeEventListener⽅法。
2. IE对其事件使⽤onevent的命名⽅式，⽽w3c的是event的命名⽅式。
3. IE事件内使⽤的是⼀个全局的Event对象，⽽w3c是将event对象作为参数传递给。
4. 为了避免触发默认的事件⾏为，IE的做法是要求程序员设置Event对象中的returnValue属性值为false，⽽w3c的做法是执⾏preventDefault⽅法。
5. IE没有提供对事件捕获阶段的⽀持。
6. 要停⽌事件的传递，IE的做法是设置event对象的cancelBubble为true，⽽w3c的做法是设置执⾏stopPropagation⽅法。
7. IE将事件当做⼀个独⽴的函数来调⽤，⽽w3c中它是作为对象的⽅法来调⽤的，这表⽰在ie中事件中的this关键字指向的不是事件发⽣对象⽽是⼀个没⽤的全局对象（window对象）。
8. IE在使⽤事件⽅⾯存在内存泄露问题。在IE浏览器中，如果要为某个元素创建⼀个事件，并且在中使⽤
该元素，则在⽤户进⼊其他页⾯之前，该以及相关的DOM节点作占据的内存空间不会被释放。希望本⽂所述对⼤家的javascript程序设计有所帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论