Mar*_*cka 38 javascript events
我想删除给定事件类型的所有处理程序.假设我已经向按钮添加了两次"onclick事件",现在我想返回原始状态,其中没有为该按钮设置事件处理程序.
我怎样才能做到这一点？
PS:我发现了removeEventListener(非IE)/ detachEvent(IE)方法,但函数要求我作为参数传递处理事件的函数,这对我来说非常笨拙,因为我必须将函数存储在某处.
编辑:http://ejohn.org/blog/flexible-javascript-events/ - 我现在正在使用此代码
Thi*_*ter 12
使用jQuery或类似的框架来管理所有事件处理程序可能是个好主意.这将为您提供易于使用,不显眼的功能来添加和删除事件处理程序:
$(...).bind('click', function() { ... });
$(...).unbind('click');
// or, to unbind all events:
$(...).unbind();
小智 9
如果元素的父元素下只有一个子元素(或者如果你不介意所有兄弟的事件处理程序也丢失了):
elem.parentElement.innerHTML = elem.parentElement.innerHTML;
在Chrome 49,FF 44,IE 11中测试过
它删除所有'addEventListener'-s.
根据这个线程,您可以使用cloneNode从javascript元素中去除所有事件侦听器,如下所示:
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
http://www.quirksmode.org/js/events_advanced.html - "注册了哪些事件处理程序？" - 没有DOM 3级别似乎不可能:-(
编辑:我想出了这个代码.它符合我的需要.也许这对其他人有帮助.
使用Javascript:
function DomLib() {
}
/**
* Based on: http://ejohn.org/blog/flexible-javascript-events/
* Function that register event and enables it to be removed without explicitly giving the function definition
*/
DomLib.prototype.regEventEx = function (el, eventName, funct) {
if (el.attachEvent) {
el['e'+eventName+funct] = funct;
el[eventName+funct] = function(){el['e'+eventName+funct](window.event);}
el.attachEvent( 'on'+eventName, el[eventName+funct] );
} else {
el.addEventListener(eventName, funct, false);
}
if(!el.eventHolder) el.eventHolder = [];
el.eventHolder[el.eventHolder.length] = new Array(eventName, funct);
}
DomLib.prototype.removeEvent = function (obj, type, fn) {
if (obj.detachEvent) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else {
obj.removeEventListener( type, fn, false );
}
}
DomLib.prototype.hasEventEx = function (el, eventName, funct) {
if (!el.eventHolder) {
return false;
} else {
for (var i = 0; i < el.eventHolder.length; i++) {
if (el.eventHolder[i][0] == eventType && String(el.eventHolder[i][1]) == String(funct)) {
return true;
}
}
}
return false;
}
/**
* @return - returns true if an event was removed
*/
DomLib.prototype.removeEventsByTypeEx = function (el, eventType) {
if (el.eventHolder) {
var removed = 0;
for (var i = 0; i < el.eventHolder.length; i++) {
if (el.eventHolder[i][0] == eventType) {
this.removeEvent(el, eventType, el.eventHolder[i][1]);
el.eventHolder.splice(i, 1);
removed++;
i--;
}
}
return (removed > 0) ? true : false;
} else {
return false;
}
}
测试HTML页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 5.8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="01/01/2009">
<meta name="revisit-after" content="15 days">
<title>DomLibTest</title>
<link rel="stylesheet" type="text/css" href="my.css">
<!-- FILL IN: Location of your jQuery library -->
<script type="text/javascript" src="jQuery/jQuery-current.js"></script>
<!-- FILL IN: Plugin for debugging ... http://www.ecitadel.net/blog/2009/12/08/developing-jquery-use-dump-instead-alert -->
<script type="text/javascript" src="jQuery/jQuery.dump.js"></script>
<script type="text/javascript" src="DomLib.js"></script>
</head>
<body>
<div id="testElem-1"></div>
<script type="text/javascript">
<!--
var domLib = new DomLib();
function removeTest(el) {
var funct = function() { alert("#1: How Are You?");};
var funct2 = function() { alert("#2: How Are You?");};
domLib.regEventEx(el, "click", funct);
domLib.regEventEx(el, "mousemove", funct2);
domLib.regEventEx(el, "mousemove", funct2);
domLib.regEventEx(el, "mousemove", funct2);
$.dump(el.eventHolder);
domLib.removeEventsByTypeEx(el, "mousemove");
$.dump(el.eventHolder);
}
removeTest(document.getElementById('testElem-1'));
-->
</script>
</body>
</html>