JavaScript事件处理程序范围和此

时间:2011-11-04 14:05:43

标签: javascript

如果我想动态地向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>

感谢。

3 个答案:

答案 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'现在指向触发事件的对象