關(guān)于JavaScript中事件綁定的方法總結(jié)
最近收集了一些關(guān)于JavaScript綁定事件的方法，匯總了一下，不全面，但是，希望便于以后自己查看。
JavaScript中綁定事件的方法主要有三種：
1 在DOM元素中直接綁定
2 JavaScript代碼中直接綁定
3 綁定事件監(jiān)聽函數(shù)
一、在DOM元素中直接綁定
也就是直接在html標(biāo)簽中通過 onXXX=“” 來綁定。舉個例子：
<input type="button" value="點(diǎn)我呦" onclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="點(diǎn)我呦" onclick="testAlert()">
<script type="text/javascript">
function testAlert(){
alert("hello world!");
}
</script>
二、JavaScript代碼中直接綁定
在JavaScript中通過查找DOM對象，對其綁定，elementObject.onclick=function(){} 的格式，舉例如下：
<input type="button" value="點(diǎn)我呦" id="demo">
<script type="text/javascript">
document.getElementById("demo").onclick=function testAlert(){
alert("hello world!");
}
</script>
三、綁定事件監(jiān)聽函數(shù)
這里需要了解addEventListener()和attachEvent()的函數(shù)語法。
1 elementObject.addEventListener(eventName,handle,useCapture) （支持主流瀏覽器、以及IE9.0及以上）
eventName:要綁定的事件名稱。注意寫法，比如點(diǎn)擊事件，寫成click,而不是onclick.
handle: 處理事件的函數(shù)名。但是寫法上沒有小括號。
useCapture:Boolean類型，是否使用捕獲，一般用false，具體涉及到的會在后邊總結(jié)。
2 elementObject.attachEvent(eventName,handle);（僅支持IE8及以下）
從網(wǎng)上找到了一個兼容的好辦法，相比較if。。else語句，這個方法用的是try..catch錯誤處理語句，可以避免瀏覽器出現(xiàn)錯誤提示。
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期瀏覽器
}
}
}
四、說說JQuery中綁定事件的幾種方法。
主要有on()、bind()、live()、delegate()等幾種，相對應(yīng)的解綁就是off()、unbind()、live()、undelegate();
1 on()、bind()、live()、delegate()中除了bind()，其他的都可以給后來追加的元素對象添加綁定事件。
2 這幾種方法中各自有對應(yīng)支持的JQuery版本。
3 在給動態(tài)添加的頁面元素綁定事件時，通常用on()方法。
以上就是小編為大家?guī)淼年P(guān)于JavaScript中事件綁定的方法總結(jié)全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
JS獲取經(jīng)緯度并根據(jù)經(jīng)緯度得到城市信息簡單示例
前端時間剛好使用了百度地圖的js api定位獲取用戶當(dāng)前經(jīng)緯度并獲取當(dāng)前詳細(xì)位置的功能,為了方便下次找起來方便一些自己在這里記錄一下,這篇文章主要給大家介紹了關(guān)于JS獲取經(jīng)緯度并根據(jù)經(jīng)緯度得到城市信息的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了詳解基于Wepy開發(fā)小程序插件(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-08-08
“撩過”c++的對象，“拿捏”了python的對象，那么今天我們看看javascript中的對象到底是什么，看能不能一次性拿下，不行的話就多來幾次，想做“海王”就多物色幾門語言的對象，多new幾個，最終你會發(fā)現(xiàn)都差不多2022-03-03
深淺拷貝知識在我們的日常開發(fā)中還算是用的比較多,下面這篇文章主要給大家介紹了關(guān)于javaScript深拷貝和淺拷貝的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
最近要做一個大屏幕展示上下滾動的列表，而IE自帶的Marquee，無法滿足需要，隨自己寫了一個滾動機(jī)制，代碼在附件中2009-12-12
這篇文章主要介紹了javascript中加號(+)操作符的一些神奇作用,真的很神奇,例如加號可以轉(zhuǎn)換數(shù)據(jù)類型，可以把日期轉(zhuǎn)成整數(shù)等,需要的朋友可以參考下2014-06-06
webpack proxy,即webpack提供的代理服務(wù),基本行為就是接收客戶端發(fā)送的請求后轉(zhuǎn)發(fā)給其他服務(wù)器,本文給大家介紹了webpack proxy如何解決跨域問題,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了JS模擬按鈕點(diǎn)擊功能的方法,結(jié)合實(shí)例形式分析了JavaScript模擬點(diǎn)擊按鈕事件的實(shí)現(xiàn)技巧,并附帶了JavaScript模擬點(diǎn)擊鏈接的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12
百度地圖API之百度地圖退拽標(biāo)記點(diǎn)獲取經(jīng)緯度的實(shí)現(xiàn)代碼
這篇文章主要介紹了百度地圖API之百度地圖退拽標(biāo)記點(diǎn)獲取經(jīng)緯度的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JS實(shí)現(xiàn)橫向跑馬燈效果代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04