在JavaScript中,事件是在HTML文檔中發(fā)生的交互行為,例如鼠標(biāo)點(diǎn)擊、鍵盤(pán)按鍵、頁(yè)面加載、輸入框輸入等等都可以被視為事件。
JavaScript通過(guò)事件觸發(fā)器(event listener)來(lái)響應(yīng)特定的事件,這就是所謂的事件處理函數(shù)(event handler)。當(dāng)事件被觸發(fā)時(shí),事件處理函數(shù)將被自動(dòng)調(diào)用。在事件處理程序中,我們可以執(zhí)行任意的JavaScript代碼,例如修改HTML的內(nèi)容、修改CSS樣式、發(fā)送AJAX請(qǐng)求等等。
<button id="myBtn">Click Me!</button> <script> var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ alert("Hello World!"); }); </script>
上面的代碼演示了如何在點(diǎn)擊按鈕時(shí)觸發(fā)一個(gè)簡(jiǎn)單的事件處理函數(shù)。我們使用getElementById方法獲取按鈕元素,并通過(guò)addEventListener方法添加一個(gè)事件監(jiān)聽(tīng)器。事件監(jiān)聽(tīng)器也可以移除,只需要調(diào)用removeEventListener方法即可。
btn.removeEventListener("click", function(){ alert("Hello World!"); });
除了添加事件監(jiān)聽(tīng)器以外,JavaScript還可以通過(guò)內(nèi)聯(lián)事件屬性來(lái)處理事件。例如:
<button onclick="alert('Hello World!')">Click Me!</button>
這里我們使用onclick屬性來(lái)指定一個(gè)內(nèi)聯(lián)事件處理程序,在按鈕被點(diǎn)擊時(shí)彈出一個(gè)對(duì)話(huà)框。當(dāng)然,使用內(nèi)聯(lián)事件處理程序有時(shí)候會(huì)導(dǎo)致代碼難以維護(hù),因此建議還是優(yōu)先使用addEventListener方法。
需要注意的是,HTML元素可以同時(shí)綁定多個(gè)事件監(jiān)聽(tīng)器。在觸發(fā)事件時(shí),所有監(jiān)聽(tīng)器都將被依次調(diào)用。如果多個(gè)監(jiān)聽(tīng)器操作同一個(gè)元素,它們的執(zhí)行順序?qū)⑷Q于它們被添加的先后順序。
<button id="myBtn">Click Me!</button> <script> var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ console.log("Listener 1"); }); btn.addEventListener("click", function(){ console.log("Listener 2"); }); </script>
上述代碼會(huì)先執(zhí)行第一個(gè)監(jiān)聽(tīng)器,輸出"Listener 1",然后執(zhí)行第二個(gè)監(jiān)聽(tīng)器,輸出"Listener 2"。
除了單擊事件,JavaScript還支持很多其他類(lèi)型的事件,例如blur(失去焦點(diǎn))、focus(獲得焦點(diǎn))、keypress(按下鍵盤(pán)按鍵)、mouseover(鼠標(biāo)移入)、mouseout(鼠標(biāo)移出)等等。每種類(lèi)型的事件都有自己的屬性和方法,可以通過(guò)event對(duì)象來(lái)訪(fǎng)問(wèn)。例如:
<input type="text" id="myInput"> <script> var input = document.getElementById("myInput"); input.addEventListener("keypress", function(event){ console.log(event.which); }); </script>
上面的代碼演示了如何在文本框按下鍵盤(pán)按鍵時(shí)輸出對(duì)應(yīng)的ASCII碼值。我們使用event.which屬性來(lái)獲取按鍵的ASCII碼值,這個(gè)屬性在不同的瀏覽器中有可能不同。
總之,事件是JavaScript中最重要的概念之一,掌握事件處理技巧對(duì)于開(kāi)發(fā)交互式的網(wǎng)頁(yè)應(yīng)用至關(guān)重要。