DOM events
#HTML DOM gives JavaScript the ability to react to HTML events.
React 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 on an element, add JavaScript code to an HTML event attribute:
Examples of HTML events:
When the user clicks the mouse
When the web page has loaded
When the image has loaded
When the mouse is moved over the element
When the input field is changed
When the HTML form is submitted
When the user triggers a key press
In this example, when When the user clicks on the <h1> element, its content will change:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(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
This example calls a function from the event handler:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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 attribute
If you need to assign it to the HTML element Events, you can use event properties.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</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, the function named displayDate will be executed when the button is clicked.
Using the HTML DOM to dispatch events
HTML DOM allows you to use JavaScript to dispatch events to HTML elements:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</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 Give the HTML element with id=myButn".
The Javascript function will be executed when the button is clicked.
onload and onunload events
onload and onunload events will be Fired when a user enters or leaves a 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 onunload event can be used to handle cookies. Example
onchange event
The 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.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>弹窗-提示浏览器cookie是否可用。</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 user's mouse moves over or out of an HTML element.
Example
A simple onmouseover-onmouseout example:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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
onmousedown, onmouseup and onclick events
onmousedown, onmouseup and onclick Makes 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.
Example
A simple onmousedown-onmouseup example:
More examples
onmousedown and onmouseup
Change an image when the user presses the mouse button.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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
onload
When the page completes loading, a prompt box is displayed.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function lighton(){
document.getElementById('myimage').src="/upload/course/000/000/009/5804353cb2562758.gif";
}
function lightoff(){
document.getElementById('myimage').src="/upload/course/000/000/009/580432b53cb5d221.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/upload/course/000/000/009/580432b53cb5d221.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
onfocus
Changes the background color of an input field when it gets focus.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function mymessage(){
alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>
<body onload="mymessage()"></body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Mouse events
When the pointer moves over the element, its color is changed; when the pointer moves out of the text, its color is changed again.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
</head>
<body>
输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>
</body>
</html>Run Instance »
Click the "Run Instance" button to view the online instance
