Events in js
What is an event? Events are the responses of computer input devices interacting with pages, which we call
Event Type
- Mouse click: for example, click button, select elements such as checkbox and radio; the mouse enters, levates or exits a hot spot on the page: for example, the mouse stops above a picture or enters the range of the table;
- Keyboard keys: When the key is pressed or released;
- HTML events: For example, when the page body is loaded; select the input box in the form or change the content of the text in the input box: For example, select or modify the content in the text box;
- Mutation event: mainly refers to events triggered when the underlying elements of the document change, such as DomSubtreeModified (DOM subtree modification).
Commonly used events
- onload load completion event: After the page is loaded, it is often used to perform page js code initialization operations
- onclick event: Commonly used for click response operations of buttons.
- onblur Lost Focus Event: It is commonly used to verify whether the input content is legal after the input box loses focus.
- Onchange content changes event: It is often used for operations after the drop-down list and input box content changes.
- onsubmit form submission event: It is often used to verify whether all form items are legal before form submission.
Registration of events
What is the registration (binding) of events?
In fact, it is to tell the browser what operation codes to execute after the event response, called event registration or event binding.
Event registration is divided into static registration and dynamic registration.
- Static registration event: The event attribute of the html tag is directly assigned to the code after the event response. This method is called static registration
- Dynamic registration event: refers to the dom object that is labeled through js code, and then through the dom object. Event name = function(){} This form is assigned to the code after the event response, which is called dynamic registration
Basic steps for dynamic registration:
1. Get the tag object
2. Tag object. Event name = function(){}
Examples of static dynamic registration
onload load completion event
Static binding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static registration</title>
<script type="text/javascript">
// Method of onload event function onloadFun() {
alert('Static registration of onload events, all code');
}
</script>
</head>
<!--Static registrationonload event,onload event是浏览器解析完页面之后就会自动触发的event,bodyProperties of tags，Register with this attribute-->
<body οnlοad="onloadFun();">
</body>
</html>
Dynamic binding:
Fixed writing method, call the method in braces through the(){} method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic registration</title>
<script type="text/javascript">
// onload event dynamic registration. It's a fixed writing method = function () {
alert("Dynamic Registered Onload Event");
}
</script>
</head>
<body>
</body>
</html>
onclick event
For example, from this example, we can better understand the difference in the definitions of the two.
onclick static binding event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("Static registration onclick event");
}
</script>
</head>
<body>
<!--Static registrationonClick event，passbuttonofonclickproperty-->
<button onclick="onclickFun();">Button1</button>
</body>
</html>
onclick dynamic binding event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
= function () {
//getElementById Get the tag object through the id attribute var btnObj = ("btn01");
// 2 Pass the tag object. Event name = function(){} = function () {
alert("Dynamic Registered onclick event");
}
}
</script>
</head>
<body>
<button >Button2</button>
</body>
</html>
The above is the detailed explanation of the concept of JavaScript event (difficult to static registration and dynamic registration). For more information about JavaScript events, please pay attention to my other related articles!