dom事件触发顺序（DOM_常用事件）
window.onload的方法解决了js在从上到下编译的时候 ，无法先解析body里面的内容 ，后解析<script>标签里的事件 。
现在script标签在上面 ，div标签在下面 ，加入onload方法可以在解析时进行等待 ，等到解析完div标签 。
onsubmit很多检验是在提交服务器之前进行的 ，运用onsubmit方法可以在本地进行验证 ，如果出错了可以立即停止 ，不需要交给服务器
<form action="" id="i"> 用户名 <input type="text"> 密码 <input type="password"> <input type="submit"></form> </div> <script> var ele = document.getElementById("i"); var user = document.querySelector("#i [type=text]") var pwd = document.querySelector("#i [type=password]") ele.onsubmit = function (e){ if(user.value.length < 5){ alert(user.value+"长度应该大于5") return false; // 终止事件执行 // e.preventDefault() // 阻止元素默认行为 } } </script>当用户名长度小于5时 ，点击提交之后就会弹窗提示（这个过程不会传给服务器）
onchange <select name="provonce" id="s1"> <option value="hebei">请选择省份</option> <option value="hubei">湖北省</option> <option value="hunan">湖南省</option> <option value="hebei">河北省</option> </select> <select name="provonce" id="s2"> <option value="hebei">请选择城市</option> </select> </div> <script> var data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]}; var ele = document.getElementById("s1"); var ele2 = document.getElementById("s2"); ele.onchange = function (){ var cities = data[this.value]; //Array ele2.options.length = 1; //1代表有一个默认显示值：请选择城市 for (var i=0;i<cities.length;i++){ var opt = document.createElement("option"); opt.innerText = cities[i]; ele2.appendChild(opt); } } </script> onmouse <div id="container"> <div id="title">使用了onmouse事件↓</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(){ list.style.display="none"; } </script>onmouseout表示鼠标悬停事件已经发生之后的动作
如果没有离开的动作 ，那么这三行将会一直被显示 ，那就需要onmouseleave ，表示鼠标离开区域之后发生的动作
移开鼠标之后又恢复原来的样子
onkey <input type="text" id="i1"/> <script type="text/javascript"> var ele=document.getElementById("i1"); ele.onkeydown=function(e){ console.log("onkeydown",e.key) }; ele.onkeyup=function(e){ console.log("onkeyup",e.keycode) };onkeyup 事件会在键盘按键被松开时发生 。
onkeydown 事件会在用户按下一个键盘按键时发生 。
与onkeyup 事件相关的事件发生次序：
onkeydown onkeypress onkeyuponblur and onfocus
var ele = document.querySelector("#i1"); // 获取焦点事件 ele.onfocus = function () { console.log("in") }; // 失去焦点事件 ele.onblur = function () { if(ele.value.length<5){ ele.value = "太短了 ，重新输入"; } }当鼠标点击框的时候 ，是获取焦点事件鼠标移开以后就失去了 ，用法就是可以实时的进行判断 ，如果输入结束可以立即判断输入是否合法 。
点击输入框 ，就输出in了 ，当我输入‘12’以后并且点击其他地方
冒泡区域现有两块区域 ，小的c2 ，大的c1
<div class="c1"> <div class="c2"></div> </div> <script> var ele1 = document.querySelector(".c1"); ele1.onclick = function () { alert("c1区域") }; var ele2 = document.querySelector(".c2"); ele2.onclick = function (event) { alert("c2区域"); // 如何阻止事件冒泡 event.stopPropagation(); } </script>一般情况下 ，鼠标进入绿色区域后 ，会弹窗显示“c1区域 ” ，到达蓝色部分后会依次弹窗显示“c2区域 ” ，“c1区域 ”
如果想要达到蓝色区域只属于c2区域 ，不向外延伸 ，就加入一个stopPropagation
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！