一.DOM事件格式
元素对象.on事件名称 = function(){ ???????// 事件发生时，执行的代码 ???}onclick ???????当用户点击某个对象时调用的事件句柄。ondblclick ????当用户双击某个对象时调用的事件句柄。onfocus ???????元素获得焦点。 ??????????????//练习：输入框onblur ????????元素失去焦点。 ??????????????应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange ??????域的内容被改变。 ????????????应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown ?????某个键盘按键被按下。 ?????????应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress ????某个键盘按键被按下并松开。onkeyup ???????某个键盘按键被松开。onload ????????一张页面或一幅图像完成加载。
onmousedown ???鼠标按钮被按下。onmousemove ???鼠标被移动。onmouseout ????鼠标从某元素移开。onmouseover ???鼠标移到某元素之上。onmouseleave ??鼠标从元素离开onselect ?????文本被选中。onsubmit ?????确认按钮被点击。
eg1: onfocus onblur onmouseover onmouseout
<body><form action="" id="from1"> ???<input type="text" name="username" value="请输入用户名"><span style="font-style: italic"></span> ???<p></p> ???<input type="text" name="passwd" value="请输入密码"> ???<p></p> ???<input type="submit" value="提交"></form><h1 id="one">点击我领取屠龙宝刀！</h1><script> ???ele_form = document.getElementById("from1");
???ele_form.onsubmit=function(){ ???????console.log(this) ???????//阻止事件方式1 false表示拦截表单提交 其他放行 ???????return false; ???};
ele_form.onsubmit=function(event){
console.log(this)
//阻止事件方式2 event.preventDefault
event.preventDefault();
}; ???var name_ele = document.getElementsByName("username")[0]; ???//获得焦点时执行 ???name_ele.onfocus = function () { ???????// 函数中name_ele可以用this替代 ???????if (this.value == "请输入用户名") { ???????//if (name_ele.value == "请输入用户名") { ???????????name_ele.value = ""; ???????????ele_span = name_ele.nextElementSibling; ???????????ele_span.innerHTML = "SB"; ???????????console.log(ele_span); ???????} ???????console.log(name_ele.value); ???}; ???//失去焦点执行 ???name_ele.onblur = function () { ???????if (!name_ele.value.trim()) { ???????????name_ele.value = "请输入用户名"; ???????????ele_span = name_ele.nextElementSibling; ???????????ele_span.innerHTML = ""; ???????} ???????console.log(name_ele.value); ???}; ???console.log(name_ele.value); ???var btn = document.getElementById("one"); ???btn.onclick = function () { ???????alert("我是渣渣辉，是兄弟就来砍我"); ???}; ???/* mouseover 鼠标停留的时候 */ ???btn.onmouseover = function () { ???????btn.style.color = "red"; ???}; ???/* mouseout 鼠标离开的时候 */ ???btn.onmouseout = function () { ???????btn.style.color = "blue"; ???};</script>Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
思考：onclick＝function(event){};这个方法是谁调用的？
事件传播：
<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>
参考：
https://www.cnblogs.com/chichung/p/9688399.html
https://www.cnblogs.com/yuanchenqi/articles/5980312.html
JS DOM事件
原文地址：https://www.cnblogs.com/icemonkey/p/10498823.html