Javascript event handling history
While I understand Javascript event handling in bits and pieces, I wanted to understand the whole story behind it, such as how event management was implemented (maybe it is used in type markup <a onClick="callFunc()">
)
And how it was later updated to something else how to call it JS (unobtrusive JS)
how is this implemented with jQuery?
I just wanted to understand the benefits in each step and things like bubbles / event capture, etc.
source to share
Well, there isn't much. Or, indeed, everything that came before this happened a LONG time ago.
.addEventListener
exists as long as CSS has. How long has DOM-Level2 been with us (~ 13 years I guess).
It was not a question of how JS got more advanced, it was about how JS writers did not .
Programmers I know who write JS as a "secondary" or "tertiary" STILL role use built-in handlers. It has been over ten years since it was a particularly good idea.
As far as "unobtrusive" is concerned, it doesn't have to be directly related to event-listeners.
This means that if you intend to interact with the user in some way, but this is more a matter of separation of concerns, just as we no longer style elements like <p><font color=red>red text</font></p>
.
Perhaps part of the reason that DOM-0 event handlers (for example button.onclick = function () {}
) have hung around for so long and still see very frequent use is because of the war between Microsoft attachEvent
and the W3C addEventListener
.
If you want to support cross-browser events in IE6-8, you either use jQuery (or some other library), you write the event management functions manually to support both .attachEvent
IE and .addEventListener
everyone else, or you directly use the event ( .onclick = function () {}
) properties ... They take advantage of support for virtually every browser in use today.
They only have the detriment of one assignable function (which leads to ugly handling if you need to add more of them):
(function () {
var button = document.getElementById("button"),
old_func = button.onclick;
button.onclick = function (e) {
e = e || window.event;
doStuff();
if (old_func) { old_func(); }
}
}());
... now imagine 8 different programmers adding listeners to the same button this way.
As for bubbling versus capturing ...
It was never a battle (post-Netscape).
Supported by Microsoft bubble, W3C supports both. No one actually uses a capture for anything, because there are very few times you want to know about an event before it actually happens, and before the target even knows it is happening (and since the only the way to use capture was to use addEventListener which means your event won't work in IE ...)
There were no "new" events or "best" events in the jQuery presented in the table - what was done was allowed for all cross-browser events. Many AJAX libraries had this as their main goal: to normalize the differences between addEventListener
and attachEvent
(which was a solved problem before jQuery) and between XMLHttpRequest
and ActiveXObject("MSXML2.XMLHTTP.6.0")
(again, decided beforehand by jQuery).
jQuery just became a crowd favorite, and Resig did some pretty good things with it (while jQuery users did some terrible things with it, forcing Resig and friends to be super-human to idiotic DOM traversal and delegate event and so on).
Some of us have gotten better at participating in activities and the like. over the past 6 years, since people like Douglas Crockford and Nicholas Zakas have been on the board of the social sphere, writing good books and great talks about professional, high-performance JavaScript.
And over the past few years, more people have come into design patterns that are visible in other languages ββthat see enterprise use.
Things like promises / deferreds / futures ( $.Deferred
/ $.when
) are the future of JS engineering when it comes to asynchronous client side programming for web applications.
This does not mean that it will look 100% like it does today, but it does mean that direct transmission of DOM events is a solvable problem - keeping them consistent with all the asynchronous stuff that can happen at any time, in any widget on page ...
... that's where Promises come in handy.
Then you have moderators / observers to ensure security and decouple inter-module communication.
These can be "custom events" or they can be "issuers" ...... or "publisher / subscribers".
Things you can listen to and act on.
They can be triggered by valid browser events, or they can be called in code.
Again, jQuery hasn't invented or refined this, but any event you sign in jQuery does one of those things under the hood.
Same thing with $.ajax
- it doesn't actually use DOM events, it passes Promises around that you can subscribe to. The only DOM events it uses are the ones that actually fetch data from the server. After that, all this is custom.
In the last few years, we've made huge leaps in what JS can do and how we handle interaction and asynchrony.
Not only did it have anything to do with the successes in getting addEventListener
better, or how jQuery helped us bridge the gap between IE8 and the rest of the browsers.
source to share
As per my understanding 1. Javascript interaction with html is handled by events. Indicates when a particular moment appears in a browser window or document. These events can be handled by listeners. 2.event bubbling says -event starts at the position where the event was fired and flows upward to the document level. ie- div-body-html-document. Example: 1. Here the event listener function will have a default local object called event. which indicates the type of event. 2. here it is talking about the target of the event.
The event.preventDefault () method stops the default item from acting.
The classified event groups are User Interaction Events / Focus Events / Mouse Events / Wheel Events / Text Events / Keypad Events. These events will be different for mobile devices.
source to share