一、事件
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" ""><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>
3.onchange事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><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" ""><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" ""><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.其余事件
还有很多事件，具体参考：
，人，也总是很难发现自己的错误，
