JS事件三要素
事件是有三部分组成 事件源 事件类型 事件处理程序 这就是所谓的时间三要素。
事件源: 事件被触发的对象 例如一个按钮
事件类型: 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
事件处理程序: 通过一个函数赋值的方式 完成
例如如下程序
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮,弹出对话框
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('点秋香');
}
// 该程序中btn代表事件源、onclick代表事件类型、function() {......}代表事件处理程序
</script>
</body>
在了解了事件三要素后,简单记录下执行事件过程,执行过程分为三步
- 获取事件源
- 绑定事件
- 添加事件处理程序
举个例子如下所示
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1.首先获取数据源,该例子中数据源为div
var div = document.querySelector('div');
// 2.绑定事件 注册事件,该例子中为当鼠标点击div
// div.onclick
// 3.添加事件处理程序 该例子中为控制台输出指定字符。
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>