This article brings you relevant knowledge about JavaScript. It mainly introduces a simple summary of events. Events are some specific interactive moments that occur in documents or browser windows. Let’s take a look at them together. I hope it will be helpful to everyone. help.
[Related recommendations: javascript video tutorial, web front-end]
Events are specific moments of interaction that occur within a document or browser window. The interaction between JavaScript and HTML is achieved through events. For Web applications, there are the following representative events: click events, mouse move-in and move-out events, keyboard press/pop-up events, etc. Events are specific moments of interaction that occur in a document or browser window. You can use listeners (or event handlers) to subscribe to events so that appropriate code is executed when the event occurs.
Here is a brief introduction to the following commonly used events: document loading events, event objects, event bubbling, event delegation, event binding, event propagation, and keyboard events.
Document loading event (onload): The onload event is triggered after the entire page is loaded. Use as shown:
From a performance perspective, it is better to write it at the bottom of the page! The js code is written at the bottom of the page to ensure that the page has been loaded when the code is executed. window.onload can only appear once on the page, and subsequent code will overwrite the previous code.
Event object: After the event occurs, an event object will be generated and passed to the listening function as a parameter. The specific performance is that we pass in an event parameter in the callback function, and the value of this parameter is automatically passed in by JS. This event object will contain all relevant information about this event, including what event (mouse/keyboard) it is, the triggerer of the event, the target of the event, etc.
When an event on the DOM object is triggered, an event object Event is generated, which contains all event-related information. Includes the elements that caused the event, the type of event, and other information related to the specific event. DOM standard browsers will pass an event object into the event handler. Whatever the event handler is, an event object is passed in. The Event object contains properties and methods related to the specific event that created it. The types of events triggered are different, and the available properties and methods are also different. Here is a brief introduction to mouse/keyboard events as shown in the figure:
The event object in IE is different from accessing the event object in the DOM. There are several different ways to access the event object in IE, depending on how you specify the event handler. In IE, the event object exists as an attribute of the window object. You can use window.event to obtain the event object. When using attachEvent(), an event object will also be passed in the handler, or it can be used in the previous way. Here is a case to illustrate: when the mouse is on the box, the p tag below displays the current coordinates of the mouse.
Rendering:
Code diagram:
Event bubbling (Bubble): The so-called bubbling refers to the upward propagation of events. When an event on a descendant element is triggered, the same event on its ancestor element will also be triggered. Bubbles are useful in most situations in development. If you don't want bubbling to occur, you can cancel the bubbling through the event object event.cancelBubble=true.
Rendering:
Code diagram:
Delegation of events: refers to binding events to the common ancestor elements of elements, so that when an event on a descendant element is triggered, it will bubble up to the ancestor element, and the event will be processed through the response function of the ancestor element. Event delegation uses bubbling. Delegation can reduce the number of event bindings and improve program performance. The attribute target of the event object: returns the element that triggered this event (the target node of the event)
Case:
Rendering:
Code diagram:
Event binding: We can bind event handlers to an element in two common ways: binding by specifying event attributes of HTML elements; binding by specifying attributes of DOM objects. There is another special way called setting event listener, element object: addEventListener(). The first two methods can bind event handlers, but they both have the disadvantage that they can only bind one program, and cannot bind multiple programs for one event. addEventListener(), through this method you can also bind a response function to an element. Use addEventListener() to bind multiple response functions to the same event of an element at the same time. In this way, when the event is triggered, the response function will be executed in the binding order of the function. This method does not support browsers IE8 and below, and you need to use attachEvent instead. attachEvent(), in IE8 you can use attachEvent() to bind events. This method can also bind multiple processing functions to an event at the same time. The difference is that it is bound first and executed first. The execution order is opposite to addEventListener().
Event propagation: Event propagation can be divided into three stages: capture stage - in the capture stage, events are captured from the outermost ancestor element to the target element, but by default the event will not be triggered at this time; target stage - the event is captured The target element starts to trigger events on the target element after the capture is completed; the bubbling stage - the event is transmitted from the target element to its ancestor elements, triggering events on the ancestor elements in turn.
Keyboard events: onkeydown: Keyboard pressed event. If you keep pressing a key without releasing it, the event will always be triggered. When the onkeydown event is triggered continuously, the interval between the first and second times will be slightly longer, and the others will be very fast. This is to prevent misuse. onkeyup: event when the keyboard is released. Keyboard events are generally bound to some objects that can obtain focus or documents...
The above is a brief summary of the details of JavaScript events. For more information, please pay attention to other related articles on the source code network!