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.

How do I set up an Angular click-event handler?

Angular

Angular logo - click

Setting up a click event handler in Angular requires the click attribute and an expression or method assignment.

It’s hard to imagine any modern web page that does not have at least one click-event handler. And while anchor tags provide a scripting-free way of taking the user to a new web address, JavaScript event handlers are a common trait among web pages today. But setting up up a click-event handler that would require you to make some kind of connection between the HTML and a JavaScript method that lives somewhere in your code. In vanilla JavaScript, this means a tight-coupling between your HTML and JS code. Just keep in mind, though, that even with a library such as jQuery, managing click-event handlers can become tedious.

Angular makes event handlers simple: you add a click attribute to the element. The value you assign to this attribute depends on the approach you want to take. You can provide an expression that Angular will evaluate. For example: count = count + 1. This means that when the element is clicked you want Angular to increase the value of the count property by one. You can also assign a method. This means that you want Angular to execute a method when the element is clicked. You can also pass parameters to this method.

Let’s look at a couple of examples, to see how this works:

Example # 1

In Example # 1, we have our component. Note the content property, which is a string and the count property, which is a number. We will display these properties in the UI. There is also a setMessage1 method. This method assigns a value to the content property. We refer to the content property as this.content inside of that method because the this keyword provides access to the object to which this method belongs.

Example # 2

In Example # 2, we have our template. There are three buttons. Each has a click event handler set up via the click attribute. The first button has a method assigned to the click attribute. We reviewed the setMessage1 method in the first example. This method sets the content property to  “This is message # 1”. This allows us to see in the UI that the first button was clicked. This approach is mostly likely one you’ll take when setting up a click event handler with Angular. The advantage here is that inside of the setMessage1 method, you can execute more than one task (i.e. you could do more than simply set the value of the the content property).

The second button takes a different approach: it sets the value of the content property directly. This is because an expression is provided as a value to the click attribute: “This is message # 2”. This approach is perfectly fine, but somewhat limited; you can only accomplish one thing.

The third button takes the same approach, but instead of setting the content property, it increases the count property. Also, the button’s text is updated by the {{count}} binding.

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/kcv-angular-click-attribute

Summary

The key to setting a click event handler in an Angular template is the (click) attribute, and you now know that you can take one of two approaches: 1) you can assign a valid JavaScript expression to the (click) attribute, for example: “count = count + 1” or, 2) you can assign a method to the (click) attribute, as long as that method is a property of the component to which the template belongs.
Just keep in mind that the first approach is limited in that you can only accomplish one task when the element is clicked. The second approach, on the other hand, is more powerful; in the method that you assign to the (click) attribute, you can execute arbitrary code, which means that a limitless number of tasks can be accomplished. So the thing for you to do, at the outset, is to decide which approach is best for what you’re planning to do.

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/

The JavaScript “this” Keyword Deep Dive: jQuery Click Handlers

JavaScript

JavaScript LogoLearn the difference between $(this) and “this” inside of your jQuery event handler.

In two previous posts, we learned that functions that are properties of an object are called “methods” (The JavaScript “this” Keyword Deep Dive: Nested Methods & The JavaScript “this” Keyword Deep Dive: An Overview). In this case, the JavaScript “this” keyword refers to the object that the method belongs to. Well, of course, this is usually pretty obvious from looking at the code.

But in an event handler, it may not be apparent to all that the JavaScript “this” keyword, is available to you inside of the event handler, and that it refers to the element that generated the event. Since many front-end developers are comfortable with jQuery, I thought I’d start with jQuery event handlers. And since click events are so common, let’s stick with that.

Example # 1

In Example # 1, we have created a click event handler using jQuery. When the user clicks the anchor tag inside of the element with the class: “download”, the jQuery “toggleClas” method is used to change the text “Click Me” fom red to blue.

Of course, many have seen $(this) used inside of the event handler to set a reference to the element that was clicked. It is helpful to know, however, that $(this) is an enhanced version of the JavaScript “this” keyword. That is to say: inside of the click event handler, “this” refers to the element that was clicked. When you put “this” inside of: $( ), you “wrap” the JavaScript “this” keyword with jQuery, which adds a number of properties and methods.

As a result of this “wrapping”, you can set a reference to the element that was clicked, but you can also leverage the power of jQuery. The native JavaScript HTML element does not have a “toggleClass” method, but jQuery does. So, by wrapping the JavaScript “this” keyword with jQuery, $(this) has allowed you to reference the clicked element, and use jQuery methods.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 1: http://jsfiddle.net/9gZbE/

How to Demo: Click the text that says: “Click Me”. Each time you click that element, the text color will toggle between red and blue.

Example # 2

In Example # 2, we have changed the reference to the clicked element from $(this) to “this”. But when you click that element, there is an error in the JavaScript console. In Google Chrome, the error is: Uncaught TypeError: Object [object HTMLAnchorElement] has no method ‘toggleClass’, and in FireFox, the error is: TypeError: this.toggleClass is not a function. The reason for this error is that while the JavaScript “this” keyword can be used to reference the element that was clicked, it does not have a “toggleClass” method. So, an error occurs.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 2: http://jsfiddle.net/9gZbE/1/

How to Demo: Open up your JavaScript console, and then click the text that says: “Click Me”. When you do, you will see an error indicating that the element you clicked does not have a “toggleClass” method.

Example # 3

So, in Example # 3, we continue to reference the element that was clicked by using the JavaScript “this” keyword, without the jQuery “wrapping”. That is: we are not using: $(this). The reason that the example now works, is because we are using the “classList” property of the element, and in-turn, the “contains”, “remove” and “add” methods. Consequently, this allows us to mimic jQuery’s “toggleClass” method.

It’s important to note that although we used jQuery to create the click handler, we can still use the JavaScript “this: keyword inside of that event handler, and access the native JavaScript element object.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 3: http://jsfiddle.net/9gZbE/2/

How to Demo: Click the text that says: “Click Me”. Each time you click that element, the text color will toggle between red and blue.

Summary

In this article, we learned about the JavaScript “this” keyword when used inside of a jQuery event handler. We learned that we can “wrap” that keyword with jQuery, leveraging that library’s DOM manipulation methods. We also discussed how inside of a jQuery event handler, we can still use the “un-wrapped” version of “this”, and leverage native JavaScript DOM manipulation methods.

JavaScript Function Throttling

JavaScript

JavaScript LogoWhen an event such as window.resize() runs more often than you want it to, you can control how many times your event handler runs.

Sometimes events fire very quickly and more often than you would like; window.resize is a perfect example. It’s quite common to assign an event handler that will run every time the user resizes the browser. Unfortunately, however, there is no “resize-end” event. The resize event will fire for every change in pixel. This means that if the user resizes the window 100px, that resize event will run 100 times. But what you usually want is for that event handler to run when the user has finished resizing the window. Since there is no “resize-end” event, we have to use a timeout to imitate the kind of behavior we want.

Example # 1

In Example # 1, we have assigned an anonymous function to the onresize event of the window object. Unfortunately, though, the unordered list is updated every time the window size changes by one pixel. What we want is for the update message to appear after the user has finished resizing the window.

Click here to see the code for Example # 1 in action: http://jsfiddle.net/zWQ8D/

Example # 2

Click here to see the code for Example # 2 in action: http://jsfiddle.net/zWQ8D/1/

In Example # 2, we have created a function named “throttle”. This function will set a timeout of whatever numeric value is passed in as an argument. But every time that same function is called, the timeout, which exists in the global scope, is cleared and reset. Because our window.onresize event calls this function many times in rapid succession, the timeout is constantly re-set, which means that the function passed-in never executes.

The magic happens after the user has stopped resizing the window. Since every call to the “throttle” function sets a timeout, once 250 milliseconds has passed since the last call to the function, the final timeout actually executes. The net result is that the event handler for the window.resize event “feels” as if it only executes once the user has finished resizing the window. What actually happens is that the event handler is passed to the “throttle” function over and over in rapid succession, but our “throttle” function ensures that it only executes if 250 milliseconds has passed since the last time it was called.

Getting Started with the Google Maps JavaScript API – Part III: Adding an Event Listener

JavaScript

Google Maps LogoAdding an event listener to your map is much like using the addEventListener() method on a DOM element.

In Part II of this article, we learned how to add a marker to a Google Map. In Part III of this article, we will learn how to add an event listener to the map. The google.maps object has an event object. One of that object’s methods is called “addListener()”. It’s not too different from the .addEventListener() method that is used to add an event handler to a DOM element in a web page. The google.maps.event.addListener() method takes three arguments:

  • A target
  • An event
  • A callback

The callback can be a reference to a function declaration (or function expression), or an anonymous function. Inside of the callback, you respond to the user’s click.

Example # 1

In Example # 1, we used the the google.maps.event.addListener() method to set up an event handler for when the user clicks the marker on our map. Since we are building upon the demo from Parts I & II of this article, we pass-in “marker” as the first argument, which is a variable we created earlier, that represents an instance of the Marker() object.

Example # 2

In Example # 2, we instantiate the InfoWindow() constructor. The InfoWindow object is a pretty cool feature that provides abstraction for creating a great looking message window on the map. It takes care of rendering the message graphic, positioning it, and adds a nice touch with a shadow. We pass-in an object with the property: “content”. The value of that property is what will be shown in an info window when the user clicks the marker. We then call the open() method of the InfoWindow instance, passing-in the map and the marker as arguments. The open() method needs those objects in order to know where and how to display itself.

Example # 3

In Example # 3, we expand our event handler a bit. In addition to showing the info Window, we also switch the map to Satellite view, zoom it in, and make sure it is centered on the user’s location.

Here is the JsFiddle.net link for this article’s working demo: http://jsfiddle.net/uQ35v/2/

Summary

In this article we learned how to add an event listener to a Google Map. We discussed the google.maps.event.addListener() method, how to instantiate the InfoWindow() constructor, and how to show an info window.

Helpful Links for Adding an Event Listener to a Google Map

https://developers.google.com/maps/documentation/javascript/events

Book Review: Async JavaScript, by Trevor Burnham

Asynchronous

Async JavaScript, by Trevor Burnham - CoverLearn to master the tricky nature of asynchronous JavaScript with “Async JavaScript – Recipes for Event-Driven Code“. This short yet thorough book explains many concepts which not only demystify the subject, but also arm you with tools to architect smarter solutions.

There are books that explain how JavaScript works, and then there are books that transform your perception of the language. Trevor Burnham’s “Async JavaScript” is the latter.

Maybe you had your first JavaScript “aha!” moment when you used the document.addEventListener() method to create your first click handler. Or maybe it was the wonderment of running some free-form code in the console and watching the web page change. Regardless of which context kicked-off your fascination with JavaScript, the intimate relationship between the DOM and this dynamic language is one of the things that make it so special. That “real time” aspect of JavaScript development is addictive.

But once you ascend to real-world problem solving, the asynchronous nature of JavaScript can be a buzzkill. The only way to slay this dragon and return to the zombie-like euphoria of JavaScript development is to dive into this topic, master it, and then gently place your sword back into its sheath.

It can be done.

Async JavaScript covers every angle and does it quite well. Starting with the JavaScript event model, it introduces you to the tricky nature of how the language handles events. Mr. Burnham then provides a surprisingly refreshing explanation on the setTimeout() and setInterval() methods, rescuing them from the “anti-pattern” monikers they have unfairly accumulated over time because of their improper use.

Before you can count to 100 milliseconds, you are whisked away, into a whirlwind of concepts that help to demystify JavaScript’s asynchronous nature. In a clear and concise manner, concepts such as the Pub/Sub model, custom events, Promises/Deferreds and Web Workers are detailed, as well as numerous libraries that help to implement these patterns.

I can’t recommend this book enough. As you start to write intermediate-level JavaScript, you find pebbles in your shoe. Quite often, these pebbles arise from tricky asynchronous JavaScript problems. Async JavaScript by Trevor Burnham is an invaluable resource. It not only explains how JavaScript processes events, but also provides numerous perspectives that help to understand and master its asynchronous nature.

Note: This book is no longer available in paperback, just the Kindle edition. It has been revised and updated, and is now a “PragProg” book.

  • Title: Async JavaScript
  • Author: Trevor Burnham
  • Publisher: Leanpub
  • Publication Date: March 20, 2012
  • Print Length: 88 pages
  • Language: English
  • ASIN: B007N81FE2
  • ISBN: 1475247362