關(guān)于js中的鼠標(biāo)事件總結(jié)
js中鼠標(biāo)事件主要有onclick，onmousedown，onmouseup，oncontextmenu，ondblclick,所有的這些事件都包含有一個(gè)事件對(duì)象event，當(dāng)然在IE低版本下，event對(duì)象是掛在window底下的。這個(gè)我們另行討論。
1.通過(guò)html添加事件
<input type="button" click="alert(1)"/>
2.通過(guò)DOM0級(jí)方式添加事件
<input type="button" value="點(diǎn)擊"/>
<script>
var btn=document.getElementsByTagName('input')[0];
btn.onclick=function(){
alert(1);
}
</script>
3.通過(guò)DOM2級(jí)方式添加事件
事件監(jiān)聽(tīng)主要接受三個(gè)參數(shù)，事件類型，事件需要執(zhí)行的函數(shù)，是否冒泡，默認(rèn)情況下是允許冒泡的
document.addEventListener('click',function( ){ },true)
以上是關(guān)于事件添加的三種方式，通過(guò)DOM0級(jí)方式添加事件有一個(gè)缺點(diǎn)就是當(dāng)添加同一個(gè)事件是，后寫的會(huì)把先寫的給覆蓋掉，但是通過(guò)DOM2級(jí)方式添加的相同事件是不會(huì)覆蓋前面的事件的。同時(shí)，需要注意的是通過(guò)DOM2級(jí)添加的事件類型前面是沒(méi)有‘on'的，接著就是如果要移除事件的話，DOM0級(jí)直接讓事件為null就能清除事件，但是如果是DOM2級(jí)添加的函數(shù)是匿名函數(shù)，通過(guò)removeEventListener（）方法是沒(méi)辦法移除的，因?yàn)閮烧咧赶虻牟皇峭粋€(gè)函數(shù)，如果要移除，請(qǐng)記得使用有名函數(shù)。關(guān)于最后一個(gè)參數(shù)true是代表冒泡，false是代表捕獲。
/*
* 當(dāng)觸發(fā)onclick事件時(shí)，console.log(ev.which),鼠標(biāo)左鍵的which值為1
* 當(dāng)觸發(fā)oncontextmenue時(shí)，鼠標(biāo)的右鍵值為3，不會(huì)觸發(fā)onclick事件
* 當(dāng)mousewheel時(shí)，鼠標(biāo)的中鍵鍵值為0
* 當(dāng)document.down時(shí)，可以根據(jù)按鍵的不同，從左到右鼠標(biāo)鍵值依次為1,2,3
* 在chrome底下，查看ev.wheelDelta,向上是120，向下是-120
* 在FirFox底下，通過(guò)addEventListenner()來(lái)給鼠標(biāo)添加滾輪事件，事件類型是DOMMouseScroll，查看是使用ev.detail
* 向上是3，向下是-3
*
以上這篇關(guān)于js中的鼠標(biāo)事件總結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- JS html事件冒泡和事件捕獲操作示例
- js監(jiān)聽(tīng)html頁(yè)面的上下滾動(dòng)事件方法
- 關(guān)于JavaScript與HTML的交互事件
- JS檢測(cè)頁(yè)面中哪個(gè)HTML標(biāo)簽觸發(fā)點(diǎn)擊事件的方法
- js 動(dòng)態(tài)生成html 觸發(fā)事件傳參字符轉(zhuǎn)義的實(shí)例
- javascript 鍵盤事件總結(jié) 推薦
- js監(jiān)聽(tīng)鍵盤事件示例代碼
- js和jquery實(shí)現(xiàn)監(jiān)聽(tīng)鍵盤事件示例代碼
- js捕捉鍵盤事件和按鍵鍵值的方法
- JavaScript常見(jiàn)鼠標(biāo)事件與用法分析
- javascript 鼠標(biāo)事件總結(jié)
- JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(biāo)事件簡(jiǎn)單示例
相關(guān)文章
通過(guò)JavaScript實(shí)現(xiàn)圖片壓縮
在學(xué)習(xí)的時(shí)候，有時(shí)候看到一些一些網(wǎng)站的圖片是經(jīng)過(guò)壓縮處理的，因?yàn)閴嚎s之后的圖片會(huì)節(jié)省一部分你的內(nèi)存空間，這樣的話也可以提升性能，于是就比較好奇這是如何實(shí)現(xiàn)的，今天我們就簡(jiǎn)單的實(shí)現(xiàn)一下,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了倒記時(shí)60刷新網(wǎng)頁(yè)的js代碼,需要的朋友可以參考下2014-02-02
JS字符串統(tǒng)計(jì)操作示例【遍歷,截取,輸出,計(jì)算】
這篇文章主要介紹了JS字符串統(tǒng)計(jì)操作,結(jié)合實(shí)例形式分析了javascript字符串的遍歷,截取,輸出,計(jì)算等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-03-03
Uploadify是JQuery的一個(gè)上傳插件，實(shí)現(xiàn)的效果非常不錯(cuò)，帶進(jìn)度顯示。接下來(lái)通過(guò)本文給大家介紹Uploadify上傳文件方法，涉及到Uploadify在Aspnet中的使用相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友一起學(xué)習(xí)吧2016-03-03
JavaScript高級(jí)教程之如何玩轉(zhuǎn)箭頭函數(shù)
箭頭函數(shù)是在es6中添加的一種規(guī)范,箭頭函數(shù)相當(dāng)于匿名函數(shù),簡(jiǎn)化了函數(shù)的定義,下面這篇文章主要給大家介紹了關(guān)于JavaScript高級(jí)教程之如何玩轉(zhuǎn)箭頭函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Javascript Tab 導(dǎo)航插件 (23個(gè))
實(shí)現(xiàn)tab頁(yè)很多方法，有一些是用純CSS實(shí)現(xiàn)，其他大多數(shù)是基于jquery、mootools或者其他js框架實(shí)現(xiàn)，既然有這么多可以拿來(lái)即用的插件，又何苦重復(fù)造輪子。2009-06-06
JavaScript如何實(shí)現(xiàn)數(shù)組內(nèi)的值累加
我們會(huì)經(jīng)常在開(kāi)發(fā)過(guò)程中,需要獲取數(shù)組中的值累加,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript如何實(shí)現(xiàn)數(shù)組內(nèi)的值累加的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-11-11
下面小編就為大家?guī)?lái)一篇js中使用使用原型(prototype)定義方法的好處詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
JavaScript實(shí)現(xiàn)數(shù)組元素增減的方法示例
數(shù)組元素的增刪是JavaScript的一個(gè)特點(diǎn),因?yàn)槠渌芏嗑幊陶Z(yǔ)言的數(shù)組是不允許增加或者刪除元素的,本文給大家介紹了JavaScript實(shí)現(xiàn)數(shù)組元素增減的方法示例,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
今天小編就為大家分享一篇layui 優(yōu)化button按鈕和彈出框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08