通过鼠标触发事件, 类似用户的行为:
| 属性 | 描述 |
| onclick | 当单击鼠标时运行脚本 |
| ondblclick | 当双击鼠标时运行脚本 |
| onmousedown | 当按下鼠标按钮时运行脚本 |
| onmousemove | 当鼠标指针移动时运行脚本 |
| onmouseout | 当鼠标指针移出元素时运行脚本 |
| onmouseover | 当鼠标指针移至元素上时运行脚本 |
| onmouseup | 当松开鼠标按钮时运行脚本 |
| onmousewheel | 当滚动鼠标滚轮时运行脚本 |
| onscroll | 当滚动元素的滚动条时运行脚本 |
分别说明：
下面例子中的html与css代码一致（注意：除了第九条滚动条事件的css代码不一样）
html代码：
css代码：
一、onclick 当单击鼠标运行脚本
js代码：
<script>
//获取元素
var btn = document.querySelector("div");
//鼠标单击事件
btn.onclick = function(){
alert(123);
}
</script>
浏览器呈现效果：
当鼠标单击金黄色盒子时，警示框弹出123
二、onmousedown 当双击鼠标运行脚本
js代码：
<script>
//获取元素
var btn = document.querySelector("div");
// 鼠标双击事件
btn.ondblclick = function(){
alert(456);
}
</script>
浏览器呈现效果：
当鼠标双击金黄色盒子时，警示框弹出456
三、ondblclick 当按下鼠标按钮时运行脚本
js代码：
<script>
//获取元素
var btn = document.querySelector("div");
//鼠标按下事件
btn.onmousedown = function(){
console.log("鼠标按钮按下事件");
}
</script>
浏览器呈现效果：
当鼠标按下金黄色盒子时，控制台输出“鼠标按钮按下事件”
四、onmousemove 当鼠标指针移动时运行脚本
js代码：
<script>
//获取元素
var btn = document.querySelector("div");
//鼠标在元素里移动事件
btn.onmousemove = function(){
console.log("鼠标元素上移动");
}
</script>
浏览器呈现效果：
当鼠标指针移动到金黄色盒子时，控制台输出“鼠标元素上移动”
五、onmouseout 当鼠标指针移出元素时运行脚本
js代码：
<script>
//获取元素
var btn = document.querySelector("div");
//鼠标移出元素事件
btn.onmouseout = function(){
alert(123);
}
</script>
浏览器呈现效果：
当鼠标指针移出金黄色盒子时，警示框弹出678
六、onmouseover 当鼠标指针移至元素上时运行脚本
js代码：
<script>
//获取元素
var btn = document.querySelector("div");
//鼠标移至元素事件
btn.onmouseover = function(){
console.log("鼠标移至元素上");
}
</script>
浏览器呈现效果：
当鼠标指针移至金黄色盒子上时，警示框弹出678
七、onmouseup 当松开鼠标按钮时运行脚本
js代码：
<script>
//获取元素
var btn = document.querySelector("div");
//鼠标松开事件
btn.onmouseup = function(){
console.log("鼠标按钮松开事件");
}
</script>
浏览器呈现效果：
当松开鼠标按钮时，控制台输出“鼠标按钮松开事件”
八、onmousewheel 当滚动鼠标滚轮时运行脚本
js代码：
<script>
//鼠标滚轮事件
window.onmousewheel = function(){
console.log("鼠标滚轮事件");
}
</script>
浏览器呈现效果：
当滚动鼠标滚轮时，控制台输出“鼠标滚轮事件”
九、onscroll 当滚动元素的滚动条时运行脚本
css代码：
js代码：
<script>
//滚动条事件
window.onscroll = function(){
console.log("滚动条事件");
}
</script>
浏览器呈现效果：
当滚动滚动条时，控制台输出“滚动条事件”
