JS Tutorial

Knowledge of JavaScript HTML DOM events

jacklove

May 07, 2018 am 11:10 AM

htmljavascriptjs

JavaScript HTML DOM events play an important role in js. This article provides a detailed explanation of its related knowledge.

Reacting to events

We can execute JavaScript when an event occurs, such as when the user clicks on an HTML element.

To execute code when the user clicks an element, add JavaScript code to an HTML event attribute:

onclick=JavaScript

Example of HTML event:

When the user clicks the mouse

When the web page has loaded

When the image has loaded

When the mouse moves over the element

When the input field is changed

When the HTML form is submitted

When the user triggers a keypress

In this case, when the user clicks on the

element , will change its content:

Instance

<!DOCTYPE html>
<html>
<body>
<h1 id="点击文本">点击文本!</h1>
</body>
</html>

This example calls a function from the event handler:

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 id="点击文本">点击文本!</h1>
</body>
</html>

HTML event attribute

To assign an event to an HTML element, you can use the event attribute.

Assign the onclick event to the button element:

<button onclick="displayDate()">点这里</button>

In the above example, the function named displayDate will be executed when the button is clicked.

Using HTML DOM to assign events

HTML DOM allows you to use JavaScript to assign events to HTML elements:

Assign onclick events to button elements:

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

In the above example, the function named displayDate is assigned to the HTML element with id="myBtn".

The Javascript function will be executed when the button is clicked.

onload and onunload events

onload and onunload events are triggered when the user enters or leaves the page. The

onload event can be used to detect the visitor's browser type and browser version and load the correct version of the web page based on this information.

The onload and onunload events can be used to handle cookies.

Example

<body onload="checkCookies()">

onchange event

onchange event is often used in conjunction with validation of input fields.

The following is an example of how to use onchange. When the user changes the contents of the input field, the upperCase() function is called.

Example

<input type="text" id="fname" onchange="upperCase()">

onmouseover and onmouseout events

The onmouseover and onmouseout events can be used to trigger functions when the user's mouse moves over or out of an HTML element.

onmousedown, onmouseup and onclick events

onmousedown, onmouseup and onclick make up all parts of the mouse click event. First when the mouse button is clicked, the onmousedown event is fired, when the mouse button is released, the onmouseup event is fired, and finally, when the mouse click is completed, the onclick event is fired.

This article has some understanding of the relevant knowledge of DOM events. For more learning materials, please pay attention to the php Chinese website to view.

Related recommendations:

Understanding and usage of JavaScript timing events

Understanding and using JavaScript Cookies

The above is the detailed content of Knowledge of JavaScript HTML DOM events. For more information, please follow other related articles on the PHP Chinese website!

Statement

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