>[danger]**1. 常用事件** | 页面事件 | | | --- | --- | | ` onload ` | 当页面载入完毕后触发 | | 焦点事件 | | | --- | --- | | `onfocus ` | 当获取焦点时触发 | | ` onblur` | 当失去焦点时触发 | | 鼠标事件 | | | --- | --- | | `onmouseover`| 当鼠标悬浮时触发 | | `onmouseout ` | 当鼠标离开时触发 | | `onmousemove` | 当鼠标移动时触发 | | 键盘事件 | | | --- | --- | | `onkeypress`| 当键盘按下时触发 | | ` onkeydown` | 当键盘按下时触发 | | `onkeyup` | 当键盘弹起时触发 | | 其他事件 | | | --- | --- | | ` onclick`| 当鼠标单击时触发 | | ` ondblclick` | 当鼠标双击时触发 | | `onmouseup` | 当鼠标释放时触发 | | ` onresize` | 当窗口改变大小时触发 | | ` onscroll ` | 当滚动条滚动时触发 | | `onsubmit` | 当表单提交时触发 | | `onchange` | select>option切换 | >[danger]**2. 事件绑定** 1) 行内绑定 ~~~ <input type="text" onblur = "this.value='OK'";> //this表示当前的标签的dom对象 ~~~ 2) 行内-动态绑定 ~~~ <input type="text" onblur = "t()";> <script> function t(){ console.log('HI'); } </script> ~~~ 3) 动态绑定 ~~~ var a = document.getElementsByTagName('a'); a.onblur = function(){ alert('HI'); alert(this.value); //this指当前节点对象本身 } ~~~ >[danger]**3. 事件监听** >[info]事件监听3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。 事件监听：同一个节点对象，可以同时绑定多个触发事件； 绑定和移除事件监听 ~~~ var a = document.getElementsByTagName('a'); //事件1 function t1(){ alert('HI'); } //事件2 function t2(){ alert('NO'); } //事件监听函数 function addEvent(target,type,func){ if(target.addEventListener){ target.addEventListener(type,func); }else{ target.attachEvent("on"+type,func); } } //绑定多个事件 addEvent(a,'cilck',t1); addEvent(a,'cilck',t2); //移除事件监听函数```` function removeEvent(target,type,func){ if(target.removeEventListener){ target.removeEventListener(type,func); }else{ target.detachEvent("on"+type,func); } } //移除事件监听 removeEvent(a,'click',t1); removeEvent(a,'click',t2); ~~~ >[danger]**4. 事件对象** >[info] 在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。 获取事件对象兼容性写法： ~~~ var a = document.getElementsByTagName('a'); a.oncilck = function(event){ var evt = window.event || event; console.log(evt); } ~~~ >[danger]**5. 阻止冒泡** >[info]触发一个元素的事件的时候，同时会触发该元素的父元素的事件。这就是事件冒泡。 //阻止事件冒泡函数兼容性写法 ~~~ function stopMaoPao(e) { var e = window.event ||event ; if (e.stopPropagation) e.stopPropagation() else e.cancelBubble = true; } ~~~ 使用： ~~~ document.getElementsByClassName('a').onclick = function(evt){ alert('OK'); stopMaoPao(evt); //阻止这个元素的父元素的事件 } ~~~ >[danger]**6. 阻止默认行为** // 阻止默认浏览器动作兼容性写法 ~~~ function stopDefault(e) { var e = window.event ||event ; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } return false; } ~~~ 使用： ~~~ document.forms[0].onsubmit = function(evt){ alert('OK'); stopDefault(evt); } ~~~ 或者 //阻止超链接点击时的跳转行为 ~~~ var a = document.getElementsByTagName('a'); a.onclick=function(){ return false; } ~~~