JavaScript事件处理程序范围和此

Question

If I want to dynamically add an event handler to an HTML element, and not discard or break any existing event handler.

The code below will not do that because if the existing handler registered for an event on the element referred to 'this', my chaining of handlers would break that. I'd actually like to be able to use 'this' in the new handler too if possible, but I could always get around that I guess.

<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>

Thanks.

Answer 1

What you want to do is either inject the value of this

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

Or use real event listeners that don't overwrite each other

element.addEventListener(event, new);

Answer 2

To point 'this' back to the right object I do this at the top of my eventhandlers:

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

'that' is now pointing to the object that triggered the event

Answer 3

Make your life easier. Attach and detach events by using a JavaScript framework. eg in jQuery $("#someID").bind("click", clickHandler); . Or if you don't want to use jQuery there are plenty of other JavaScript frameworks out there: MooTools, Dojo etc.

Check out http://api.jquery.com/category/events . Of course you can do this with old school JavaScript but then you need to manage all the cross-browserness of attaching/detaching events.