首頁 > web前端 > js教程 > 主體

總結js中滑鼠事件

巴扎黑
發布: 2017-07-22 15:27:00
原創
1246 人瀏覽過

js中滑鼠事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblclick,所有的這些事件都包含有一個事件物件event,當然在IE低版本下,event物件是掛在window底下的。這個我們另行討論。

  1.透過html新增事件

<input type="button" click="alert(1)"/>
登入後複製

  2.透過DOM0級方式加入事件

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

  3.透過DOM2級方式新增事件



#    事件監聽主要接受三個參數,事件類型,事件需要執行的函數,是否冒泡,預設情況下是允許冒泡的


document.addEventListener('click',function( ){ },true)
登入後複製


 以上是關於事件添加的三種方式,透過DOM0級方式添加事件有一個缺點就是當添加同一個事件是,後寫的會把先寫的給覆蓋掉,但是通過DOM2級方式添加的相同事件是不會覆蓋前面的事件的。同時,需要注意的是透過DOM2級添加的事件類型前面是沒有'on'的,接著就是如果要移除事件的話,DOM0級直接讓事件為null就能清除事件,但是如果是DOM2級添加的函數是匿名函數,透過removeEventListener()方法是沒辦法移除的,因為兩者指向的不是同一個函數,如果要移除,請記得使用有名函數。關於最後一個參數true是代表冒泡,false是代表捕獲。
 

/* * 當觸發onclick事件時,console.log(ev.which),滑鼠左鍵的which值為1

* 當觸發oncontextmenue時,滑鼠的右鍵值為3,不會觸發onclick事件### * 當mousewheel時,滑鼠的中鍵鍵值為0### * 當document.down時,可以根據按鍵的不同,從左到右滑鼠鍵值依序為1,2,3### * 在chrome底下,查看ev.wheelDelta,向上是120,向下是-120### * 在FirFox底下,透過addEventListenner()來為滑鼠新增滾輪事件,事件類型是DOMMouseScroll,查看是使用ev.detail### * 向上是3,向下是-3### *######### #######

以上是總結js中滑鼠事件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板