JavaScript event processing: a deep understanding of thisKeywords and event processing mechanism

Efficient client web applications cannot be separated from JavaScript event handling 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. Normally, this points to the element that triggers the event, but not always.

Avoid using inline event handlers

Inline event handlers (e.g. <a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="EventHandler();">click me</a>) 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

Although traditional event handling methods (for example, link.onclick = EventHandler;) are simple and direct, only one handler can be assigned per event type. Note: Do not use link.onclick = EventHandler();, this will execute the EventHandler function immediately and assign the return value (undefined) to the http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15blink attribute of the onclick node. This will not report an error, but your handler will never be called when the click event occurs.

Modern DOM2 Event

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);
}

Similar to the DOM0 event, all browsers set this to 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);
}

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

thisUsing this is simple, just like using other variables. Remember,

points to the HTML element that attaches the event handler.

Different event types in JavaScript

clickJavaScript supports multiple events such as mouseover, mouseout, keydown, keyup, load, unload,

,

, and .

addEventListenerHow to attach an event handler to an element

The event handler can be attached to an element using the 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.

The above is the detailed content of JavaScript 'this' and Event Handlers. For more information, please follow other related articles on the PHP Chinese website!