js中的鼠標事件

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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 聲明:本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學習筆記整理一下(...
    angryyan閱讀 7,080評論 1 6
  • 1:DOM0事件和DOM2級在事件監聽使用方式上有什么區別? 瀏覽器端的JavaScript采用的是事件驅動的異步...
    饑人谷_bigJiao閱讀 287評論 0 0
  • 前言:之前的上傳圖片用到了event.target,但是后來仔細思考了一下,自己對event.target,thi...
    Ruby君閱讀 2,026評論 1 3
  • 事件流 IE和Netscape開發團隊提出了完全相反的兩種事件流的概念,事件冒泡流和事件捕獲流。 事件冒泡 事件由...
    exialym閱讀 955評論 0 9
  • 1.給定程序中,函數fun的功能是:統計形參s所指的字符串中數字字符出現的次數,并存放在形參t所指的變量中,最后在...
    Micason閱讀 647評論 0 0