javascript中怎么綁定事件

發(fā)布時(shí)間：2021-07-19 14:53:44 來(lái)源：億速云閱讀：155 作者：Leah 欄目：web開(kāi)發(fā)

javascript中怎么綁定事件，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

方法：1、使用HTML標(biāo)簽的事件屬性onclick綁定處理程序，語(yǔ)法“onclick="事件處理程序"”；2、使用事件源的事件屬性綁定處理程序，語(yǔ)法“obj.on事件名=處理函數(shù)”；3、使用addEventListener()綁定處理程序。

綁定事件處理程序有以下 3 種方式：

使用 HTML 標(biāo)簽的事件屬性onclick綁定事件處理程序。該方式通過(guò)設(shè)置標(biāo)簽的事件屬性值為事件處理程序。這種方法現(xiàn)在不推薦使用。
使用事件源的事件屬性綁定事件處理函數(shù)。該方式通過(guò)設(shè)置事件源對(duì)象的事件屬性值為事件處理函數(shù)。
使用 addEventListener() 方法綁定事件和事件處理函數(shù)（IE9 之前的版本則使用 attach Event() 方法。

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

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

【例 1】使用 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ì)話框，結(jié)果如下圖所示。

javascript中怎么綁定事件

當(dāng)事件處理程序涉及的代碼在 2 條以上時(shí)，如果還像示例 1 那樣綁定事件處理程序，會(huì)使程序的可讀性變得很差。對(duì)此，可以將事件處理程序定義為一個(gè)函數(shù)，然后在事件屬性中調(diào)用該函數(shù)。

【例 2】HTML 標(biāo)簽的事件屬性為函數(shù)調(diào)用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML標(biāo)簽的事件屬性為函數(shù)調(diào)用</title>
<script>
     function printName(){
          var name = "億速云";
          alert(name);
     }
</script>
</head>
<body>
     <input type="button" onClick="printName()" value="事件綁定測(cè)試"/>
</body>
</html>

上述代碼的執(zhí)行結(jié)果和示例 1 完全相同。從上述兩個(gè)示例可以看到，標(biāo)簽事件屬性將 JS 腳本代碼和 HTML 標(biāo)簽混合在一起，違反了 Web 標(biāo)準(zhǔn)的 JS 和 HTML 應(yīng)分離的原則。所以，使用 HTML 標(biāo)簽的事件屬性綁定事件處理程序不好，在實(shí)際應(yīng)用時(shí)應(yīng)盡量避免使用。

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

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

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

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

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

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

【例 3】使用事件源的事件屬性綁定事件處理函數(shù)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件源的事件屬性綁定事件處理函數(shù)</title>
<script>
     window.onload = function(){//窗口加載事件綁定了一個(gè)匿名函數(shù)
          //定義一個(gè)名為fn的函數(shù)
          function fn(){
               alert('hello');
          }
          //獲取事件源對(duì)象
          var oBtn1 = document.getElementById("btn1");
          var oBtn2 = document.getElementById("btn2");
         
          //綁定一個(gè)匿名函數(shù)
          oBtn1.onclick = function(){
               alert("hi");
          }
          //綁定一個(gè)函數(shù)名
          oBtn2.onclick = fn;
     };
</script>
</head>
<body>
   <input type="button" id="btn1" value="綁定一個(gè)匿名函數(shù)">
   <input type="button" id="btn2" value="綁定一個(gè)函數(shù)名">
</body>
</html>

上述 JS 代碼中處理了 3 個(gè)事件：文檔窗口加載事件 load、兩個(gè)按鈕的單擊事件 click。這三個(gè)事件的處理都是使用事件源的事件屬性綁定事件處理函數(shù)來(lái)實(shí)現(xiàn)的，其中 load 事件和第一個(gè)按鈕的click事件綁定的是匿名函數(shù)，而第二個(gè)按鈕的click事件綁定的是一個(gè)函數(shù)名。

需要特別注意的是，不能在 oBtn2 綁定的函數(shù)名后面加“()”，否則綁定的函數(shù)變?yōu)楹瘮?shù)調(diào)用，這樣就會(huì)在 JS 引擎執(zhí)行到該行代碼時(shí)自動(dòng)調(diào)用執(zhí)行，而在事件觸發(fā)時(shí)卻不會(huì)執(zhí)行了。

在文檔所有元素加載完成后會(huì)處理窗口加載事件函數(shù)，而單擊每個(gè)按鈕時(shí)將會(huì)觸發(fā)單擊事件。單擊第一個(gè)和第二個(gè)按鈕后，將分別彈出顯示“hi”和“hello”兩個(gè)警告對(duì)話框。

javascript中怎么綁定事件

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

使用事件源對(duì)象的事件屬性綁定事件處理程序方式雖然簡(jiǎn)單，但其存在一個(gè)不足之處：一個(gè)事件只能綁定一個(gè)處理程序，后面綁定的事件處理函數(shù)會(huì)覆蓋前面綁定的事件處理函數(shù)。實(shí)際應(yīng)用中，一個(gè)事件源的一個(gè)事件可能會(huì)用到多個(gè)函數(shù)來(lái)處理。

當(dāng)一個(gè)事件源需要使用多個(gè)函數(shù)來(lái)處理時(shí)，可以通過(guò)事件源調(diào)用 addEventListener()（針對(duì)標(biāo)準(zhǔn)瀏覽器）來(lái)綁定事件處理函數(shù)以實(shí)現(xiàn)此需求。一個(gè)事件源通過(guò)方法綁定多個(gè)事件函數(shù)的實(shí)現(xiàn)方式是：對(duì)事件源對(duì)象調(diào)用多次 addEventListener()，其中每次的調(diào)用只綁定一個(gè)事件處理函數(shù)。

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)事件捕獲

【例 4】使用 addEventListener() 綁定事件函數(shù)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用addEventListener()/attachEvent()綁定事件函數(shù)</title>
<script>
     function fn1(){
          alert("fn1()");
     }
     function fn2(){
         alert("fn2()");
     }
     function bindTest(){
         document.addEventListener('click',fn1,false);//首先綁定fn1函數(shù)   
         document.addEventListener('click',fn2,false);   
     }
     bindTest();//調(diào)用函數(shù)
</script>
</head>
<body>
</body>
</html>

上述代碼在瀏覽器中運(yùn)行后，當(dāng)單擊文檔窗口時(shí)，會(huì)依次彈出顯示“fn1()”和“fn2()”的警告對(duì)話框。

javascript中怎么綁定事件

關(guān)于javascript中怎么綁定事件問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

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

javascript中怎么綁定事件

猜你喜歡

最新資訊

相關(guān)推薦

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