addEventListener – Introduction to Native JavaScript Event Handlers

JavaScript

JavaScript addEventListenerAll JavaScript libraries and frameworks provide abstraction for event handlers. But it is important to know how how the addEventListener method works and how to use it

In this article, you will learn about the JavaScript addEventListener method. This isn’t an in-depth discussion but a way for you to get started using this method. Continue reading “addEventListener – Introduction to Native JavaScript Event Handlers”

jQuery.off()

jQuery

jquery offWith the the jQuery off method, you can unbind handlers for one or more events, for each matched element.

Most of the time, front-end web developers are concerned with binding event handlers — that is, defining a JavaScript function that will be executed when an event occurs. An event can be a mouse click, a hover, a scroll, or just about any other action that a user takes on the page. And it goes without saying that jQuery makes event binding easy. But what about when you want to remove an event binding? There may be cases in which, for whatever reason, you no longer want your event handler function to be executed. This does happen.

Well, a typical scenario might be when a user is not authenticated, in which case you may want to prevent the user from taking certain actions. Or, perhaps you have a business requirement that involves displaying an advertisement after the user has advanced a slide-show a certain number of times. Well, part of that requirement might be that the ad has to show for at least 10 seconds, and during those ten seconds, you do not want the user to be able to click the “back” or “next” buttons in the slide show.

The jQuery.off() method allows you to remove an event handler that was bound using the jQuery.on() method. The syntax requires that you pass a string as the first argument, and that string that you pass to the jQuery.off() method specifies the event that you want to unbind. For example, you may have bound event handlers for both the “click” and “dblclick” events and you may only want to unbind the “click” event handler but leave the “dblclick” event handler intact. But just remember: you can only unbind event handlers that are managed with jQuery.

Try It Yourself!

In the above example, there are three paragraph elements. Click each one. When you do, you’ll see the text change to: “I was clicked”. Next, click the “Refresh” button so that the page reloads. Now click any of the paragraphs. You’ll notice that the text no longer changes as you click each one.

Click the JavaScript tab. You’ll see that there is a click-event handler for each paragraph. This changes the text to “I was clicked” when a paragraph is clicked. There is also a click-event handler for the first button. When that button is clicked, the jQuery off method is called against every paragraph in the page. This unbinds every click event handler. Thus, when you click any paragraph, the text no longer changes.

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/FEV-jq-off

Summary

While jQuery makes event binding simple, that is also the case when you need to unbind one. The jQuery.off() method is used to remove an event handler from one or more HTML elements. So, when you pass a string as the first argument, you simply let jQuery know which event you wish to unbind. The one restriction of the jQuery.off() method is that it can only be used with event handlers that are managed with jQuery.

Getting Started with Backbone.js Views – Part III : Event Handlers Basics

Backbone

Backbone.js LogoLearn how to set up event handlers in your Backbone.js view

In the previous two articles of this series: “Getting Started with Backbone.js Views” (Parts I & II), we learned how to set up a view and optimize it for better performance. The next logical step is event handlers.

While it may be possible that your view will not be interactive, it’s difficult to imagine a mature application that does not involve event handlers. Backbone’s approach to event handlers is a bit of a departure from your standard document.addEventListener and jQuery.click methods. Here, you will add an “events” property to the object that is passed into the Backbone.View.extend method. That “events” property is an object whose key-value pairs are sets strings comprised of an event/selector and event handler.

Example # 1A

In Example # 1A we have instantiated the MessageView constructor. Implementation details of our Backbone.js router are not at all the focus of this article, but I wanted to point out that when setting up event handlers in a Backbone view, it is important to pass an object to the view constructor. In that object, we have specified an “el” property, whose value is a jQuery DOM object. The reason for this is that it allows Backbone to properly attach our event handlers and then tear down the views DOM elements change.

Example # 1B

In Example # 1B we have added an “events” property to the object that is passed into the Backbone.View.extend method. This property is an object. In this example, that object has one property. The property name is a string that consists of two parts: the name of the event, followed by a CSS selector that identifies the DOM element to be targeted. In this case, the “click” event is specified, and the following CSS selector targets the element: “.messageView.mainMessage p”. Again, that is the key or property name. The value of that property is: “clickHandler“, the name of the function that will handle the event. This example is not very exciting. When the target element is clicked an alert shows the message: ‘I was clicked!’. We can do better.

Example # 1C

In Example # 1C, we inject the message: “I was clicked” into the DOM, a step up from the alert, but still not too sophisticated. We’ll clean this up in Example # 3.

Example # 2

In Example # 2, we have added two more properties to the “events” object: mouseover and mouseout event handlers. The purpose of this example is to illustrate that you can specify as many event handlers as you need in your “events” object.

Obtaining a Reference to the Target Element

Example # 3

In Example # 3, we have set up some functionality that is a bit of an improvement over the alert in Example # 1. Each time you click the message, timestamp is injected into the page.

You’ll notice that we are using a function named: “renderTimestamp”. This function is defined in the HTML file. Its implementation details are not particularly important. Suffice to say that when passed a jQuery DOM element object, it injects a time-stamped child element. The purpose of this is simply to demonstrate that we have real-time access to whichever DOM element is the target of an event.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 3: http://examples.kevinchisholm.com/backbone/views/basics/html/part-iii.html

How to Demo:

When the page loads, you will see the default route. If you click “message/hello” or “message/goodbye”, you’ll see our custom routes in action. In either case, the message text has a click handler attached to it.

When you click the message text, you will see a time-stamp injected into the page. No matter how many times you click the message a new time-stamp will be added. When you mouse-over any time-stamp, the background color of that time-stamp will change.

Summary

In this article we learned the basics of how to set up event handlers in a Backbone.js view. We discussed how to specify the “el” property for a view, and then create an “Events” object. We also covered how to configure multiple events, as well as how to reference the target element and manipulate it.

Helpful Links for Backbone.js View Events

http://www.codebeerstartups.com/2012/12/12-listening-to-dom-events-in-backbone-js-learning-backbone-js

http://kevinhamiltonsmith.com/backbone-js-view-dom-events-complete-list/

http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals-views-events-jquery-and-el/