在前面我们已经把最常用的一些事件类型做了详细说明，下面用一个简单的案例来演示一下事件的实际应用。
在下面的案例中，我们的需求是：下载按钮只有第一次点击有效，之后的多次点击均无效。
我们通过js动态绑定和事件监听两种方式来实现这个需求。
请看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="下载" id="btn">
<script type="text/javascript">
//需求，下载按钮只能点一次,多次点击无效
//方式一：js动态绑定
//获取标签
var btn = document.getElementById('btn');
//给下载按钮绑定事件
btn.onclick = function(){
//这里写下载的具体的处理逻辑。
console.log('下载中...');
//在最后面移除事件
btn.onclick = '';
}
//方式二：事件监听方式绑定
// function fn(){
// //具体的处理
// console.log('下载中...');
// //移除事件
// btn.removeEventListener('click', fn);
// }
// btn.addEventListener('click', fn);
</script>
</body>
</html>
在上面的案例中，事件函数中的代码只会执行一次，无论点击多少次下载按钮。因为代码执行完第一次后我们就移除了事件绑定。
请大家动手测试一下，务必理解这个逻辑。
|
窥视卡
雷达卡
发表于 2023-1-25 11:40:54
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 00:29:10
