Summary of mouse events in js-JS Tutorial-php.cn

Summary of mouse events in js

巴扎黑

Release： 2017-07-22 15:27:00

Original

1255 people have browsed it

The mouse events in js mainly include onclick, onmousedown, onmouseup, oncontextmenu, and ondblclick. All these events contain an event object event. Of course, in lower versions of IE, the event object is hung under the window. We will discuss this separately.

　 1. Add events through html

<input type="button" click="alert(1)"/>

Copy after login

　 2. Add events through DOM0 level Event

<input type="button" value="点击"/>
<script>var btn=document.getElementsByTagName('input')[0];
    btn.onclick=function(){
         alert(1);
}</script>

Copy after login

　　3. Add event

# through DOM2 level method ## Event monitoring mainly accepts three parameters, event type, function that needs to be executed, and whether to bubble. By default, bubbling is allowed.

document.addEventListener('click',function( ){ },true)

Copy after login

The above is about There are three ways to add events. One disadvantage of adding events through DOM level 0 is that when adding the same event, the one written later will overwrite the one written first, but the same event added through DOM level 2 will not overwrite the previous one. of events. At the same time, it should be noted that the event type added through DOM2 level does not have 'on' in front of it. Then, if you want to remove the event, DOM0 level can directly clear the event by setting the event to null, but if it is a function added by DOM2 level It is an anonymous function and cannot be removed through the removeEventListener() method because the two do not point to the same function. If you want to remove it, please remember to use a named function. Regarding the last parameter, true represents bubbling, and false represents capturing.

* When the onclick event is triggered, console.log(ev.which), the which value of the left mouse button is 1
* When the oncontextmenue is triggered, The value of the right button of the mouse is 3 and the onclick event will not be triggered
* When mousewheel is used, the value of the middle button of the mouse is 0
* When document.down is used, the mouse button can be moved from left to right according to the different keys. The values are 1, 2, 3
* Under chrome, check ev.wheelDelta, up is 120, down is -120
* Under FirFox, add a wheel event to the mouse through addEventListenner(), event The type is DOMMouseScroll, and the view is using ev.detail
* Up is 3, down is -3
*

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