javascript - addEventListener vs onclick -
what's difference between addeventlistener , onclick?
var h = document.getelementbyid("a"); h.onclick = dothing1; h.addeventlistener("click", dothing2); the code above resides in separate .js file, , both work perfectly.
both correct, none of them "best" per se, , there may reason developer chose use both approaches.
event listeners (addeventlistener , ie's attachevent)
earlier versions of internet explorer implement javascript differently pretty every other browser. versions less 9, use attachevent[doc] method, this:
element.attachevent('onclick', function() { /* stuff here*/ }); in other browsers (including ie 9 , above), use addeventlistener[doc], this:
element.addeventlistener('click', function() { /* stuff here*/ }, false); using approach (dom level 2 events), can attach theoretically unlimited number of events single element. practical limitation client-side memory , other performance concerns, different each browser.
the examples above represent using anonymous function[doc]. can add event listener using function reference[doc] or closure[doc]:
var myfunctionreference = function() { /* stuff here*/ } element.attachevent('onclick', myfunctionreference); element.addeventlistener('click', myfunctionreference , false); another important feature of addeventlistener final parameter, controls how listener reacts bubbling events[doc]. i've been passing false in examples, standard 95% of use cases. there no equivalent argument attachevent, or when using inline events.
inline events (html onclick="" property , element.onclick)
in browsers support javascript, can put event listener inline, meaning right in html code. you've seen this:
<a id="testing" href="#" onclick="alert('did stuff inline');">click me</a> most experienced developers shun method, job done; simple , direct. may not use closures or anonymous functions here (though handler anonymous function of sorts), , control of scope limited.
the other method mention:
element.onclick = function () { /*do stuff here */ }; ... equivalent of inline javascript except have more control of scope (since you're writing script rather html) , can use anonymous functions, function references, and/or closures.
the significant drawback inline events unlike event listeners described above, may have 1 inline event assigned. inline events stored attribute/property of element[doc], meaning can overwritten.
using example <a> html above:
var element = document.getelementbyid('testing'); element.onclick = function () { alert('did stuff #1'); }; element.onclick = function () { alert('did stuff #2'); }; ... when clicked element, you'd only see "did stuff #2" - overwrote first assigned of onclick property second value, , overwrote original inline html onclick property too. check out here: http://jsfiddle.net/jpgah/.
which best?
the question matter of browser compatibility , necessity. need attach more 1 event element? in future? odds are, will. attachevent , addeventlistener necessary. if not, inline event trick.
jquery , other javascript frameworks encapsulate different browser implementations of dom level 2 events in generic models can write cross-browser compliant code without having worry ie's history rebel. same code jquery, cross-browser , ready rock:
$(element).on('click', function () { /* stuff */ }); don't run out , framework 1 thing, though. can roll own little utility take care of older browsers:
function addevent(element, evnt, funct){ if (element.attachevent) return element.attachevent('on'+evnt, funct); else return element.addeventlistener(evnt, funct, false); } // example addevent( document.getelementbyid('myelement'), 'click', function () { alert('hi!'); } ); try it: http://jsfiddle.net/bmarj/
taking of consideration, unless script you're looking @ took browser differences account other way (in code not shown in question), part using addeventlistener not work in ie versions less 9.
documentation , related reading
Comments
Post a Comment