Event 基础
事件是什么
事件是动作
事件仅仅是一个字符串名字，用来通知浏览器窗口内发生了什么动作。动作的发出者可能是用户的输入设备，也可能是浏览器窗口。比如，操作DOM时的一些常见事件:
- load: 页面加载事件
- click: 点击事件
- mouseover: 鼠标悬停事件
- submit: 提交表单事件
- keydown: 键盘按下事件
事件的触发
- 原生事件：即浏览器的内置事件，由浏览器触发。当你单击按钮时，'click'事件自动被浏览器触发；当你三连击或五连击按钮时，该事件不会触发，因为浏览器没有为按钮定义该事件。
- 自定义事件: 通过
元素.dispatchEvent()触发。
事件处理程序
事件处理程序就是事件发生时执行的函数(任务)。
注册事件处理程序
当事件发生时，我们需要为发生事件的元素注册事件处理程序。如果不注册，当事件发生时，什么也不会发生。
从JS的发展历程讲，注册事件处理程序分为四种种方式：
- HTML事件处理程序
- DOM0事件处理程序
- DOM2事件处理程序
- IE事件处理程序
通过标签属性注册
通过标签的属性注册事件处理程序是HTML提供的方式。
语法
<标签 on事件名称 = "JavaScript代码"></标签>
- 属性名：以
on开头，后紧跟事件名称。 - 属性值: 必须是能够执行的 JavaScript 代码。
演示: 点击按钮时的HTML事件处理程序
<button onclick="console.log('Hello World')">打印</button>
<button onclick="alert('Hello World')">弹窗</button>
<button onclick="alert("Hello World")">弹窗</button>
<button title="按钮" onclick="fn1()">打印</button>
<button title="按钮" onclick="fn2(this)">打印</button>
<script>
function fn1(){
console.log(this);
}
function fn2(value){
console.log(value);
}
</script>
通过DOM属性注册
通过DOM属性注册事件处理程序是DOM0中提供的方式。
addEventListener()
定义
通过addEventListener()注册事件处理程序是DOM2中提供的方法。该方法适用于DOM中的所有元素对象。
语法
元素.addEventListener('事件名称',function(ev){},布尔值)
-
事件名称: 小写的事件名称字符串（不带on)。
-
function: 事件处理函数。
- ev: 表示事件对象。该处理函数调用时由该方法自动传入的事件对象。
-
布尔值:
- true 表示在捕获阶段调用事件处理程序。
- false(默认值)表示在冒泡阶段调用事件处理程序。
removeEventListener()
removeEventListener()
IE事件处理程序
事件对象
在 DOM 中，当事件被触发后，会自动创建一个event事件对象。 event对象存储了所有与该事件相关的信息。比如触发事件的元素、事件的类型，或特定事件相关信息。
演示：鼠标的点击事件会产生一个event对象，包含点击事件相关的信息
使用addEventListener()注册事件处理程序中的事件对象
<button>按钮</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click',function(ev){
console.log(ev);
},false)
</script>
使用DOM属性注册事件处理程序中的事件对象
<button>按钮</button>
<script>
const btn = document.querySelector('button')
btn.onclick = function(ev){
console.log(ev);
}
</script>
HTML事件处理程序中的特殊”event“对象
<button onclick="showInfo(event)">按钮</button>
<script>
function showInfo(ev) {
console.log(ev)
}
</script>
输出结果：
click{
target: <button>,//事件目标元素
type: "click", //事件类型
x: 34,
y: 19,
clientX: 34,
clientY: 19,
screenX: 981,
screenY: 141,
offsetX: 0,
offsetY: 0,
pageX: 34,
pageY: 19,
detail: 1,//事件相关的其他信息
which: 1,
altKey: false,
shiftKey: false,
ctrlKey: false,
bubbles: true, //查询事件是否冒泡
button: 0,
buttons: 0,
cancelBubble: false,//查询事件是否可以取消
cancelable: true,
composed: true,
currentTarget: null, //当前事件处理程序所在的元素
defaultPrevented: false, //false表示未调preventDefault()方法
eventPhase: 0,//表示调用事件处理程序的阶段:1 代表捕获阶段，2 代表到达目标，3 代表冒泡阶段
explicitOriginalTarget: <button>,
isTrusted: true,
layerX: 34,
layerY: 19,
metaKey: false,
movementX: 0,
movementY: 0,
mozInputSource: 1,
mozPressure: 0,
originalTarget: <button>,
rangeOffset: 0,
rangeParent: null,
relatedTarget: null,
returnValue: true,
srcElement: <button>,
timeStamp: 3020,
view: Window http://127.0.0.1:5500/0220/3-click.html,
}
例如，，而键盘操作导致的事件会生成与被按下的键有关的信 息。，尽管支持方式不同
