文章目录
前言
在BOM模型中事件属性比较多,而且重要,所以这篇文章专门对于事件属性做一梳理。
一、鼠标的单击,悬停,移动事件
1.内容
事件属性 | 描述 |
---|---|
onclick | 鼠标的单击事件 |
onmouseover | 鼠标移动到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmousemove | 鼠标被移动 |
onmouseup | 鼠标按键被松开 |
onmousedown | 鼠标按键被按下 |
2.代码如下:(部分示例)
(1)单击,移动,悬停事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:500px ;
height:300px;
background-color: red;
}
</style>
</head>
<script type="text/javascript">
//1.鼠标的单击事件
function fun(){
let p = document.getElementById('p');
p.className = "first";//此处className属性返回class属性(.first)
}
function fun2(){
alert("fffff") ;
return false ;
}
function fun1(){
alert("aaaaaaa") ;
}
//2.鼠标的悬停事件
function fun(){
document.getElementById('p').className = "one" ;
}
function fun1(p){
p.className = null ;
}
//3.鼠标的移动事件
function fun(e){
let x = e.clientX ;
let y = e.clientY ;
document.getElementById('input').value = `${
x} : ${
y}`
}
</script>
<body>
<!--1. 鼠标的单击事件 -->
<p id = "p"></p>
<button onclick="fun()">单击事件</button>
<a href = "history/b.html" onclick=