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!