A brief analysis of the event mechanism in JavaScript

A brief analysis of the event mechanism in JavaScript_Basic knowledge

WBOY

Release： 2016-05-16 15:56:44

Original

1385 people have browsed it

What is the event?

JavaScript interacts with HTML through events that occur on the page when the user or browser manipulates it.

When the page loads, this is an event. When the user clicks a button, this is an event. Another example of events are like pressing any key, closing window, resizing window, etc.

Developers can use these events to perform JavaScript-encoded responses, which cause buttons to close the window, messages to be displayed to the user, data to be validated, and virtually any other type of response that can occur.

Events are Level 3 of the Document Object Model (DOM). Every HTML element has a set of events that can trigger JavaScript code.

Example:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

Copy after login

This will produce the following result, when you click the "Hello" button, then the onclick event will trigger the sayHello() function.

onsubmit event type:

Another most important event type is onsubmit. This event is raised when an attempt is made to submit the form. Therefore, you can target form validation to this event type.

The following is a simple example to illustrate its usage. Here, we call a validate() function before submitting the form data to the web server. The validate() function returns true if the form will be submitted, otherwise the data will not be submitted.
Example:

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
  all validation goes here
  .........
  return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

Copy after login

onmouseover and onmouseout:

These two event types will help create nice effects with pictures or even text. When the mouse is placed on any element, the onmouseout event occurs when the mouse is moved out of the element, and the onmouseover event occurs when the mouse moves over.
Example:

The following example shows that the group response is as follows:

<html>
<head>
<script type="text/javascript">
<!--
function over() {
  alert("Mouse Over");
}
function out() {
  alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

Copy after login

You can use these two event types to change different images and also create users to help you.
HTML 4 standard events

Standard HTML4 events are listed here for your reference. The script below displays a Javascript function to execute on this event.

201564104949263.jpg (616×728)