前言:
介绍了什么是事件以及原理,还有常用的事件及使用
**如果演示结果不好理解,可以复制代码到自己的电脑中运行,这样你们可以更好理解也可以研究出好玩的,研究出的话顺便发给我也玩玩
JavaScript中的事件是指发生在HTML元素上的事情。当在HTML页面中使用JavaScript时,JavaScript可以触发这些事件。这些事件可以是浏览器行为,也可以是用户行为,例如单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等。
当事件发生时,可以使用JavaScript中的事件处理程序(也可称为事件监听器)来检测并执行某些特定的程序。例如,当用户点击一个按钮时,可以执行一段JavaScript代码来响应该点击事件。
鼠标事件指通过鼠标触发的事件。
属性名 | 描述 |
---|---|
onclick | 鼠标单击时触发此事件 |
ondblclick | 鼠标双击时触发此事件 |
onmousedown | 鼠标按下时触发此事件 |
onmouseup | 鼠标弹起时触发的事件 |
onmousemove | 鼠标移动时触发此事件 |
onmouseover | 鼠标移动到某个设置了此事件的元素上时触发此事件 |
onmouseout | 鼠标从某个设置了此事件的元素上离开时触发此事件 |
onscroll | 当滚动元素的滚动条运行时 |
onmousewheel | 当鼠标的滚轮运行时 |
鼠标单击事件
鼠标点击指定元素就会调用特定的js代码。
代码示例:
<body>
<input type="button" value="鼠标点击一下" onclick="f()">
<script>
function f() {
console.log("鼠标单击了一下");
}
script>
body>
鼠标双击事件
鼠标双击指定的元素就会调用特定的js代码。
代码示例:
<body>
<input type="button" value="鼠标双击一下" ondblclick="f()">
<script>
function f() {
console.log("鼠标双击了一下");
}
script>
body>
鼠标按下事件
鼠标按下指定的元素就会调用特定的js代码。
代码演示:
<body>
<input type="button" value="鼠标点击一下" onmousedown="f()">
<script>
function f() {
console.log("鼠标按了一下");
}
script>
body>
鼠标弹起事件
鼠标按下指定元素并松开就会调用特定的js代码。
代码示例:
<body>
<input type="button" value="鼠标点击一下" onmouseup="f()">
<script>
function f() {
console.log("鼠标按下按钮又松开了");
}
script>
body>
鼠标移动事件
鼠标在指定元素上移动就会调用特定的js代码。
代码演示:
<body>
<div style="width: 100px;height: 100px;background-color: red" onmousemove="f()">
div>
<script>
function f() {
console.log("鼠标在指定元素中移动了");
}
script>
body>
鼠标移动到指定元素事件
鼠标移动到指定元素上就会调用特定的js代码,跟上面那个不一样,这个进入了只会调用一次代码,只有重新进入才会再次调用。
代码演示:
<body>
<div style="width: 100px;height: 100px;background-color: red" onmouseover="f()">
div>
<script>
function f() {
console.log("鼠标进入了DIV");
}
script>
body>
鼠标从指定元素上移出事件
跟上面那个一样,有进入就有移出。
代码演示:
<body>
<div style="width: 100px;height: 100px;background-color: red" onmouseout="f()">
div>
<script>
function f() {
console.log("鼠标移出了DIV");
}
script>
body>