JavaScript event processing: a deep understanding of this keyword and event processing mechanism

Efficient client web applications cannot be separated from JavaScript event processing mechanism. Events allow JavaScript to detect user behavior, such as mouse hover, clicking on links, page scrolling, window resizing, dragging objects, etc. Your JavaScript code can register an event handler that triggers when a specific event occurs. Most browsers will pass a single object containing event information to the function, such as key information, mouse cursor position, etc. You can then do certain actions such as animation elements, initiating an Ajax request, or blocking the browser's default behavior. In addition, the this keyword may also be set. Typically, this points to the element that triggers the event, but it is not always the case.

Avoid using inline event handlers

]

Inline event handlers (e.g. click me]) are simple, but have many disadvantages: they are highly restrictive, clumsy and can bloat HTML code. Since event calls and handler are defined in different locations, it is complicated to maintain. Finally, since events may be called when the page loads, the script tags must be placed at the top of the HTML, not at the bottom.

Traditional DOM0 event]

Traditional event handling methods (for example,

link.onclick = EventHandler;) can only be assigned one handler per event type. Note: Do not use link.onclick = EventHandler();, this will immediately execute the EventHandler function and assign the return value (undefined) to the onclick attribute of the #link node. This will not report an error, but your handler will never be called when the click event occurs.

Modern DOM2 Events]

Modern event processing allows multiple handlers to be specified for the same event. However, due to some differences in implementation between Microsoft and W3C, only IE9 and above support

addEventListener(). We can use object detection to create a cross-browser event additional function:

AttachEvent(link, "click", EventHandler); function AttachEvent(element, type, handler) { if (element.addEventListener) element.addEventListener(type, handler, false); else element.attachEvent("on" type, handler); }

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

Similar to the DOM0 event, all browsers set

this as the element that triggers the event...except IE8 and below. In IE8 and below, this is always a global window object. Fortunately, we can determine the target element from the event object:

function EventHandler(e) { e = e || window.event; var target = e.target || e.srcElement; console.log(target); }

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

The meaning of the keyword this in JavaScript event handler]

this keyword refers to the context in which the function is called. In an event handler, this usually points to the HTML element that attaches the event handler. This allows you to access and manipulate elements directly.

How to use this in event handler

Using

this is simple, just like using other variables. Remember, this points to the HTML element of the attached event handler.

Different event types in JavaScript

JavaScript supports multiple events such as

click, mouseover, mouseout, keydown, keyup, load and unload.

How to attach an event handler to an element

You can attach an event handler to an element using the

addEventListener method. This method accepts two parameters: the name of the event to be listened to and the function to run when the event occurs.

Event object in JavaScript

Event object is a special object created when an event occurs. This object contains information about events, such as event type, target element, event occurrence time, etc. You can access Event objects in event handler functions.