事件汇总：
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick ????当用户双击某个对象时调用的事件句柄。
onfocus ???????元素获得焦点。 ??????????????练习：输入框
onblur ????????元素失去焦点。 ??????????????应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange ??????域的内容被改变。 ????????????应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown ?????某个键盘按键被按下。 ?????????应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress ????某个键盘按键被按下并松开。
onkeyup ???????某个键盘按键被松开。
onload ????????一张页面或一幅图像完成加载。
onmousedown ???鼠标按钮被按下。
onmousemove ???鼠标被移动。
onmouseout ????鼠标从某元素移开。
onmouseover ???鼠标移到某元素之上。
onmouseleave ??鼠标从元素离开
onselect ??????文本被选中。
onsubmit ??????确认按钮被点击。
事件绑定方式：
<div id="div" onclick="foo(this)">点我呀</div><script> ???function foo(self){ ??????????// 形参不能是this; ???????console.log("点你大爷!"); ???????console.log(self); ??????}</script><p id="abc">试一试!</p><script> ???var ele=document.getElementById("abc"); ???ele.onclick=function(){ ???????console.log("ok"); ???????console.log(this); ???// this直接用 ???};</script>三、事件介绍
1、onload：
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script> ????????/* ?????????????window.onload=function(){ ??????????????????var ele=document.getElementById("ppp"); ??????????????????ele.onclick=function(){ ??????????????????alert(123) ???????????????}; ????????????}; ?????????????????*/ ?????????function fun() { ?????????????var ele=document.getElementById("ppp"); ??????????????ele.onclick=function(){ ???????????????alert(123) ???????????}; ?????????} ???</script></head><body onload="fun()"><p id="ppp">hello p</p></body></html>2、onsubmit：
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script> ???????window.onload=function(){ ???????????//阻止表单提交方式1(). ???????????//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. ????????????var ele=document.getElementById("form"); ????????????ele.onsubmit=function(event) { ???????????// ???alert("验证失败 表单不会提交!"); ???????????// ???return false; ???????????// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。 ????????????alert("验证失败 表单不会提交!"); ????????????event.preventDefault(); ???} ???????}; ???</script></head><body><form id="form"> ???????????<input type="text"/> ???????????<input type="submit" value="点我!" /></form></body></html>3、事件传播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"> ???????<div id="abc_2" style="border:1px solid red;width:200px;height:200px;"> ???????</div></div><script type="text/javascript"> ???????document.getElementById("abc_1").onclick=function(){ ???????????alert(‘111‘); ???????}; ???????document.getElementById("abc_2").onclick=function(event){ ???????????alert(‘222‘); ???????????event.stopPropagation(); //阻止事件向外层div传播. ???????}</script>4、onselect：
<input type="text"><script> ???var ele=document.getElementsByTagName("input")[0]; ???ele.onselect=function(){ ?????????alert(123); ???}</script>5、onchange:
<select name="" id=""> ???<option value="">111</option> ???<option value="">222</option> ???<option value="">333</option></select><script> ???var ele=document.getElementsByTagName("select")[0]; ???ele.onchange=function(){ ?????????alert(123); ???}</script>6、onkeydown:
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
<input type="text" id="t1"/><script type="text/javascript"> ???var ele=document.getElementById("t1"); ???ele.onkeydown=function(e){ ???????e=e||window.event; ???????var keynum=e.keyCode; ???????var keychar=String.fromCharCode(keynum); ???????alert(keynum+‘----->‘+keychar); ???};</script>7、onmouseout与onmouseleave事件的区别：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#container{ ???????????width: 300px; ???????} ???????#title{ ???????????cursor: pointer; ???????????background: #ccc; ???????} ??????#list{ ??????????display: none; ??????????background:#fff; ??????} ???????#list div{ ???????????line-height: 50px; ???????} ???????#list ?.item1{ ???????????background-color: green; ???????} ????????#list ?.item2{ ???????????background-color: rebeccapurple; ???????} ????????#list ?.item3{ ???????????background-color: lemonchiffon; ???????} ???</style></head><body><p>先看下使用mouseout的效果:</p><div id="container"> ???????<div id="title">使用了mouseout事件↓</div> ???????<div id="list"> ???????????????<div class="item1">第一行</div> ???????????????<div class="item2">第二行</div> ???????????????<div class="item3">第三行</div> ???????</div></div><script>// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 ??var container=document.getElementById("container"); ??var title=document.getElementById("title"); ??var list=document.getElementById("list"); ??title.onmouseover=function(){ ??????list.style.display="block"; ??}; ??container.onmouseleave=function(){ ?// 改为mouseout试一下 ??????list.style.display="none"; ??};/*因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";*/ ?/* ?思考: ?if: ??????list.onmouseout=function(){ ??????????list.style.display="none"; ??}; ????为什么移出第一行时,整个list会被隐藏? ????其实是同样的道理,onmouseout事件被同时绑定到list和它的三个子元素item上,所以离开任何一个 ????子元素同样会触发list.style.display="none"; ??*/</script></body></html>js 事件
原文地址：http://www.cnblogs.com/liuxiaowei/p/7742072.html