Js process of operating mouse events

In actual projects, we often need to use JavaScript to operate mouse events. So today I will tell you in detail the process of operating mouse events with JS and how to use JS to operate mouse events.

Noteonmouseover and onmouseout are executed only once, while onmousemove is executed multiple times

OnmousedownIt is also executed only once, only once for each click, and will not be triggered continuously. Unlike onkeydown and onkeypress, it is very messy here. What are the mouse events? ? ?

It displays as undefined in Firefox

It displays as undefined in IE

But the above display is normal in Google. Now we need to make a compatible one IE and Firefox

There is a question here. In a separate console.log(window), the event attribute seen in it is undefined, but in consoe.log(window.event), the event attribute is displayed. Why is there such a difference in the effect you want?

This is where the teacher struggles, but I don’t know why.

The above analysis is wrong. In Google, both e and window.event are supported. Firefox only supports e, and Google only supports window.event

Pass to participate in dynamically created attributes

Since the attributes e.pageX and e.pageY are not supported in lower versions of IE, (in lower versions of IE (displayed in the middle), so use the mouse position of the visual area + the scroll bar curl height to obtain the mouse position based on the content area.

The document above is the window

Event capture is just to understand the content. In IE The

event processing function is not supported. Note that events following level 0 events will overwrite previous events. This is very important.

Window can be omitted. The above code makes no sense

Bubbling: from specific nodes to unspecific nodes

Now it represents capture, but it has no specific effect. Now it is the same as bubbling

Capture: from non-specific nodes to specific nodes

Achieve the same effect as the function execution context, addEventListener() is not supported in IE browser

The above is Method of unloading DOM level 0 events (unloading events, if the interface is refreshed again, the event processing function will continue to be executed)

In fact, it has the same effect as unloading DOM level 0 events

IE Add DOM2-level events

The latest version of IE, IE11, does not support the attribute attachEvent

IE uninstalls DOM2-level events

The following is the encapsulation function:

This This way of writing is displayed as empty in IE

This way of writing will directly report an error in non-IE.

The display in non-IE is a function, and the display in IE is undefined. The following function encapsulation is Carry out based on this principle

Since event capture is rarely used, the fourth value is usually false. There is no need to pass a separate parameter and it is directly hardcoded

when uninstalling , cannot be used in event handling functionsAnonymous functions

Pay attention to the execution order in the IE version

DOMContentLoaded is now to understand the content, pay attention to a concept: event handling function

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to make DIV adaptive height

How to use CSS to hide the text content of the image background

The necessity of initializing CSS before starting the front-end project

The above is the detailed content of Js process of operating mouse events. For more information, please follow other related articles on the PHP Chinese website!