This question already has answers here:
addEventListener vs onclick
(21 answers)
Closed 3 years ago.
I'm little confusing by using "onclick" "onmousedown" as a property of HTML elements.
Such as:
<button onclick="my_JS_function()"></button>
or
<div onmousedown="my_another_JS_funciton"></div>
But some people tell that only "proper" way of adding "listeners" are by
document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);
What is the more "proper" more supported way of doing that?
if you already know function and element is part of html i.e. not get added dynamically than its good that you add function inline rather than using extra method call like "addEventListener"
Another thing to note
While onclick works in all browsers, addEventListener does not work in older versions of Internet Explorer, which uses attachEvent instead.
OnClick is a DOM Level 0 property. AddEventListener is part of the DOM Level 2 definition. Read about this : http://www.w3.org/TR/DOM-Level-2-Events/events.html
inline event handlers added as HTML tag attributes, for example:
Click me!
The above techniques are simple but have certain disadvantages: they allow you to have just one event handler per element. In addition, with inline event handlers you get very poor separation of JavaScript code from HTML markup.
document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);
Advatange of this : you can add multiple event handler. also separte html and javascript code
For more detail you can read this : Adding an Event Handler
The latter (addEventListener()) is the best way, as you can attach multiple events of the same type to the same element.
By assigning to onclick, etc, you will overwrite existing handlers.
Related
This question already has answers here:
Do you ever need to specify 'javascript:' in an onclick?
(8 answers)
Closed 8 years ago.
Can someone please explain the difference between:
onclick="javascript:fnName(this);"
...and...
onclick="fnName(this);"
Is there any performance hit? or when to use what?
Not actually, and usually you don't write the first one. Because onclick handler is handled by the JavaScript, so calling JavaScript to handle it won't be a good bet.
In the context of event attributes it's completely useless. It's mainly used inside of the href attribute and allows you to create a pseudo-onclick event:
click me
Also you can just put it in the location input in your browser and run scripts. It's simillar to the console input.
Edit: I realized it's not really useless but it has completely different usage than you would thought. In the context of these event attributes it behaves like in a normal code and so it's a label. Try this:
<div onclick="javascript:while(true){while(true){alert('hello');break javascript;}}">click me</div>
I can undestand work javascript to performance.
What is the difference?
$('#button').click(function() { }
vs
I understand is called the same function, but if i have first option and javascript scan all attributes on mouseover and checking all time is it this #button?
I understand is doesn't matter for #id, but if have more .class is maybe be problem.?
the first is a jquery aproach to addEventListener ( a more shorter way ) the second is the change of an inline attribute for the element which applies an event. Basically it is the same, now it deppends how the browser implements it, but from what i have tried using addEventListener is more reliable than inline attribute if you need at some point to remove the listener, if it will stay that way to the end of times or you do not need some high js behind you just use the inline version for faster uses and for better readability.
Suppose we have a html tag and some javascript function is attached on that by addEvenetListner or attachEvent (with tag id or name but not inline), and if we need find out that which function is attach on that tag, then what is good way for find that.
Please suggest me.
If don't need to do it programmatically you can use visual event. If you need to do it programmatically i only have a jquery solution ($('#element').data('events');)
There is no native API to get event handler that was attached by addEventListener/attachEvent. jQuery store internal this handlers in some object. If you use jQuery you can done this by:
$('#someID').data('events');
Or you can write wrapper for addEventListener/attachEvent and store handlers manualy.
Supposing I've got multiple div's with the same class, I could do something like :
$('.className').click(f) in Jquery or other frameworks
However, I was trying to use Sly as my selector engine and wanted to do something like :
Sly.search('.className').click(f)
I'm not sure as to how the binding in Jquery works :
If I use the above JQuery, does an eventhandler get attached to all of the found divs individually? Or does it do something else to optimize and "tell" the browser specifically to link this function f to the onclick for the className (instead of manually telling the browser to attach the same function to each of the found divs)
Is there a way to achieve the above in Sly (or other Selector Engines) without using iteration over the elements returned ?
It will add a handler to each object currently in the set.
With the default Sizzle engine, you can call .live to add a single handler to <body> which catches all bubbled events and forwards them to any register events for matching selectors (what you're asking for).
You should not worry about performance issues; the point of .live is to affect elements that are created later.
I'm using dojo. I've got something like this:
<a id="fooBar" onclick="foo();bar();">Foo then Bar</a>
I want to trigger fooBar's click handler from another button. Something like:
<a onclick="dojo.query('#fooBar')[0].click()">Do FooBar</a>
Can I do that?
dojo.byId('fooBar').onclick();
or
dojo.query('#fooBar')[0].onclick();
See examples.
I haven't used Dojo before, but can safely say that you can do better than inline events :). Moreover, these will not be managed by Dojo as they were added inline. The onclick method here is a native DOM method for triggering the function attached to the onclick property of the element.
dojo.byId is a shortcut to document.getElementById, and honestly you can easily do without Dojo here:
document.getElementById("fooBar").onclick();
Here's the three methods with a comparison of character savings (9 and 14):
document.getElementById('fooBar').onclick();
dojo.query('#fooBar')[0].onclick();123456789
dojo.byId('fooBar').onclick();12345678901234
See a couple of good reasons for not using inline click handlers.