Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of JavaScript event monitoring case analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe everyone will gain something after reading this JavaScript event monitoring case analysis article. Let's take a look.

1. What is event monitoring?

Event monitoring is when the computer listens to the event and knows when the event occurs, thus executing some written programs.

So, what are its common methods? Let's have a look together.

2.DOM0 level event snooping

DOM0 level event snooping:

Set their onxxx attributes (e.g.onclick) for elements

For DOM0 level event snooping, it can only listen for the bubbling phase.

2.1Common page event monitoring event name event description onload when the page or image is finished loading onunload when the user exits page 2.2) Common mouse event monitoring event name description onclick when the mouse clicks an element ondblclick when the mouse double-clicks an element onmousedown when the mouse button presses the onmouseup on an element when the mouse button releases the onmousemove on an element when the mouse button is pressed on an element Always move onmouseenter when the mouse moves over an element

(when entering an element area) onmouseleave when the mouse leaves an element

Onmouseenter is similar to onmouseover, and onmouseleave is similar to onmouseout.

The difference between them: onmouseenter and onmouseleave events do not support bubbling, and the other two support event bubbling

Therefore, onmouseenter is used with onmouseleave, and onmouseover with onmouseout.

Event name event description onkeypress when a key on the keyboard is pressed

(system keys do not recognize keys such as e.g.ref F1) onkeydown when a key on the keyboard is pressed

(system keystrokes are recognizable and occur before onkeypress) onkeyup when a keystroke on the keyboard is released 2.4) Common form event listens event name event description oninput when used to modify the content of the form field onchange when the user changes the content of the form field onfocus when the element gets focus

(e.g.tab or mouse click) onblur when the element loses focus onsubmit when the form is submitted onreset when the form is reset 3.DOM2 level event listener

DOM2 level event snooping:

The EventTarget.addEventListener () method registers the specified listener with the EventTarget, and when the object triggers the specified event, the specified callback function is executed.

It can be written in several ways. If you want to know more about other ways to write it, you can see the official MDN documentation, which is described here as follows:

Type: a string that represents the type of listening event

Listener: event listener function

UseCapture: when writing true, the event capture phase occurs. The default is false, and the event bubbling phase occurs.

EventTarget.addEventListener (type, listener, useCapture)

For the commonly used type: that is, the commonly used DOM0-level onxxx on is removed, that is, the original event name.

For example:

Target.addEventListener ('click', () = > {console.log ("I was clicked");}); / / the third parameter is not written here. By default, listen for bubbling phase. If you want to listen for capture phase, write true.

This is the end of the article on "case Analysis of JavaScript event Monitoring". Thank you for reading! I believe you all have a certain understanding of the knowledge of "case Analysis of JavaScript event Monitoring". If you want to learn more, you are welcome to follow 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.