JS(五)DOM模型之常用事件
一、事件
1.使用onclick属性设置点击事件
2.js dom分配事件
3.鼠标事件
4.焦点事件
5.内容改变事件
二、示例
1.属性点击事件和dom分配点击事件
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<button id="btn1" onclick="clickBtn()">按钮1</button>
<button id="btn2">按钮2</button>
</body>
<script type="text/javascript">
/**
* 直接设置点击事件=>onclick属性
*/
function clickBtn(){
document.getElementById("btn1").innerHTML="要弹出对话框";
alert("你点击了按钮1");
document.getElementById("btn1").innerHTML="关闭对话框";
}
/**
* js dom 分配点击事件
*/
document.getElementById("btn2").onclick=function(){
alert("你点击了按钮2");
//clickBtn2();//这种也可以
};
function clickBtn2(){
alert("你点击了按钮2");
}
</script>
</html>
2.onload和onunload事件
它们分别在用户进入页面和离开页面时 触发。
onload事件：可用于检测浏览器的类型和版本，以基于此来加载网页的正确版本。
onload和onunload事件：可结合用于处理cookie。
一般在body元素中使用它们。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if(navigator.cookieEnable){
alert("已经启用cookie");
}else{
alert("没有启用cookie");
}
}
function exit(){
alert("离开页面");
}
</script>
<p>提示是否启用cookie</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
</head>
<body onload="checkCookies()">
<script>
function myFunction(obj){
obj.value=obj.value.toUpperCase();
}
function myFunction2(){
var ele_input = document.getElementById("text1");
ele_input.value = ele_input.value.toUpperCase();
}
</script>
<p>输入框内容发生变化时触发该事件</p>
<input type="text" name="input1" onchange="myFunction(this)"/><br/>
<input type="text" name="input2" id="text1" onchange="myFunction2()" />
</body>
</html>4.鼠标全部事件
<
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8">
<style type="text/css">
#div1 {
width:1500px;
height:500px;
font-size:20px;
color:white;
}
</style>
<script type="text/javascript">
/**
* 鼠标全部事件
* 鼠标指针滑过和离开区域事件
* 鼠标点击过程分析(响应顺序)：onMouseDown->onClick->onMouseUp
*/
function mouseOver(obj){
obj.style.background="red";
}
function mouseOut(obj){
obj.style.background="white";
}
function mouseUp(){
document.getElementById("image").src="header.jpg";
}
function mouseDown(){
document.getElementById("image").src="header1.jpg";
}
function mouseClick(obj){
alert("点击事件");
}
</script>
</head>
<body>
<!-- 这里的onmouseover等方法大小写无所谓，都可以，js对大小写不敏感 -->
<div id="div1" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onmousedown="mouseDown()" onmouseup="mouseUp()" onclick="mouseClick(this)">
<img id="image" src="header.jpg" />
</div>
</body>
</html>
<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'"> 请把鼠标移到这段文本上 </h1>
5.焦点事件onfocus、onblur
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="utf-8"/>
<script>
function myFunction(obj){
obj.style.background="YELLOW";
}
function myFunction2(obj){
obj.style.background="WHITE";
}
</script>
</head>
<body>
<input type="text" name="username" onfocus="myFunction(this)" onblur="myFunction2(this)"/>
<input type="text" name="pwd" onfocus="myFunction(this)" onblur="myFunction2(this)"/>
</body>
</html>
6.其余事件
还有很多事件，具体参考：http://www.w3school.com.cn/jsref/dom_obj_event.asp