javascript - AddEventListener with in a object -
i need help, @ moment trying call method within object through addeventlistener activation. problem pointer changing method called. tried use .call give method right context , worked expected best way ?
<!doctype html> <html> <head> <title>java script test</title> <meta charset="utf-8" /> <!-- <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> --> <script src="../resurces/js/jquery-1.11.2.min.js" ></script> <script> var test_class = function(){ this.variable = "more text"; this.click = function(){ $("#return").text("content: "+this.variable); } this.aktivate_listener = function(){ var = this; document.getelementbyid("clicker").addeventlistener("click", function(){that.click.call(that)}); } } $("document").ready(function(){ console.log("#ready"); var class1 = new test_class(); class1.aktivate_listener(); }); </script> </head> <body> <p id="clicker">this text click on.</p> <p id="return"></p> </body> </html> do of know better way ?
thanks effort , flo
that's fine, couple of points:
you don't need
that.click.call(that)—that.click()work.you're not passing on event object anonymous function receives. if don't need it, that's fine, thought i'd mention it.
another alternative use function#bind:
this.aktivate_listener = function(){ document.getelementbyid("clicker").addeventlistener("click", this.click.bind(this)); } function#bind returns function that, when called, turns around , calls original function this set specific value. this.click.bind(this) creates function that, when called, call click on object this referring object. arguments bound function passed on when calls underlying function.
re comment:
but read can't remove eventlistener created .bind
a problem in example above cannot remove listener bind. that taken mozilla developer network.
if so, mdn wrong. it's community-edited, happens. :-)
in terms of being able remove handler removeeventlistener, there's no difference at all between code , using function#bind above: can't remove listener in either case without changing code remember passed addeventlistener.
there's nothing special event handlers use bind. other event handler, if want remove removeeventlistener, have have reference same function added when removing it. in code, anonymous function have wrapped around that.click.call(that);, , since didn't keep reference it, can't remove it. similarly, in code above, can't remove listener because didn't keep reference bound function.
if that's need do, remember function want remove — that's reference anonymous function, or reference function returned function#bind. might store on object, instance.
this.aktivate_listener = function(){ if (this.boundclick) { this.deaktivate_listener(); } this.boundclick = this.click.bind(this); document.getelementbyid("clicker").addeventlistener("click", this.boundclick); }; this.deacktivate_listener = function(){ document.getelementbyid("clicker").removeeventlistener("click", this.boundclick); this.boundclick = null; }; looking again @ code, have third option: click function closure on call test_class created instance, don't need create closure, use 1 have:
var test_class = function(){ // remember `this` in variable var self = this; this.variable = "more text"; this.click = function(){ // use here $("#return").text("content: "+self.variable); }; this.aktivate_listener = function(){ // use `this.click` here document.getelementbyid("clicker").addeventlistener("click", this.click); }; this.deaktivate_listener = function(){ // use `this.click` here document.getelementbyid("clicker").removeeventlistener("click", this.click); }; }; side note: need ; @ end of statements var f = function() { };, because statements, not declarations. i've added them above. if don't provide it, automatic semicolon insertion add of time, can trip if you're not careful.
examples of of above:
your way without .call (without deaktivate):
var test = function(id, name) { this.id = id; this.name = name; this.click = function() { snippet.log("my name " + this.name); }; this.aktivate_listener = function() { var = this; document.getelementbyid(this.id).addeventlistener( "click", function() { that.click(); }, false ); }; }; var t1 = new test("one", "test one"); t1.aktivate_listener(); var t2 = new test("two", "test two"); t2.aktivate_listener();<div id="one">click me (one)</div> <div id="two">click me (two)</div> <!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>with function#bind (without deaktivate):
var test = function(id, name) { this.id = id; this.name = name; this.click = function() { snippet.log("my name " + this.name); }; this.aktivate_listener = function() { document.getelementbyid(this.id).addeventlistener( "click", this.click.bind(this), false ); }; }; var t1 = new test("one", "test one"); t1.aktivate_listener(); var t2 = new test("two", "test two"); t2.aktivate_listener();<div id="one">click me (one)</div> <div id="two">click me (two)</div> <!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>using existing closure (without deaktivate):
var test = function(id, name) { var self = this; this.id = id; this.name = name; this.click = function() { snippet.log("my name " + self.name); }; this.aktivate_listener = function() { document.getelementbyid(this.id).addeventlistener( "click", this.click, false ); }; }; var t1 = new test("one", "test one"); t1.aktivate_listener(); var t2 = new test("two", "test two"); t2.aktivate_listener();<div id="one">click me (one)</div> <div id="two">click me (two)</div> <!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>your way without .call (with deaktivate):
var test = function(id, name) { this.id = id; this.name = name; this.counter = 0; this.click = function() { snippet.log("my name " + this.name); if (++this.counter == 2) { this.deaktivate_listener(); }; }; this.aktivate_listener = function() { var = this; if (this.boundclick) { this.deaktivate_listener(); } this.boundclick = function() { that.click(); }; document.getelementbyid(this.id).addeventlistener( "click", this.boundclick, false ); }; this.deaktivate_listener = function() { if (this.boundclick) { document.getelementbyid(this.id).removeeventlistener( "click", this.boundclick, false ); this.boundclick = null; } }; }; var t1 = new test("one", "test one"); t1.aktivate_listener(); var t2 = new test("two", "test two"); t2.aktivate_listener();<div id="one">click me (one) (second click deactivates)</div> <div id="two">click me (two) (second click deactivates)</div> <!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>with function#bind (with deaktivate):
var test = function(id, name) { this.id = id; this.name = name; this.counter = 0; this.click = function() { snippet.log("my name " + this.name); if (++this.counter == 2) { this.deaktivate_listener(); }; }; this.aktivate_listener = function() { if (this.boundclick) { this.deaktivate_listener(); } this.boundclick = this.click.bind(this); document.getelementbyid(this.id).addeventlistener( "click", this.boundclick, false ); }; this.deaktivate_listener = function() { if (this.boundclick) { document.getelementbyid(this.id).removeeventlistener( "click", this.boundclick, false ); this.boundclick = null; } }; }; var t1 = new test("one", "test one"); t1.aktivate_listener(); var t2 = new test("two", "test two"); t2.aktivate_listener();<div id="one">click me (one) (second click deactivates)</div> <div id="two">click me (two) (second click deactivates)</div> <!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>using existing closure (with deaktivate):
var test = function(id, name) { var self = this; this.id = id; this.name = name; this.counter = 0; this.click = function() { snippet.log("my name " + self.name); if (++self.counter == 2) { self.deaktivate_listener(); }; }; this.aktivate_listener = function() { document.getelementbyid(this.id).addeventlistener( "click", this.click, false ); }; this.deaktivate_listener = function() { document.getelementbyid(this.id).removeeventlistener( "click", this.click, false ); }; }; var t1 = new test("one", "test one"); t1.aktivate_listener(); var t2 = new test("two", "test two"); t2.aktivate_listener();<div id="one">click me (one) (second click deactivates)</div> <div id="two">click me (two) (second click deactivates)</div> <!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
Comments
Post a Comment