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选项。

上一章目录下一章