如果我想动态地向HTML元素添加事件处理程序,而不是丢弃或破坏任何现有的事件处理程序。
下面的代码不会这样做,因为如果为元素上的事件注册的现有处理程序引用了'this',那么我的处理程序链接就会破坏它。我真的希望能够在新的处理程序中使用'this',如果可能的话,但我总是可以解决这个问题。
<script type="text/javascript">
function oldHandler()
{
alert("old handler; this.value=" +this.value);
}
</script>
<form name="test1" id="test1">
<fieldset>
<legend>My Test</legend>
<ol>
<p>
<li>
<label for="tf1">Test Field 1</label>
<input id="tf1" onchange="existingHandler();" name="tf1"/>
</li>
</ol>
</fieldset>
</form>
<script type="text/javascript">
function myAddHandler(element, event, newHandler)
{
var existingHandler = element[event];
element[event] = function() {
newHandler();
existingHandler();
}
}
function myOnChangeHandler()
{
alert("new handler; this.value=" +this.value);
}
myAddHandler(document.getElementById('tf1'), "onchange", myOnChangeHandler);
</script>
感谢。
答案 0 :(得分:3)
您要做的是注入this
element[event] = function () {
old.apply(this, arguments);
new.apply(this, arguments);
};
或者使用不会互相覆盖的真实事件监听器
element.addEventListener(event, new);
答案 1 :(得分:0)
让您的生活更轻松。使用JavaScript框架附加和分离事件。例如在jQuery $("#someID").bind("click", clickHandler);
中。或者如果你不想使用jQuery,那里还有很多其他的JavaScript框架:MooTools,Dojo等。
结帐http://api.jquery.com/category/events。当然,您可以使用旧式JavaScript执行此操作,但是您需要管理附加/分离事件的所有跨浏览器。
答案 2 :(得分:0)
要将'this'指向正确的对象,我会在我的事件处理程序的顶部执行此操作:
var that = e.target || e.srcElement;
'that'现在指向触发事件的对象