An introduction to events in JS

1 Event

Events can be understood as the interactive behavior between the user and the browser

2 Event function binding
Event function: When an event occurs, the specific response plan used to handle the event is the event processing function
It shows up as some code blocks
For example: When the mouse clicks (event) - what action does it take? It is done by the event handling function
When the keyboard is pressed (press Enter the key) -What to do?

Summary: Note that event occurrence and event processing function are different concepts
After the event occurs, there can be an event processing function to do the corresponding thing, or there can be no event processing function
If there is no event processing function , will not affect the occurrence of the event, what should happen will still happen.
As for what to do, it is decided by the event processing function

3 How to learn events
1 Some common events are specified in js, such as: mouse click, mouse press, mouse lift, mouse movement
, move the mouse in and out...
There are two parts to master about the event: 1) Event name (onclick\onmouseover) 2) Corresponding trigger scene
The name of the event and the triggering scene must be remembered (do more exercises and copy by hand)

2 事件处理函数（功能）
  需要根据具体业务场景来实现

4 Mouse event
Mouse-related events

事件名称        事件的触发场景

onmousedown     当鼠标按下的时候触发
onmouseup       当鼠标抬起的时候触发
onmouseover     当鼠标移入的时候触发
onmouseout      当鼠标移出的时候触发
onclick         当鼠标点击的时候触发
ondblclick      当鼠标双击的时候触发
onmousemove     当鼠标移动的时候触发
oncontextmenu   当鼠标右键的时候触发（可以自定义右键菜单）

5 Keyboard events
Keyboard-related events Keyboard (key) pressed Keyboard lifted
onkeydown Triggered when the keyboard is pressed
onkeyup Trigger

6 form event
when the keyboard is lifted Form-related events Form submission Obtain focus Lose focus

onsubmit     当表单提交的时候触发
onchange     当修改表单字段的时候触发(内容改变就会触发)
onfocus      当获取到焦点的时候触发
onblur        当失去焦点的时候触发

7 Window events
Window-related events Window loading Window change

onload      当对象加载完成以后触发
onresize    当窗口改变的时候触发

8 Event object event
The event object is an object used to record event-related information when an event occurs
The event object is understood as: the black box of the aircraft and the driving recorder of the car

Key point: remember the compatibility solution var ev = ev || event
keyCode Keyboard code Enter 13 Space 32 Control direction
clientX, clientY The coordinates of the mouse in the browser's visible area
offsetLeft, offsetTop

9 Event bubbling
Event bubbling mechanism – phenomenon
The impact of event bubbling
Prevent events from bubbling
Application of event bubbling

创建元素、添加子元素
事件源
事件委托

Related recommendations:

Detailed explanation of the event loop in JS and Node.js

in node.js Detailed explanation of the event processing mechanism

Instance analysis of event capture model and bubbling model in js_javascript skills

The above is the detailed content of An introduction to events in JS. For more information, please follow other related articles on the PHP Chinese website!