- HTML 5與CSS 3權威指南（第4版·上冊）
- 陸凌牛
- 340字
- 2019-03-04 18:28:56
2.6 只監聽一次事件
HTML 5中對元素對象的addEventListener方法進行了擴充，允許開發者將該方法的第三個參數定義為一個配置對象，從而設置一個附加的選項，允許在配置對象中添加once屬性值，用以讓事件監聽器只監聽一次。
讓事件監聽器只監聽一次的代碼使用示例如代碼清單2-3所示。
代碼清單2-3 讓事件監聽器只監聽一次
<!DOCTYPE html>
<head>
<meta charset="utf-8 ">
<title>讓事件監聽器只監聽一次</title>
</head>
<input type="button" value="點擊我"></input>
<script>
document.getElementById("button").addEventListener("click",function(){
alert("按鈕被點擊!");
},{
once: true
});
</script>
在瀏覽器中打開示例頁面，鼠標單擊“點擊我”按鈕，瀏覽器中彈出“按鈕被點擊”提示信息，如圖2-4所示。
圖2-4 第一次單擊按鈕時瀏覽器中彈出提示信息
用戶鼠標再次單擊“點擊我”按鈕后瀏覽器中不彈出任何提示信息，由于將addEventListener方法的第三個參數對象的once屬性值設置為true，click事件處理函數只在用戶鼠標第一次單擊“點擊我”按鈕時起作用。
目前，Chrome 55以上、Firefox 50以上以及Safari 7以上版本的瀏覽器支持once選項。
推薦閱讀
- 黑客攻防從入門到精通（實戰秘笈版）
- Python數據分析入門與實戰
- 摩登創客：與智能手機和平板電腦共舞
- Android Development with Kotlin
- Java面向對象程序開發及實戰
- PLC編程及應用實戰
- 深入理解Elasticsearch（原書第3版）
- 第一行代碼 C語言（視頻講解版）
- Learning Continuous Integration with TeamCity
- Internet of Things with ESP8266
- Oracle GoldenGate 12c Implementer's Guide
- 小程序，巧應用：微信小程序開發實戰（第2版）
- Arduino可穿戴設備開發
- Arduino Wearable Projects
- 少兒編程輕松學（全2冊）