HTML DOM - Events
HTML DOM allows JavaScript to react to HTML events.
React to events
JavaScript can be executed when an event occurs, such as when a user clicks on an HTML element.
To execute code when the user clicks on an element, add JavaScript code to the HTML event attribute:
Examples of HTML events:
When the user clicks the mouse
When the web page has loaded
When the image is 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 key press
In this case , when the user clicks, the content of the <h1> element will be changed:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> </body> </html>
Run Example»
Click the "Run Instance" button to view the online instance
In this example, the function will be called from the event handler:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html> Run instance»
Click the "Run instance" button to view the online instance
HTML event attributes
If needed To assign events to HTML elements, you can use the event attribute.
Instance
<!DOCTYPE html>
<html>
<html>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button onclick="displayDate()">Try it</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
In the above example, when the button is clicked, the function named displayDate will be executed.
Using the HTML DOM to assign events
HTML DOM allows you to use JavaScript to assign events to HTML elements:
Example
<html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html> Run Instance»
Click the "Run Instance" button to view the online instance
In the above example, the function named displayDate is assigned to HTML element with id=myButn".
When the button is clicked, the function will be executed.
onload and onunload events
When the user enters or leaves the page When the onload and onunload events are triggered, the onload event can be used to check the browser type and version of the visitor so that different versions of the web page can be loaded based on this information. For processing cookies.
Instance<html><!DOCTYPE html>
<html>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>
</html>onchange event
onchange event is often used for input field validation.
The following example shows how to use onchange. When the user changes the contents of the input field, the upperCase() function is called.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
onmouseover and onmouseout events
The onmouseover and onmouseout events can be used to trigger functions when the mouse pointer moves to or from an element.
Instance
<html><!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
onmousedown, onmouseup and onclick events
onmousedown, onmouseup and onclick events are the entire process of mouse click. First, when a mouse button is clicked, the onmousedown event is triggered. Then, when the mouse button is released, the onmousedown event is triggered. onmouseup event, and finally, when the mouse click is completed, the onclick event is triggered.
Instance
<html><!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
HTML DOM Event Object Reference Manual
For a complete description and examples of each event, please visit our HTML DOM Reference Manual.
