js의 마우스 이벤트 요약

js의 마우스 이벤트에는 주로 onclick, onmousedown, onmouseup, oncontextmenu, ondblclick이 포함됩니다. 물론, IE의 하위 버전에서는 이벤트 개체가 창 아래에 있습니다. 이에 대해서는 별도로 논의하겠습니다.

　　1. html

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

　　2. DOM 레벨 0을 통해 이벤트 추가

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

　 3. 이벤트 추가 DOM 레벨 2를 통해

이벤트 모니터링은 주로 이벤트 유형, 실행해야 하는 함수, 버블링 여부의 세 가지 매개변수를 받습니다. 기본적으로 버블링이 허용됩니다

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

위의 세 가지 이벤트 추가 방법은 DOM 레벨을 통해 추가됩니다. 0 이벤트의 한 가지 단점은 동일한 이벤트를 추가할 때 나중에 작성된 이벤트가 먼저 작성된 이벤트를 덮어쓰지만, DOM2 레벨을 통해 추가된 동일한 이벤트는 이전 이벤트를 덮어쓰지 않는다는 것입니다. 동시에 DOM2 레벨을 통해 추가된 이벤트 유형은 앞에 'on'이 없습니다. 그런 다음 이벤트를 제거하려면 DOM0 레벨에서 이벤트를 로 설정하여 이벤트를 직접 지울 수 있습니다. null이지만 DOM2 레벨에 의해 추가된 함수인 경우 익명 함수이며 두 함수가 동일한 함수를 가리키지 않기 때문에 제거할 수 없습니다. 명명된 함수. 마지막 매개변수에 대해 true는 버블링을 의미하고 false는 캡처를 의미합니다.

/*
* onclick 이벤트가 발생했을 때 console.log(ev.which), 마우스 왼쪽 버튼의 값은 1
* oncontextmenue가 발생했을 때 마우스 오른쪽 버튼의 값은 3 , onclick 이벤트는 발생하지 않습니다.
* 마우스 휠 사용 시 마우스 가운데 버튼의 값은 0
* document.down 사용 시 왼쪽에서 오른쪽으로 마우스 버튼의 값은 1, 2, 3 다른 키에 따라 * 크롬에서 ev .wheelDelta를 확인하고 위쪽은 120, 아래쪽은 -120
* FirFox에서 addEventListenner()를 통해 마우스에 휠 이벤트를 추가하고 이벤트 유형은 DOMMouseScroll입니다. ev.detail을 사용하세요
* 위쪽은 3, 아래쪽은 - 3
*

위 내용은 js의 마우스 이벤트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!