Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you what are the relevant knowledge points about the JavaScript incident. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Events are specific moments of interaction that occur in a document or browser window. The interaction between JavaScript and HTML is achieved through events. For Web applications, there are the following typical events: click events, mouse movement events, keyboard press / pop events, and so on. Events are specific moments of interaction that occur in a document or browser window. You can use a listener (or event handler) to subscribe to an event so that the appropriate code is executed when the event occurs.

Here is a brief introduction to the following common events: document loading events, event objects, event bubbles, event delegation, event binding, event propagation, keyboard events.

Document load event (onload): the onload event is triggered after the entire page has been loaded. Use as shown in the figure:

From the performance point of view, it is better to write at the bottom of the page! Write the js code at the bottom of the page to ensure that the page is loaded when the code is executed. _ window.onload can only appear once on the page, and the following code overrides the previous code.

Event object: after the event occurs, an event object is generated and passed as an argument to the listener function. The concrete manifestation is that we pass an event parameter in the callback function, and the value of this parameter is passed by JS automatically. This event object contains all the relevant information about the event, including what the event is (mouse / keyboard), the initiator of the event, the target of the event, and so on.

When an event on the DOM object is triggered, an event object Event is generated, which contains information about all the events. Includes the element that caused the event, the type of event, and its information related to a particular event. DOM standard browsers pass an event object into the event handler. No matter what the event handler is, an event object is passed in. The Event object contains properties and methods related to the specific event in which it was created. The types of events triggered are different, and the available properties and methods are not the same. Here is a brief description of the mouse / keyboard event as shown in the figure:

Unlike the event object in IE, which accesses the event object in DOM, there are several different ways to access the event object in IE, depending on how you specify the event handler. If the event object exists as a property of the window object in IE, you can use window.event to get the event object. In the case of using attachEvent (), it will also pass an event object in the handler, or it can be used in the previous way. Here is a case study: when the mouse is over the box box, the p tag below shows the current coordinates of the mouse.

Effect picture:

Code diagram:

Event bubbling (Bubble): bubbling refers to the upward conduction of events, and when an event on a descendant element is triggered, the same event of its ancestor element is triggered. Bubbling is useful in most cases in development. If you do not want bubbling to occur, you can cancel bubbling event.cancelBubble=true through the event object.

Effect picture:

Code diagram:

Event delegation: uniformly binds the event to the common ancestor element of the element, so that when the event on the descendant element is triggered, it bubbles all the way to the ancestor element, thus handling the event through the response function of the ancestor element. Event delegation is the use of bubbling, through delegation can reduce the number of event binding and improve the performance of the program. Property target of the event object: returns the element that triggered this event (the target node of the event)

Case study:

Effect picture:

Code diagram:

Event binding: we can bind an element to an event handler in two common ways: by specifying the event attribute through the HTML element, and by binding through the property specified by the DOM object. There is also a special way we call setting up event listeners, the element object: addEventListener (). The first two ways can bind event handlers, but they both have the disadvantage that they can only bind one program, not multiple programs for a single event. AddEventListener (), which also binds the response function for the element. Using addEventListener (), you can 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 of IE8 and below, and needs to use attachEvent instead. AttachEvent (), you can use attachEvent () to bind events in IE8. This method can also bind multiple handlers to an event at the same time, except that it is executed first after binding, in reverse order to addEventListener ().

Event propagation: event propagation can be divided into three stages: capture phase-during the capture phase, the event is captured from the outermost ancestor element to the target element, but the event is not triggered by default at this time; the target phase-the event is captured to the target element, and the end of the capture begins to trigger the event on the target element Bubbling phase-events are passed from the target element to his ancestor element, triggering events on the ancestor element in turn.

Keyboard event: onkeydown: keyboard pressed event. If you press and hold a key all the time, the event will always be triggered, and 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 misoperation. Onkeyup: an event in which the keyboard is released. Keyboard events are generally bound to objects that can gain focus or are document.

These are all the contents of this article entitled "what are the knowledge points of JavaScript events?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.