Please note that the demo application in this article can be found in a demo application on GitHub https:\/\/github.com\/doanduyhai\/HTML5Tutorial<\/a>\n<\/p><\/blockquote>\n <\/p>\n In the old days of web design, people used to put inline event handlers into their HTML tags:<\/p>\n In this model, the event binding is done in the HTML tag itself. The tag is playing two roles: data display<\/strong> and event listener<\/strong>.<\/p>\n No need to say that this is an anti-pattern leading to a bloated HTML code.<\/p>\n <\/p>\n After the DOM Level 2 Event Model specs were released, it is a best practice to move event listener out of HTML tags. This is the two actors model. <\/p>\n <\/p>\n HTML 5 has introduced a very convenient new feature: custom data-*<\/strong> attributes. It is now possible to embed custom data in HTML tags. A new event binding model is now possible: three actors model<\/strong>.<\/p>\n The first two actors is similar to the previous model. The new thing is that now it is possible for the event listeners and event handlers to retrieve the contextual custom data embedded in the event target.<\/p>\n Let’s suppose we have table listing some books:<\/p>\n <\/p>\n In the above example, the <a><\/strong> tag exposes the custom data attribute “data-authors<\/strong>” which contains a list of authors for a book.<\/p>\n We use this custom data attribute as a selector to identify all <a><\/strong> tags in the DOM tree (line 2<\/strong>) and bind a handler to the click event. The authors information is retrieved from the <a><\/strong> tag and then passed to the event handler as argument (line 4<\/strong>).<\/p>\n This is a very convenient way to pass extra argument to event handlers. Before HTML 5 we had to rely on some hacks to do that, for example storing information in a hidden input element<\/strong>:<\/p>\n It is possible to have many custom attributes per DOM element<\/strong>, each of them bound to a distinct event handler.<\/p>\n <\/p>\n Please note that the demo application in this article can be found in a demo application on GitHub https:\/\/github.com\/doanduyhai\/HTML5Tutorial<\/a>\n<\/p><\/blockquote>\n I’ve created a demo application displaying a simple page with a list of books.<\/p>\n For each book, the title, authors and availability information are displayed. Authors name are abbrievated but it is possible to have the full list displayed by putting the mouse over the link (tooltip component by Twitter Bootstrap<\/a>). The event binding is done using the data-authors<\/strong> attribute as selector.<\/p>\n It is possible to click on the magnifying glass icon to trigger an Ajax call to the server and retrieve all complete book details. <\/p>\n Internally the link tag contains a data-isbn<\/strong> custom attribute, containing the ISBN of the book. This attribute is used as selector to bind with an event listener and passed to event handler as parameter to trigger Ajax call.<\/p>\n On response from the server, we display a modal panel with all the book details:<\/p>\nI One actor model<\/h1>\n
![\"event-listener-one-actor-model\"](\"https:\/\/www.doanduyhai.com\/blog\/wp-content\/uploads\/2012\/05\/event-listener-one-actor-model.png\" "\\"event-listener-one-actor-model\\"")
<\/a><\/p>\n\n...\n<a href="#" onclick="doSomething();" title="click here to trigger action">Click Me<\/a>\n...\n<\/pre>\n
II Two actors model<\/h1>\n
![\"event-listener-two-actors-model\"](\"https:\/\/www.doanduyhai.com\/blog\/wp-content\/uploads\/2012\/05\/event-listener-two-actors-model.png\" "\\"event-listener-two-actors-model\\"")
<\/a>
\n In this model, the event binding is achieved by two actors:<\/p>\n\n
\n...\n<a id="myLink" href="#" title="click here to trigger action">Click Me<\/a>\n...\n<span class="descriptionText">This is a description text<\/span>\n...\n<script type="text\/JavaScript">\n\n\tjQuery('#myLink').click(doSomething);\n\tjQuery('.descriptionText').click(doSomethingElse);\n\n\tfunction doSomething() {...}\n\tfunction doSomethingElse() {...}\n<\/script>\n<\/pre>\nIII Three actors model<\/h1>\n
![\"event-listener-three-actors-model\"](\"https:\/\/www.doanduyhai.com\/blog\/wp-content\/uploads\/2012\/05\/event-listener-three-actors-model.png\" "\\"event-listener-three-actors-model\\"")
<\/a><\/p>\n\n
\n...\n\t<tr>\n\t\t...\n\t\t<td>Authors<\/td>\n\t\t<td>\n\t\t\t<a href="#" data-authors="Craig WALLS,Ryan BREIDENBACH">Craig WALLS,Ryan ...<\/a>\n\t\t<\/td>\n\t\t...\n\t<\/tr>\n\t...\t\n\t<tr>\n\t\t...\n\t\t<td>Authors<\/td>\n\t\t<td>\n\t\t\t<a href="#" data-authors="Isaac ASIMOV">Isaac ASIMOV<\/a>\n\t\t<\/td>\n\t\t...\n\t<\/tr>\n...\n<\/pre>\n
\n\t...\n\tjQuery('[data-authors]').click(function(event)\n\t{\n\t\tvar authors = $(event.currentTaget).attr('data-authors');\n\t\tdisplayAuthorsDetails(authors);\n\t});\n\t...\n\t...\n\tfunction displayAuthorsDetails(authors) {...}\n\t...\n<\/pre>\n\n...\n\t<tr>\n\t\t...\n\t\t<td>Authors<\/td>\n\t\t<td>\n\t\t\t<input type="hidden" value="Craig WALLS,Ryan BREIDENBACH"\/>\n\t\t\t<a href="#">Craig WALLS,Ryan ...<\/a>\n\t\t<\/td>\n\t\t...\n\t<\/tr>\n\t...\t\n\t<tr>\n\t\t...\n\t\t<td>Authors<\/td>\n\t\t<td>\n\t\t\t<input type="hidden" value="Isaac ASIMOV"\/>\n\t\t\t<a href="#">Isaac ASIMOV<\/a>\n\t\t<\/td>\n\t\t...\n\t<\/tr>\n...\n<\/pre>\n
\n...\n\t<div class="tweet" data-tweetId="123456" data-tweetAuthor="duyhai">\n\t\t...\n\t\t...\n\t<\/div>\n...\n<\/pre>\n
IV Demo<\/h1>\n
![\"event-listener-data-authors\"](\"https:\/\/www.doanduyhai.com\/blog\/wp-content\/uploads\/2012\/05\/event-listener-data-authors.png\" "\\"event-listener-data-authors\\"")
<\/a><\/p>\n![\"event-listener-books\"](\"https:\/\/www.doanduyhai.com\/blog\/wp-content\/uploads\/2012\/05\/event-listener-books.png\" "\\"event-listener-books\\"")
<\/a><\/p>\n
![\"event-listener-book-details\"](\"https:\/\/www.doanduyhai.com\/blog\/wp-content\/uploads\/2012\/05\/event-listener-book-details.png\" "\\"event-listener-book-details\\"")
<\/a><\/p>\n