更新时间:2021-10-20 来源:黑马程序员 浏览量:
什么是事件？
事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标的单击/双击、鼠标指针滑某个区域等具体的动作，它对实现页面的交互效果起着非常重要的作用。事件由事件源、事件类型和事件处理程序3部分构成，又被称为“事件三要素”。
事件三要素
事件源：触发(被)事件的元素
事件类型：事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序：事件触发后要执行的代码(函数形式)
以上的三个要素可以简单理解为“谁触发了事件”、“触发了什么事件”、“触发了事件之后要做什么”。
1.行内方式绑定(元素属性)
JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
产品经理
集成电路应用开发
<!-- 形式一 -->
<body>
// onclick 其实就是html元素的一个属性，而属性的值需要是 一段可执行的JS代码
<input type="button" value="按钮" id="btn" onclick="alert(2)">
</body>
<!-- 形式二 -->
<body>
<input type="button" value="按钮" id="btn" onclick="f()">
</body>
<script>
function f(){
console.log(3);
}
</script>
行内方式绑定处理函数中this指向的window对象；违反了HTML与JavaScript代码相分离的原则，一般不用。
2.动态绑定 (节点对象属性)
<body>
<input type="button" value="按钮" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(4);
}
</script>
获取节点对象，然后修改节点对象的属性onclick的值，值是一个匿名函数即可；
动态绑定缺点是同一元素同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次；处理函数中的this指向的选中的对象。
3.事件监听(节点对象方法)
<body>
<input type="button" value="按钮" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert(5);
});
</script>
每一个节点对象都提供了addEventListener方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序。
移除事件监听
<body>
<input type="button" value="按钮" id="btn">
</body>
<script>
function f(){
alert(5);
}
var btn = document.getElementById('btn');
btn.addEventListener('click',f);
btn.removeEventListener('click',f);
</script>
注意：removeEventListener方法移除的监听函数，必须与对应的addEventListener方法的参数完全一致，而且必须在同一个元素节点，否则无效。
事件监听的addEventListener方法可以针对同一个元素的同一个事件，添加多个监听处理函数。 处理函数中的this指向的也是选中的元素。
.jpg)