js事件处理 —— 详解
对于JS事件处理分为四部分：
1.html事件处理程序
直接添加到HTML结构中
解析：用html处理程序可以直接在button元素里直接调用，但是维护性不是很方便
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <p id="pid">js事件处理程序</p> 10 <button id="btn" onclick="demo()">点击</button> 11 <script> 12 function demo(){ 13 document.getElementById("pid").innerHTML ="html事件处理程序" 14 } 15 </script> 16 17 18 </body> 19 </html>
2.DOM 0级处理事件
把一个函数赋值给一个事件处理程序属性
解析：
1.调用ID属性获得事件元素，然后把事件处理程序赋值给——元素点式事件来调用
2.当再次用同样的事件的话，前面调用的处理程序将会被覆盖
3.利用元素.事件 = null ，可以清除事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 10 <button id="btn">点击</button> 11 <script> 12 var btn = document.getElementById("btn") //调用ID属性获得button元素 13 btn.onclick =function(){ //点击事件1 14 alert("DOM 0级处理事件1") 15 } 16 btn.onclick = function(){ //点击事件2 17 alert("DOM 0级处理事件2") 18 } 19 btn.onclick = null //清除事件 20 21 22 23 </script> 24 25 26 </body> 27 </html>
DOM2级事件处理程序
DOM2级事件处理程序
解析：
DOM2级一个元素用相同的两个事件调用不同方法时不会被覆盖
addEvenListener("事件"，“事件处理方法”)
e.target.type//获取事件目标的事件类型，返回值事件类型
e.target.stopPropagation();//阻止事件的冒泡方法
e.preventDefault()//清除元素的默认方法
elem.removeEvenlistener("事件","事件处理方法") //清除事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #div1{ 8 width:100px; 9 height:100px; 10 border: 1px solid gray; 11 } 12 #div2{ 13 width: 50px; 14 height:50px; 15 border:1px solid gray; 16 } 17 </style> 18 </head> 19 <body> 20 21 <div id="div1"> 22 <div id="div2">DOM2级处理事件</div> 23 </div> 24 <a id="aid" href="www.baidu.com">连接百度</a> 25 <script> 26 var div1 = document.getElementById('div1') 27 var div2 = document.getElementById("div2") 28 var a =document.getElementById("aid") 29 div1.addEventListener("click",div1Style) 30 div2.addEventListener("click",div2Style) 31 div2.addEventListener("click",div3Style) 32 a.addEventListener("click",aStyle) 33 34 function div1Style() { 35 this.style.background = "blue" 36 } 37 function div2Style(e) { 38 alert(e.type) //获取无素的事件类型 39 alert(e.target.id) //获取事件目标（元素）的ID 40 e.stopPropagation() //阻止父元素的事件冒泡 41 this.style.background = "black" 42 } 43 function div3Style(){ 44 this.style.color = "red" 45 } 46 function aStyle(e){ 47 e.preventDefault()//清除元素的默认方法 48 } 49 div2.removeEventListener("click",div3Style)//清除事件 50 51 </script> 52 </body> 53 </html>
4.针对IE8和IE8以下的游览器 attchEvent detachEvent
当IE游览是IE8或者低于IE8时 使用attchEvent2级的DOM处理事件
detachEvent来清除处理事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button id="btn">点击</button> 9 <script> 10 var btn = document.getElementById("btn") 11 if(btn.addEventListener){ 12 btn.addEventListener("click",demo) 13 }else if(btn.attachEvent){ //针对IE8 和 IE8以下的游览 14 btn.attachEvent("onclick",demo) 15 }else{ //针对更老版本的游览器 16 btn.onclick = demo() 17 } 18 function demo(){ 19 alert("hello") 20 } 21 btn.detachEvent("onclick",demo) //针对IE8 和 IE8以下的游览 清除事件 22 </script> 23 </body> 24 </html>
