References
Table of contents
common events
mouse event
| event | trigger timing |
|---|---|
| click | When the primary mouse button is pressed and released on an element |
| dblclick | When the primary button of the mouse is clicked twice on a single element |
| context menu | when the user tries to open the context menu |
| mousedown | When the mouse button is pressed inside the element |
| mouseup | When the mouse button is released inside the element |
| mouseenter | When the mouse first moves inside the element's active area |
| mouseleave | Fired when the mouse pointer moves out of an element |
| mousemove | When the mouse cursor moves within the element |
keyboard events
| event | trigger timing |
|---|---|
| keypress | when a key that yields a character or symbol value is pressed已弃用 |
| keydown | When a keyboard key is pressed (fires for all keys) |
| keyup | Fired when the key is released |
Focus events
| event | trigger timing |
|---|---|
| focus | When an element gets focus |
| blur | when the element loses focus |
Add event listener
Method 1: addEventListener() (recommended)
grammar
addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);
parameter
| parameter name | type | must | illustrate |
|---|---|---|---|
| type | String | yes | Listener event type (case sensitive) |
| listener | Function | yes | When the monitored event type is triggered, an event notification Event object will be received |
| options | Object | optional | An optional parameter object specifying properties about the listener |
| useCapture | Boolean | optional | False event bubbling; true event capture |
options optional value
| parameter name | type | must | illustrate |
|---|---|---|---|
| capture | Boolean | optional | event capture |
| once | Boolean | optional | The listener is called at most once |
| passive | Boolean | optional | Indicates that the listener will never call preventDefault() |
| signal | AbortSignal | optional | When the abort() method of this AbortSignal is called, the listener will be removed. |
Example: Binding input to get focus event
<input
type="text"
id="input-name"
/>
<script>
let inputName = document.querySelector('#input-name')
inputName.addEventListener('focus', (event) => {
console.log(event)
})
</script>
The addEventListener method can add multiple listeners on a single event
<button>按钮</button>
<script>
const btn = document.querySelector('button')
// 添加多个事件处理器
btn.addEventListener('click', () => {
console.log('处理器1')
})
btn.addEventListener('click', () => {
console.log('处理器2')
})
</script>
Method 2: Event handler properties
Example: Binding the click event to a div element
<style>
#box {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
<div id="box"></div>
<script>
let box = document.querySelector('#box')
box.onclick = (event) => {
console.log(event)
}
</script>
Event handler properties, you cannot add more than one handler for an event, as any subsequent attempts will overwrite earlier set properties
Method 3: Inline event handler (not recommended)
<input
type="text"
onfocus="handleFocus()"
/>
<script>
function handleFocus(event) {
let e = event || window.event
console.log(e)
}
</script>
You should never use HTML event handler attributes - those are obsolete and it is bad practice to use them.
remove listener
Method 1: removeEventListener
<button>按钮</button>
<script>
function handleButtonClick(event) {
console.log(event)
}
const btn = document.querySelector('button')
// 添加事件处理器
btn.addEventListener('click', handleButtonClick)
// 移除监听器
btn.removeEventListener('click', handleButtonClick)
</script>
Method 2: AbortController
<button>按钮</button>
<script>
function handleButtonClick(event) {
console.log(event)
}
const controller = new AbortController()
const btn = document.querySelector('button')
// 添加事件处理器
btn.addEventListener('click', handleButtonClick, {
signal: controller.signal, // 向该处理器传递 AbortSignal
})
// 移除任何/所有与该控制器相关的事件处理器
controller.abort()
</script>
event control
prevent default behavior preventDefault
There is only one input box in the form, and the default keyboard will submit the form after pressing Enter, which can prevent this default behavior
<!-- 表单 -->
<form id="form">
<input
type="text"
id="name"
/>
</form>
<script>
const form = document.querySelector('#form')
form.addEventListener('submit', (e) => {
e.preventDefault()
console.log('submit');
})
</script>
event bubbling
When the button is clicked, the outer container will also receive the click event
<div id="box">
<button>点击</button>
</div>
<script>
const btn = document.querySelector('button')
const box = document.querySelector('#box')
btn.addEventListener('click', (e) => {
console.log('btn click')
})
box.addEventListener('click', (e) => {
console.log('box click')
})
</script>
output order
btn click
box click
Prevent event bubbling stopPropagation
stopPropagationEvents can be prevented from continuing to propagate using
<div id="box">
<button>点击</button>
</div>
<script>
const btn = document.querySelector('button')
const box = document.querySelector('#box')
btn.addEventListener('click', (e) => {
e.stopPropagation() // 阻止冒泡
console.log('btn click')
})
box.addEventListener('click', (e) => {
console.log('box click')
})
</script>
event capture
<div id="box">
<button>点击</button>
</div>
<script>
const btn = document.querySelector('button')
const box = document.querySelector('#box')
btn.addEventListener(
'click',
(e) => {
console.log('btn click')
},
{
capture: true }
)
box.addEventListener(
'click',
(e) => {
console.log('box click')
},
{
capture: true }
)
</script>
output (in reverse order of bubbling)
box click
btn click
event delegation
Event bubbling can be used to implement event delegation and simplify code
simple event listener
<div id="box">
<button id="buttonA">点击A</button>
<button id="buttonB">点击B</button>
</div>
<script>
const buttonA = document.querySelector('#buttonA')
const buttonB = document.querySelector('#buttonB')
buttonA.addEventListener('click', (e) => {
console.log('buttonA click')
})
buttonB.addEventListener('click', (e) => {
console.log('buttonB click')
})
</script>
Use event delegation to only listen to events on outer elements
<div id="box">
<button id="buttonA">点击A</button>
<button id="buttonB">点击B</button>
</div>
<script>
const box = document.querySelector('#box')
box.addEventListener('click', (e) => {
// 事件触发元素 buttonA / buttonB
console.log(e.target)
// 获取元素id属性
let targetId = e.target.getAttribute('id')
console.log(targetId)
// 处理元素 box
console.log(e.currentTarget)
})
</script>
reference article