JavaScript学习三（js常用事件操作方法）
Dom鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btn {
width: 140px;
height: 50px;
background: red;
line-height: 50px;
font-size: 18px;
text-align: center;
margin-top: 30px;
cursor: pointer;
color: blue;
border-radius: 5px;
}
.btn2 {
width: 140px;
height: 50px;
background: blue;
line-height: 50px;
font-size: 18px;
text-align: center;
margin-top: 30px;
cursor: pointer;
color: red;
border-radius: 5px;
}
</style>
</head>
<body>
<input type="button" value="弹出" onclick="alert('我是按钮')"/>
<div id="btn" class="btn" onmousemove="mouseoverFn(this)" onmouseout="mouseoutFn(this)">按钮</div>
<script>
function mouseoverFn(btn) {
btn.className = "btn2"
}
function mouseoutFn(btn) {
btn.className = "btn"
}
</script>
</body>
</html>
鼠标放上
DOM 0级事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btn {
width: 140px;
height: 50px;
background: red;
line-height: 50px;
font-size: 18px;
text-align: center;
margin-top: 30px;
cursor: pointer;
color: blue;
border-radius: 5px;
}
.btn2 {
width: 140px;
height: 50px;
background: blue;
line-height: 50px;
font-size: 18px;
text-align: center;
margin-top: 30px;
cursor: pointer;
color: red;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="btn" class="btn">开锁</div>
</body>
<script>
/**
* dom 0 级事件 指的就是 先取出dom元素再指定事件，而不是现在标签内部
*/
var btn = document.getElementById("btn");
btn.onclick = function () {
if (this.innerHTML == "开锁") {
this.className = "btn2";
this.innerHTML = "上锁"
} else {
this.className = "btn";
this.innerHTML = "开锁"
}
}
</script>
</html>
鼠标点击按钮后
window.onload()事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
/**
* 在页面加载完以后执行 会先执行后面的 执行完毕后再执行onload 里面的事件
*/
window.onload = function () {
var box = document.getElementById("box");
box.onclick = function () {
alert("这是一个DIV");
}
}
</script>
<body>
<div id="box">div</div>
</body>
</html>
onchange()事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body id="bgChange">
<div style="font-size: 40px;">
<label>请选择你想要的背景色</label>
<select id="selectColor" style="font-size: 30px;">
<option>请选择</option>
<option value="红色">红色</option>
<option value="黄色">黄色</option>
<option value="蓝色">蓝色</option>
<option value="黑色">黑色</option>
<option value="绿色">绿色</option>
</select>
</div>
<script>
var bg = document.getElementById("bgChange");
var selectColor = document.getElementById("selectColor");
selectColor.onchange = function () {
// var bgColor = this.value;
var bgColor = this.options[this.selectedIndex].value;
console.log(bgColor);
if (this.value == '红色')
bg.style.backgroundColor = 'red';
if (this.value == '黄色')
bg.style.backgroundColor = 'yellow';
if (this.value == '蓝色')
bg.style.backgroundColor = 'blue';
if (this.value == '黑色')
bg.style.backgroundColor = 'black';
if (this.value == '绿色')
bg.style.backgroundColor = 'green';
}
</script>
</body>
</html>表单获得焦点onfocus() 失去焦点事件 onblur()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
padding-left: 50px;
}
.left, .tips {
float: left;
}
.left {
padding-right: 20px;
}
.tips {
display: none;
}
</style>
<script>
window.onload = function () {
var telephone = document.getElementById("telephone");
var tip = document.getElementById("tip");
telephone.onfocus = function () {
tip.style.display = 'block';
}
telephone.onblur = function () {
if (this.value.length == 11 && isNaN(this.value) == false) {
tip.innerHTML = '√'
} else {
tip.innerHTML = '×'
}
}
}
</script>
</head>
<body>
<div id="box" class="box">
<div class="left">
手机号码:<input type="text" id="telephone" placeholder="请输入手机号码"/>
</div>
<div class="tips" id="tip">
请输入手机号
</div>
</div>
</body>
</html>
键盘事件
定时事件