javascript如何實(shí)現(xiàn)事件綁定

發(fā)布時(shí)間：2021-09-09 09:36:58 來(lái)源：億速云閱讀：147 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下javascript如何實(shí)現(xiàn)事件綁定，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

綁定方法：1、使用“對(duì)象.on事件名 = function(){代碼}”語(yǔ)句綁定；2、使用“事件源.addEventListener(事件名稱,事件處理函數(shù)名,是否捕獲);”語(yǔ)句綁定；3、在HTML標(biāo)簽中使用“onclick”屬性綁定事件。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

1、使用事件源的事件屬性綁定處理程序

使 HTML 和 JS 分離的其中一種方式是通過(guò)使用事件源的事件屬性綁定事件處理函數(shù)，綁定格式如下：

obj.on事件名 = 事件處理函數(shù)

格式中的 obj 為事件源對(duì)象。綁定的事件程序通常為一個(gè)匿名函數(shù)的定義語(yǔ)句，或者是一個(gè)函數(shù)名稱。

事件源的事件屬性綁定處理程序示例：

oBtn.onclick = function(){//oBtn為事件源對(duì)象，它的單擊事件綁定了一個(gè)匿名函數(shù)定義
      alert('hi')
};

2、使用addEventListener()綁定處理程序

addEventListener() 是標(biāo)準(zhǔn)事件模型中的一個(gè)方法，對(duì)所有標(biāo)準(zhǔn)瀏覽器都有效。使用 addEvent Liste ner() 綁定事件處理程序的格式如下：

事件源.addEventListener(事件名稱,事件處理函數(shù)名,是否捕獲);

參數(shù)“事件名稱”是一個(gè)不帶“on”的事件名；參數(shù)“是否捕獲”是一個(gè)布爾值，默認(rèn)值為 false，取 false 時(shí)實(shí)現(xiàn)事件冒泡，取 true 時(shí)實(shí)現(xiàn)事件捕獲。

通過(guò)多次調(diào)用 addEventListener() 可以為一個(gè)事件源對(duì)象的同一個(gè)事件類型綁定多個(gè)事件處理函數(shù)。當(dāng)對(duì)象發(fā)生事件時(shí)，所有該事件綁定的事件處理函數(shù)就會(huì)按照綁定的順序依次調(diào)用執(zhí)行。另外，需要注意的是，addEventListener() 綁定的事件處理函數(shù)中的 this 指向事件源。

addEventListener() 綁定處理程序示例：

document.addEventListener('click',fn1,false);//click事件綁定fn1函數(shù)實(shí)現(xiàn)事件冒泡
document.addEventListener('click',fn2,true);//click事件綁定fn2函數(shù)實(shí)現(xiàn)事件捕獲

3、使用HTML標(biāo)簽的事件屬性綁定處理程序

需要注意的是，使用 HTML 標(biāo)簽的事件屬性綁定事件處理程序的方式時(shí)，事件屬性中的腳本代碼不能包含函數(shù)聲明，但可以是函數(shù)調(diào)用或一系列使用分號(hào)分隔的腳本代碼。

實(shí)例：使用 HTML 標(biāo)簽的事件屬性綁定事件處理程序。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML標(biāo)簽的事件屬性綁定事件處理程序</title>
</head>
<body>
     <input type="button" onclick="var name='張三';alert(name);" value="事件綁定測(cè)試"/>
</body>
</html>

上述代碼的 button 為 click 事件的目標(biāo)對(duì)象，其通過(guò)標(biāo)簽的事件屬性 onclick 綁定了兩條腳本代碼進(jìn)行事件的處理。上述代碼在 Chrome 瀏覽器的運(yùn)行后，當(dāng)用戶單擊按鈕時(shí)，將彈出警告對(duì)話框。

以上是“javascript如何實(shí)現(xiàn)事件綁定”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

javascript如何實(shí)現(xiàn)事件綁定

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽