Learning D3.js 4 Mapping - Second Edition

The following is taken directly from the w3 specifications:

"The Event interface is used to provide contextual information about an event to the handler processing the event. An object that implements the Event interface is generally passed as the first parameter to an event handler. More specific context information is passed to event handlers by deriving additional interfaces from Event which contain information directly relating to the type of event they accompany. These derived interfaces are also implemented by the object passed to the event listener."

In other words, an event is a user input action that takes place in the browser. If your user clicks, touches, drags, or rotates, an event will fire. If you have event listeners registered to those particular events, the listeners will catch the event and determine the event type. The listeners will also expose properties associated with the event. For example, if we want to add an event listener in plain JavaScript, we would add the following lines of code:

<body> 
  <button id="btn">Click me</button> 
 
  <script> 
    varbtn = document.getElementById('btn'); 
    btn.addEventListener('click', function() { 
      console.log('Hello world'); }, false ); 
  </script> 
</body>

Note that you first need to have the button in the DOM in order to get its ID. Once you have it, you can simply add an event listener to listen to the element's click event. The event listener will catch the click event every time it fires and logs Hello world to the console.

Until jQuery, events were very tricky, and different browsers had different ways of catching these events. However, thankfully, this is all in the past. Now, we live in a world where modern browsers are more consistent with event handling.

In the world of D3, you won't have to worry about this. Generating events, catching them, and reacting to them is baked into the library and works across all browsers. A good example of this is the hover event.

Table of Contents for
Learning D3.js 4 Mapping - Second Edition

Events and how they occur

Table of Contents for Learning D3.js 4 Mapping - Second Edition

Table of Contents for
Learning D3.js 4 Mapping - Second Edition