1,鼠標焦點事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p ondblclick="alert('hello!')">博客園</p>
<input type="text" onfocus="func1()" onblur="func2()" value="請輸入用戶名" id="username">
<script>
function func1() {
var uname=document.getElementById("username");
uname.value=null;
}
// func1 鼠標左鍵點擊觸發焦點后的事件 點擊輸入框后輸入框內的文字為空 等待輸入
function func2() {
var uname=document.getElementById("username");
if (uname.value.trim().length==0) { //.trim()方法是為了去掉value空格的
uname.value = "請輸入用戶名";
}
}
//func2 鼠標左鍵點擊移開焦點后觸發的事件 如果輸入框有輸入的內容 則無操作,如果VALUE沒有數據為空則加上請輸入用戶名 提示
</script>
</body>
</html>
==========================================================================================================================
2,鼠標移動事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: #48f444;
height: 180px;
width: 180px;
text-align: center;
font-size: 25px;
line-height: 180px;
margin: 2px;
}
</style>
</head>
<body>
<div id="div1" onmousedown="func1()" onmousemove="func2()">博客園</div>
<div id="div2" onmouseout="func3()" onmouseover="func4()">博客園</div>
<script>
function fun1() {
console.log("down"); //在區域內點下鼠標左鍵或右鍵 觸發down 函數
}
function fun2() {
console.log("move"); //在區域內移動光標 則觸發move事件 func2()函數
}
function func3() { // 鼠標移開區域則觸發out事件 func3函數
console.log("out");
}
function func4() {
console.log("over") // 鼠標進入區域后,觸發over事件 func4函數c
}
</script>
</body>
</html>
