Javascript中事件名是非常重要的一個概念,它定義了當某些特定動作發(fā)生時所觸發(fā)的函數(shù)。以HTML為例,當你點擊一個鏈接時,會觸發(fā)一個事件,即“點擊事件”(click event)。而Javascript中,則有更多的事件可以利用。
下面舉例說明兩種常用的事件名:
<button id="myButton">點擊我</button> <script> var myButton = document.getElementById("myButton"); // 點擊事件 myButton.addEventListener("click", function() { alert("你點擊了我!"); }); // 鼠標懸停事件 myButton.addEventListener("mouseover", function() { this.style.backgroundColor = "gray"; }); // 鼠標移出事件 myButton.addEventListener("mouseout", function() { this.style.backgroundColor = ""; }); </script>
在上面的代碼中,我們定義了一個按鈕,并在其上添加了三個事件監(jiān)聽器。分別是:點擊事件、鼠標懸停事件、鼠標移出事件。這些事件都是在我們進行特定操作時所觸發(fā)的。
下面介紹一些常用的事件名:
1. 點擊事件(click)
<button id="myButton">點擊我</button> <script> var myButton = document.getElementById("myButton"); myButton.addEventListener("click", function() { alert("你點擊了我!"); }); </script>
2. 雙擊事件(dblclick)
<button id="myButton">雙擊我</button> <script> var myButton = document.getElementById("myButton"); myButton.addEventListener("dblclick", function() { alert("你雙擊了我!"); }); </script>
3. 鼠標移入事件(mouseover)
<div id="myDiv">鼠標移入這里</div> <script> var myDiv = document.getElementById("myDiv"); myDiv.addEventListener("mouseover", function() { this.style.backgroundColor = "gray"; }); myDiv.addEventListener("mouseout", function() { this.style.backgroundColor = ""; }); </script>
4. 鼠標移出事件(mouseout)
<div id="myDiv">鼠標移出這里</div> <script> var myDiv = document.getElementById("myDiv"); myDiv.addEventListener("mouseover", function() { this.style.backgroundColor = "gray"; }); myDiv.addEventListener("mouseout", function() { this.style.backgroundColor = ""; }); </script>
5. 鍵盤按下事件(keydown)
<input type="text" id="myInput"> <script> var myInput = document.getElementById("myInput"); myInput.addEventListener("keydown", function(e) { alert("你按下了:" + e.key); }); </script>
除了以上提到的事件名,還有很多其它常用的事件名,如:改變事件(change)、自動完成事件(autocomplete)、拖拽事件(drag)、滾動事件(scroll)等等。
總之,在Javascript中,事件名非常重要,它可以讓你在特定操作發(fā)生時,觸發(fā)相應(yīng)的函數(shù),從而實現(xiàn)網(wǎng)頁的各種交互和動態(tài)效果。要熟練掌握常用的事件名,對于成為一名優(yōu)秀的Javascript開發(fā)人員是至關(guān)重要的。