AddEventListener with apply ()

Question

AddEventListener with apply ()

I am trying to call addEventListener () using the apply () method. The code looks like this:

function rewrite (old) {
    return function () {
        console.log ('add something to' + old.name);
        old.apply (this, arguments);
    }
} 
addEventListener = rewrite (addEventListener);

This does not work. The code works for a regular JavaScript method, for example,

function hello_1 () {
    console.log ("hello world 1!");
}
hello_1 = rewrite (hello_1);

Help is needed!

Thank!

+2

javascript apply

Paul May 23 '10 at 8:31

source share

1 answer

T.J. Crowder · Accepted Answer · 2010-05-23T08:48:23+0000

addEventListener, Javascript, . ( , , window.alert). Right Thing ^(tm) Javascript, ( , Microsoft). Javascript, apply call .

, , apply, - . , , :

// Returns a function that will hook up an event handler to the given
// element.
function proxyAEL(element) {
    return function(eventName, handler, phase) {
        // This works because this anonymous function is a closure,
        // "closing over" the `element` argument
        element.addEventListener(eventName, handler, phase);
    }
}

, , , addEventListener. ( , IE IE8 addEventListener, attachEvent.)

, ( , ).

:

// Get a proxy for the addEventListener function on btnGo
var proxy = proxyAEL(document.getElementById('btnGo'));

// Use it to hook the click event
proxy('click', go, false);

, proxy, ; , . , post , .

:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#log p {
    margin:     0;
    padding:    0;
}
</style>
<script type='text/javascript'>

    window.onload = pageInit;
    function pageInit() {
        var proxy;

        // Get a proxy for the addEventListener function on btnGo
        proxy = proxyAEL(document.getElementById('btnGo'));

        // Use it to hook the click event
        proxy('click', go, false);
    }

    // Returns a function that will hook up an event handler to the given
    // element.
    function proxyAEL(element) {
        return function(eventName, handler, phase) {
            // This works because this anonymous function is a closure,
            // "closing over" the `element` argument
            element.addEventListener(eventName, handler, phase);
        }
    }

    function go() {
        log('btnGo was clicked!');
    }

    function log(msg) {
        var p = document.createElement('p');
        p.innerHTML = msg;
        document.getElementById('log').appendChild(p);
    }

</script>
</head>
<body><div>
<input type='button' id='btnGo' value='Go'>
<hr>
<div id='log'></div>
</div></body>
</html>

func.apply() vs. func(), , , , , , . : apply , :

, this .
( ).

, , , this Javascript this , ++, Java #. this Javascript , , , . this , . ( this Javascript .) :

; this . , foo.bar() this foo bar.
apply call; this . , bar.apply(foo) bar.call(foo) this foo bar.

apply call , : apply ( ):

bar.apply(foo, [1, 2, 3]);

call :

bar.apply(foo, 1, 2, 3);

, bar, this foo 1, 2 3.

AddEventListener with apply ()

More articles: