1.鼠标事件
onload :页面加载时触发
onclick :鼠标点击时触发
onmouseover :鼠标滑过时触发
onmouseout :鼠标离开时触发
onfoucs :获得焦点时触发
onblur :失去焦点时触发
onchange :域的内容改变时发生
onsubmit :表单中的确认按钮被点击时发生
onmousedown :鼠标按钮在元素上按下时触发
onmousemove :在鼠标指针移动时发生
onmouseup :在元素上松开鼠标按钮时触发
onresize :当调整浏览器窗口的大小时触发
onscroll :拖动滚动条滚动时触发
示例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<style type="text/css">
.tip1{display: none;font-size: 14px;}
</style>
</head>
<body>
<div>
<button id="btn" onclick="clickBtn()" onmouseover="mouseoverBtn()" onmouseout="mouseoutBtn()">点我呀</button>
</div>
<div>
<input type="text" id="phone" placeholder="请输入电话号码" onfocus="myfunction()" onblur="checkphone()">
</div>
<div class="tip1" id="tip">
请输入有效手机号
</div>
<script>
function clickBtn() {
alert("我被点击了");
}
function mouseoverBtn() {
btn.style.background="red";
}
function mouseoutBtn() {
btn.style.background="white";
}
function myfunction() {
tip.style.display="block";
}
function checkphone() {
var num=document.getElementById("phone").value;
var re = /^1\d{10}$/;
if (re.test(num)) {
tip.innerHTML='<p>正确</p>';
} else {
tip.innerHTML='<p>错误</p>';
}
}
</script>
</body>
</html>
示例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>changeColor</title>
</head>
<body>
<div>
请选择你喜欢的背景颜色
<select id="bgselect" onchange="changeBgcolor()">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
</div>
<script type="text/javascript">
function changeBgcolor() {
var color=document.getElementById("bgselect").value;
document.body.style.background=color;
}
</script>
</body>
</html>
2.键盘事件
onkeydown :在用户按下一一个键盘按键时发生
onkeypress :在键盘按键被按下并释放一个键时发生
onkeyup :在键盘按键被松开时发生
keyCode :返回onkeypress, onkeydown 或onkeyup事件触发的键的值的字符代码,或键的代码。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>您还可以输入<span><span id="count">30</span>/30</span>个字</p>
<textarea id="text" cols="30" rows="4" onkeyup="myfunction()"></textarea>
<script type="text/javascript">
function myfunction() {
var text=document.getElementById("text").value.length;
var allow=30-text;
count.innerHTML=allow;
}
</script>
</body>
</html>