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中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击！</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中文网(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">点击</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中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<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><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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中文网(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>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中文网(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="鼠标请移动至此"
}
</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中文网(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.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
