Home > Web Front-end > JS Tutorial > body text

An introduction to events in JS

小云云
Release: 2018-02-27 14:21:34
Original
1233 people have browsed it

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 事件处理函数(功能)
  需要根据具体业务场景来实现
Copy after login

4 Mouse event
Mouse-related events

事件名称        事件的触发场景

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

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        当失去焦点的时候触发
Copy after login

7 Window events
Window-related events Window loading Window change

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

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

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template