Please indicate the source of the reprint: http://blog.csdn.net/zhaoyanjun6/article/details/126508434
This article comes from [Zhao Yanjun's blog]
Article directory
HTML events are things that happen to HTML elements.
JavaScript can trigger these events when used in an HTML page.
Click event, change the content of other controls
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script>
</script>
</head>
<body>
<button onclick="getElementById('demo').innerHTML= Date()">点击吧</button>
<p id="demo">初始值</p>
</body>
</html>
The effect is as follows:
Click event, change the content of your control
The code will modify the content of its own element (using this.innerHTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script>
</script>
</head>
<body>
<button onclick="innerHTML= Date()">点击吧</button>
</body>
</html>
The effect is as follows:
Function to modify the content of the control
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<button id="btn" onclick="changeBtn()">点击吧</button>
<script>
function changeBtn() {
document.getElementById('btn').innerHTML = Date()
}
</script>
</body>
</html>
The effect is as follows:
mouse event
- onclick Event handler that is called when the user clicks on an object.
- oncontextmenu fires when the user clicks the right mouse button to open the context menu
- ondblclick Event handler that is called when the user double-clicks on an object.
- onmousedown The mouse button is down.
- onmouseenter Fires when the mouse pointer moves over an element
- onmouseleave Fires when the mouse pointer leaves the element
- onmousemove mouse is moved
- onmouseover mouse over an element
- onmouseout The mouse moves away from an element
- onmouseup mouse button is released
Example: Move the mouse to the control
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--鼠标移动到 button-->
<button id="btn" onmouseenter="changeBtn()">点击吧</button>
<script>
function changeBtn() {
document.getElementById('btn').innerHTML = Date()
}
</script>
</body>
</html>
Example: Triggered when the context menu is opened
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--打开上下文菜单-->
<button id="btn" oncontextmenu="changeBtn()">点击吧</button>
<script>
function changeBtn() {
document.getElementById('btn').innerHTML = Date()
}
</script>
</body>
</html>
Function to get control property value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script>
function changeBtn() {
//获取button属性值
const v = document.getElementById('input').value
//获取input属性值
const c = document.getElementById('btn').textContent
console.info("获取控件属性 button： " + v + " input: " + c)
}
</script>
<button id="btn" onclick="changeBtn()">点击吧</button>
<input id="input" value="默认值"/>
</body>
</html>
The renderings are as follows:
