JavaScript事件處理程序范圍和此

Question

如果我想動態地向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>

謝謝。

Answer 1

你想要做什么或者是注入的價值this

element[event] = function () {
  old.apply(this, arguments);
  new.apply(this, arguments);
};

或使用不會互相覆蓋的真實事件監聽器

element.addEventListener(event, new);

Answer 2

為了將“ this”指向正確的對象，我在事件處理程序的頂部執行以下操作：

var that = e.target || e.srcElement; 

“ that”現在指向觸發事件的對象

Answer 3

讓您的生活更輕松。 通過使用JavaScript框架附加和分離事件。 例如在jQuery $("#someID").bind("click", clickHandler); 。 或者，如果您不想使用jQuery，則還有很多其他JavaScript框架：MooTools，Dojo等。

查看http://api.jquery.com/category/events 。 當然，您可以使用舊式JavaScript執行此操作，但是您需要管理附加/分離事件的所有跨瀏覽器。