JavaScript HTML DOM events
Event
Event is a certain action performed by the user or the browser itself, such as click, load and mouseover are both event names.
Events are the bridge between javaScript and DOM.
If you trigger it, I will execute it - when the event occurs, its handler function is called to execute the corresponding JavaScript code to give a response.
Typical examples include: the load event is triggered when the page is loaded; the click event is triggered when the user clicks on an element.
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
HTML Examples of events:
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊！</h1>
</body>
</html>To assign an event to an HTML element, you Event properties can be used.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">點(diǎn)擊</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>HTML DOM allows you to use JavaScript to assign events to HTML elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
</head>
<body>
<button id="myBtn">點(diǎn)這里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function load(){
alert("頁面加載完成");
}
</script>
</head>
<body onload="load()">
</body>
</html>onchange event The onchange event is often used in conjunction with validation of input fields. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>當(dāng)你離開輸入框后，將小寫字母轉(zhuǎn)為大寫字母。</p>
</body>
</html>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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:yellow;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="鼠標(biāo)請移動(dòng)至此"
}
</script>
</body>
</html>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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
keynum = window.event ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
</script>
</head>
<body>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>Other events:
onmousedown and onmouseup
Change an image when the user presses the mouse button.
onload
When the page completes loading, a prompt box is displayed.
onfocus
Changes the background color of an input field when it gets focus.
Mouse events
When the pointer moves over the element, its color changes; when the pointer moves out of the text, it changes its color again.
