JavaScript 事件类型，事件绑定，事件监听

Posted 2021-06-08 QXXXD

• 事件类型
• 事件绑定
• 事件监听

事件类型

鼠标事件：

• onclick：鼠标单击对象时触发
• ondblclick：鼠标双击对象时触发
• onmousedown：鼠标按钮被按下时触发
• onmousemove：鼠标被移动时触发
• onmouseout：鼠标离开监听该事件的元素或子元素时触发
• onmouseover：鼠标移动到监听该事件的元素或子元素时触发
• onmouseup：鼠标按键被松开时触发
• mouseenter：在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；
• mouseleave：鼠标移出；

键盘事件：

• onkeydown：键盘按键按下触发
• keypress：键盘按键按住触发
• keyup：键盘按键松开触发

HTML事件：由html 表单内部的动作触发的事件。

• onblur script：当元素失去焦点时触发
• onchange script：当元素改变时触发
• oncontextmenu script：当触发上下文菜单时触发
• onfocus script：当元素获得焦点时触发
• onformchange script：当表单改变时触发
• onforminput script：当表单获得用户输入时触发
• oninput script：当元素获得用户输入时触发
• oninvalid script：当元素无效时触发
• onreset script：当表单重置时触发
• onselect script：当选取元素时触发
• onsubmit script：当提交表单时触发

---

事件绑定

要想让 javascript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。
在JavaScript中，有三种常用的绑定事件的方法：

• 在DOM元素中直接绑定；
• 在JavaScript代码中绑定；
• 绑定事件监听函数。

在DOM中直接绑定事件：

<input type="button" value="click me" onclick="hello()">
 
<script>
function hello(){
    alert("hello world!");
}
</script>

在JavaScript代码中绑定事件

<input type="button" value="click me" id="btn">
 
<script>
document.getElementById("btn").onclick = function(){
    alert("hello world!");
}
</script>

使用事件监听绑定事件
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

---

事件监听

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

addEventListener()

语法：

element.addEventListener(event, function, useCapture)

• event : 事件名，支持所有 DOM事件 。
• function：指定要事件触发时执行的函数。
• useCapture：指定事件是否在捕获或冒泡阶段执行。(true，捕获。false，冒泡。默认false。)

<input type="button" value="click me" id="btn1">
 
<script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
    alert("hello world!");
}
</script>

attachEvent()

语法：

element.attachEvent(event, function)

• event：事件类型。需加 “on”。
• function：指定要事件触发时执行的函数。

<input type="button" value="click me" id="btn2">
 
<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
    alert("hello world!");
}
</script>

事件监听的优点：

• 可以绑定多个事件。
• 可以解除相应的绑定