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){
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]=addEvent.execEventHandles;
}
}
}
addEvent.__EventHandlesCounter=1;
addEvent.execEventHandles = function(evt){
if(!this.__EventHandles) {return true;}
evt = evt || window.event;
var fns = this.__EventHandles[evt.type];
for (var i=0;i<fns.length;i++){
if(fns[i] instanceof Function){
fns[i].call(this);
}
}
};
function delEvent(obj,evt,fn,useCapture){
if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数
obj.removeEventListener(evt,fn,!!useCapture);
}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;
if(evt.type == "mouseover"){
evt.relatedTarget = evt.fromElement;
}else if(evt.type == "mouseout"){
evt.relatedTarget = evt.toElement;
}
evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
evt.eventPhase = 2;
evt.timeStamp = (new Date()).getTime();
}
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};
fixEvent函数不是单独执行的，它必须有一个事件对象参数，而且只有事件发生时它才被执行！最好的方法是把它整合到addEvent函数的execEventHandles里面。
addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在这里对其进行标准化操作
var fns = this.__EventHandles[evt.type];
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("您投了一次票");
document.getElementById("1").detachEvent("onclick",test);
}
</script>
</head>
<body>
<input type="button" value="投票" id="1"/>
<script type="text/javascript">
document.getElementById("1").attachEvent("onclick",test);
</script>
</body>
</html>
这里使用document.getElementById("1").attachEvent("onclick",test);进行动态的事件绑定，使用
document.getElementById("1").detachEvent("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程序设计有所帮助。
-
Listener架构概述 Listener Listener.DrainType (Enum) Filter FilterChainMatch FilterChain Listener Listener proto { "name": "...", "address": "{...}", "filter_chains": [], "use_original_dst": "{...}
-
本文向大家介绍Oracle监听口令及监听器安全详解，包括了Oracle监听口令及监听器安全详解的使用技巧和注意事项，需要的朋友参考一下 很多Oracle用户都知道，Oracle的监听器一直存在着一个安全隐患，假如对此不设置安全措施，那么能够访问的用户就可以远程关闭监听器。 相关示例如下： 命令执行成功 大家可以发现，此时缺省的监听器的日志还无法记录操作地址： 有鉴于此，为了更好的保证监听器的安全，
-
本文向大家介绍JavaScript使用addEventListener添加事件监听用法实例，包括了JavaScript使用addEventListener添加事件监听用法实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮
-
本文向大家介绍Java添加事件监听器，包括了Java添加事件监听器的使用技巧和注意事项，需要的朋友参考一下 示例 Preferences对象发出的事件有两种：PreferenceChangeEvent和NodeChangeEvent。 PreferenceChangeEvent 每当节点的键值对之一更改时，对象PreferenceChangeEvent就会发出A。可以使用来监听：Propertie
-
问题内容： 我想将鼠标悬停在我创建的SpanElement的侦听器上： 我在Google中找到了如何使用Label-wrapper做到这一点，但我想在没有任何包装的情况下做到这一点。可能吗？ 谢谢。 问题答案： 也可以不使用JSNI。 因此，与您的元素： 将事件侦听器直接添加到元素： …而且看起来确实很丑陋；）正如您所注意到的那样，对于此元素构想的所有dom事件，事件侦听器都是“公共的”。因此，为
-
问题内容： 无论如何，要删除这样添加的事件侦听器： 不更换元素？ 问题答案： 除非您在创建时存储了对事件处理程序的引用，否则无法彻底删除事件处理程序。 我通常会将它们添加到该页面上的主要对象中，然后在处理完该对象后可以对其进行迭代和清理。