事件的移除
removeEventListener()
第二個引數需要指定要移除的事件句柄，不能是匿名函式，因為無法識別
想要移除成功，那么三個引數必須跟addEventListener中的三個完全一致
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var btn1 = document.querySelector("#btn1"); function click1(){ alert("hello1~"); } btn1.addEventListener("click", click1, false); //移除系結的事件 btn1.removeEventListener("click", click1, false); }); </script> </head> <body> <button id="btn1">按鈕1</button> </body> </html>
IE事件流
attachEvent(event, function) event都是on開頭的
瀏覽器兼容性主要就是指IE瀏覽器的兼容，尤其是低版本IE（IE6-8）
IE不支持事件捕獲，默認都是冒泡，所以沒有第三個引數
detachEvent() 移除事件
DOM0級 兼容所有瀏覽器
DOM2級
addEventListener 主要兼容谷歌、火狐、IE9+
attachEvent 主要兼容IE6-8
attachEvent 可以系結多個事件型別，而且后系結的先執行
還有一個很逆天的知識點補充，匿名函式中的this指向window
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var btn1 = document.querySelector("#btn1"); function click1(){ alert("hello1~"); } function click2(){ alert("hello2~"); } btn1.attachEvent("onclick", click1); btn1.attachEvent("onclick", click2); //先彈出hello2，再彈出hello1 //移除系結的事件 btn1.detachEvent("onclick", click1); //解除系結hello1，只彈出hello2 //this指向window btn1.attachEvent("onclick", function(){ alert(this===window);//true }); }); </script> </head> <body> <button id="btn1">按鈕1</button> </body> </html>
跨瀏覽器事件處理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } } } var btn1=document.getElementById("btn1"); var click=function(){ alert("我被點擊啦！"); } EventUtil.addHandler(btn1, "click", click); EventUtil.removeHandler(btn1, "click", click); }); </script> </head> <body> <button id="btn1">按鈕1</button> </body> </html>
事件冒泡與事件捕獲
直系親屬樹
事件冒泡：當某個元素的點擊事件被觸發之后，由于冒泡，它的直系親屬樹上的元素，只要被添加了事件的，都會被觸發（從下往上）
事件捕獲：當某個元素的點擊事件被觸發之后，由于捕獲，它的直系親屬樹上的元素，只要被添加了事件的，都會被觸發（從上往下）
大部分情況下，都是使用事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var parent=document.getElementById("parent"); var child=document.getElementById("child"); //事件冒泡，先出現child，再出現parent parent.addEventListener("click", function(){ alert("parent"); }); child.addEventListener("click", function(){ alert("child"); }); //事件捕獲，先出現parent，再出現child // parent.addEventListener("click", function(){ // alert("parent"); // }, true); // child.addEventListener("click", function(){ // alert("child"); // }, true); }); </script> </head> <body> <div id="parent"> <div id="child">點擊child</div> </div> </body> </html>
利用事件冒泡機制實作事件委托
事件系結會損耗性能，事件委托是一個很棒棒的選擇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var ul=document.getElementById("ul"); // 父 ul 系結事件 // 子 li 沒有事件 // 當子元素（li）被點擊時，在子元素直系親屬樹上的所有元素，凡是系結了事件的（ul）都會被觸發 ul.addEventListener("click", function(event){ // event,target可以獲取到點擊的那個元素 console.log(event.target.innerHTML); if(event.target.id==="li1"){ alert("是1哦"); }else if(event.target.id==="li2"){ alert("是2哦"); }else if(event.target.id==="li3"){ alert("是3哦"); }else if(event.target.id==="li4"){ alert("是4哦"); } }); }); </script> </head> <body> <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> </body> </html>
w3c 制定的 javascript 標準事件模型，先事件捕獲從windows > document 往下級直到 特定的事件節點，然后進行事件處理，再事件冒泡，從特定節點往上級，這個完整的程序，
事件捕獲->事件處理->事件冒泡
event物件常用的屬性和方法
事件句柄的引數event物件
event.type 事件型別
event.target 被點擊的元素
event.currentTarget 被系結事件的元素
event.preventDefault() 阻止默認行為
event.stopPropagation() 阻止事件捕獲或者冒泡，需要添加到子元素上
clientY 瀏覽器頂部底邊到滑鼠的位置
pageY 瀏覽器頂部底邊到滑鼠的位置+頁面滾動的距離
screenY 螢屏頂部到滑鼠的位置（如果瀏覽器縮小，screenY依然是根據電腦螢屏來計算，與瀏覽器無關）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } #scroll{ height:1000px; background:#abcdef; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var ul=document.getElementById("ul"); ul.addEventListener("click", function(event){ console.log(event.type);//click console.log(event.target);//<li id="li3">li3</li> console.log(event.currentTarget); /* <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> */ alert(event.target.innerHTML); }); var a=document.getElementById("a"); a.addEventListener("click", function(event){ event.preventDefault();//阻止了a鏈接的跳轉 alert("hello"); }) //阻止子元素執行時冒泡到父元素 var parent=document.getElementById("parent"); var child=document.getElementById("child"); parent.addEventListener("click", function(event){ alert("parent"); event.stopPropagation(); }); child.addEventListener("click", function(event){ alert("child"); event.stopPropagation(); }); var scroll=document.getElementById("scroll"); scroll.addEventListener("click", function(event){ console.log(event.pageY);//813 console.log(event.clientY);//480 console.log(event.screenY);//535 }) }); </script> </head> <body> <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> <a id="a" href="http://www.baidu.com">點擊鏈接</a> <div id="parent"> <div id="child">這是兒子</div> </div> <div id="scroll">這是滾動區域</div> </body> </html>
IE中的event物件（attachEvent）
event.type 事件型別
event.returnValue=https://www.cnblogs.com/chenyingying0/p/false; 阻止默認行為
event.cancelBubble=true; 阻止冒泡，需要添加到子元素上
event.srcElement 被點擊的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } #scroll{ height:1000px; background:#abcdef; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var ul=document.getElementById("ul"); ul.attachEvent("onclick", function(event){ alert(event.type);//click alert(event.srcElement.innerHTML);//點擊li1，彈出li1 }); var a=document.getElementById("a"); a.attachEvent("onclick", function(event){ //阻止默認行為 event.returnValue=false; alert("hello"); }); //阻止子元素執行時冒泡到父元素，需要添加到子元素上 var parent=document.getElementById("parent"); var child=document.getElementById("child"); parent.attachEvent("onclick", function(event){ alert("parent"); }); child.attachEvent("onclick", function(event){ alert("child"); event.cancelBubble=true; }); }); </script> </head> <body> <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> <a id="a" href="http://www.baidu.com">點擊鏈接</a> <div id="parent"> <div id="child">這是兒子</div> </div> </body> </html>
Event跨瀏覽器的兼容性寫法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } #scroll{ height:1000px; background:#abcdef; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } var a=document.getElementById("a"); EventUtil.addHandler(a, "click", function(event){ alert("hello"); EventUtil.mypreventDefault(event);//阻止默認行為 }); var parent=document.getElementById("parent"); EventUtil.addHandler(parent, "click", function(event){ alert("parent"); }); var child=document.getElementById("child"); EventUtil.addHandler(child, "click", function(event){ var target=EventUtil.mycurrentTarget(event); alert(target.id);//<div id="child">這是兒子</div> EventUtil.mystopPropagation(event);//阻止冒泡到父元素 }) }); </script> </head> <body> <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> <a id="a" href="http://www.baidu.com">點擊鏈接</a> <div id="parent"> <div id="child">這是兒子</div> </div> </body> </html>
UI事件 load
window的load事件
img的load事件
script的load事件
css的load事件
window的unload事件 用戶從一個頁面切換到另一個頁面
window的resize事件 視窗大小調整
window的scroll事件 視窗滾動
由于resize和scroll是重復執行的，因此特別損耗性能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:2000px; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } // window的load事件 EventUtil.addHandler(window, "load", function(){ //alert("window的load事件！"); }); //img圖片加載完畢 var img=document.createElement("img"); EventUtil.addHandler(img, "load", function(){ //alert("img圖片加載完畢！"); }); img.src="source/cat.jpg"; //img圖片預加載（存入記憶體中） var img=new Image(); EventUtil.addHandler(img, "load", function(){ //alert("img圖片預加載完畢！"); }); img.src="source/cat.jpg"; //動態加載js var script=document.createElement("script"); EventUtil.addHandler(script, "load", function(){ //alert("js加載完畢！"); }); script.src="jquery.js"; //document.body.appendChild(script); //動態加載css var link=document.createElement("link"); link.type="text/css"; link.rel="stylesheet"; EventUtil.addHandler(link, "load", function(){ //alert("css加載完畢！"); }); link.href="style.css"; //document.getElementsByTagName[0].appendChild(link); //window unload EventUtil.addHandler(window, "unload", function(){ //alert("unload！"); }); //window resize EventUtil.addHandler(window, "resize", function(){ //alert("resize"); }); //window scroll EventUtil.addHandler(window, "scroll", function(){ //alert("scroll"); }); }); </script> </head> <body> </body> </html>
焦點事件
onfocus 得到焦點
onblur 失去焦點
滑鼠事件
onclick 滑鼠單擊
ondblclick 滑鼠雙擊
onmousedown 滑鼠按下
onmousemove 滑鼠在目標區域移動（重復執行影響性能）
onmouseup 滑鼠松開
mousedown+mouseup=click
onmouseover 滑鼠移入（進入元素或者元素的子元素）
onmouseout 滑鼠移出 （移出元素或者元素的子元素）
onmouseenter 滑鼠移入（進入元素本身）
onmouseleave 滑鼠移出（移出元素本身）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #div{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } #child{ width:80px; height:80px; background:pink; font-size:14px; position: absolute; left:50%; top:50%; margin-left:-40px; margin-top:-40px; line-height:80px; text-align: center; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } //獲得焦點 var inout=document.getElementById("text"); EventUtil.addHandler(inout, "focus", function(){ //console.log("獲得焦點"); }); //失去焦點 var inout=document.getElementById("text"); EventUtil.addHandler(inout, "blur", function(){ //console.log("失去焦點"); }); //滑鼠單擊 var div=document.getElementById("div"); EventUtil.addHandler(div, "click", function(){ //console.log("滑鼠單擊"); }); //滑鼠雙擊 var div=document.getElementById("div"); EventUtil.addHandler(div, "dblclick", function(){ //console.log("滑鼠雙擊"); }); //滑鼠按下 var div=document.getElementById("div"); EventUtil.addHandler(div, "mousedown", function(){ //console.log("滑鼠按下"); }); //滑鼠松開 var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseup", function(){ //console.log("滑鼠松開"); }); //滑鼠移動 var div=document.getElementById("div"); EventUtil.addHandler(div, "mousemove", function(){ //console.log("滑鼠移動"); }); //滑鼠進入 var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseover", function(){ console.log("mouseover滑鼠進入"); }); //滑鼠離開 var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseout", function(){ console.log("mouseout滑鼠離開"); }); //滑鼠進入 var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseenter", function(){ console.log("mouseenter滑鼠進入"); }); //滑鼠離開 var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseleave", function(){ console.log("mouseleave滑鼠離開"); }); }); </script> </head> <body> <input type="text" id="text" value="text"> <div id="div"> <div id="child">這是子元素</div> </div> </body> </html>
event.shiftKey shift+點擊
event.ctrlKey ctrl+點擊
event.altKey alt+點擊
event.metaKey meta+點擊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #box{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } var box=document.getElementById("box"); EventUtil.addHandler(box, "click", function(e){ var keys=[]; if(e.shiftKey){ keys.push("shift"); } if(e.ctrlKey){ keys.push("ctrl"); } if(e.altKey){ keys.push("alt"); } if(e.metaKey){ keys.push("meta"); } console.log(keys.join(","));//陣列轉字串 }); }); </script> </head> <body> <div id="box"></div> </body> </html>
針對mousedown，存在event.button
高級瀏覽器：
event.button=0 滑鼠左鍵
event.button=1 滑鼠中鍵
event.button=2 滑鼠右鍵
IE8及以下：
event.button=0 沒有按下滑鼠
event.button=1 按下左鍵
event.button=2 按下右鍵
event.button=3 同時按下左右鍵
event.button=4 按下中間鍵
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #box{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } var box=document.getElementById("box"); EventUtil.addHandler(box, "mousedown", function(e){ console.log(e.button); }); }); </script> </head> <body> <div id="box"></div> </body> </html>
鍵盤事件
keydown 按下任意鍵 keyup 松開鍵盤 event.keyCode 鍵碼（通過keydown獲取）
keypress 按下鍵盤上的字符鍵 charCode ascii碼（通過keypress獲取）
textInput 文本輸入 data 輸入的文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #box{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } } } var input=document.getElementById("input"); EventUtil.addHandler(input, "keydown", function(e){ //console.log(e.keyCode+"keydown"); }); EventUtil.addHandler(input, "keyup", function(e){ //console.log(e.keyCode+"keyup"); }); EventUtil.addHandler(input, "keypress", function(e){ //console.log(e.charCode+"keypress"); }); EventUtil.addHandler(input, "textInput", function(e){ console.log(e.data+"textInput"); }); }); </script> </head> <body> <input type="text" id="input"> </body> </html>
DOM 相關事件
DOMNodeRemoved DOM中某元素被洗掉
DOMNodeRemovedFromDocument 從檔案中被洗掉前觸發（事件句柄必須加在被操作的元素上，瀏覽器支持性不好，不推薦）
DOMNodeInserted DOM中某元素被添加
DOMNodeInsertedIntoDocument 從檔案中被添加之前觸發（事件句柄必須加在被操作的元素上，瀏覽器支持性不好，不推薦）
DOMSubtreeModified DOM結構發生改變
DOMContentLoaded DOM樹加載完即可
loaded DOM樹加載完，并且影像+js+css等其他資源也加載完
因此DOMContentLoaded速度快于loaded
hashchange #后面的值發生變化，只能給window物件系結
event.oldURL 原來的url
event.newURL 新的url
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #box{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } } } var ul=document.getElementById("ul"); //DOM中某元素被洗掉 EventUtil.addHandler(document, "DOMNodeRemoved", function(e){ //console.log("removed");//removed }); //ul.removeChild(ul.children[3]); //DOM中某元素被添加 var li=document.createElement("li"); EventUtil.addHandler(document, "DOMNodeInserted", function(e){ //console.log("inserted");//inserted }); //ul.appendChild(li); //DOM結構從檔案中被洗掉之前觸發 //addHandler中填寫的是被洗掉的元素 var li=ul.children[3]; EventUtil.addHandler(li, "DOMNodeRemovedFromDocument", function(e){ //console.log("DOM結構從檔案中被洗掉之前觸發");//DOM結構從檔案中被洗掉之前觸發 }); //ul.removeChild(li); //DOM結構從檔案中被添加之前觸發 //addHandler中填寫的是被添加的元素 var li=document.createElement("li"); EventUtil.addHandler(li, "DOMNodeInsertedIntoDocument", function(e){ //console.log("DOM結構從檔案中被添加之前觸發");//DOM結構從檔案中被添加之前觸發 }); //ul.appendChild(li); //DOM結構發生改變 EventUtil.addHandler(document, "DOMSubtreeModified", function(e){ //console.log("DOM結構發生改變");//DOM結構發生改變 }); //ul.removeChild(ul.children[3]);//4被洗掉 //DOM結構發生改變 EventUtil.addHandler(document, "DOMSubtreeModified", function(e){ //console.log("DOM結構發生改變");//DOM結構發生改變 }); //ul.removeChild(ul.children[3]);//4被洗掉 //DOM樹加載完 EventUtil.addHandler(document, "DOMContentLoaded", function(e){ //console.log("DOM樹加載完");//DOM結構發生改變 }); //hash值改變 EventUtil.addHandler(window, "hashchange", function(e){ console.log(e.oldURL + "\n" + e.newURL);//DOM結構發生改變 //file:///C:/Users/96579/Desktop/index.html#11 //file:///C:/Users/96579/Desktop/index.html# }); }); </script> </head> <body> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
移動端常用事件 型別
touchstart 手指接觸螢屏
touchmove 手指在螢屏上移動
touchend 手指離開螢屏
touchcancel 系統停止觸摸跟蹤時觸發
首先在head上添加移動端適配的設定：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
touch的event物件
event.touches 螢屏上的觸摸點個數
event.changedTouches 螢屏上移動的觸摸點的個數
event.targetTouches 目標區域內的觸摸點的個數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ width:100%; } #div{ width:100px; height:100px; background:#abcdef; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } } } var div=document.getElementById("div"); EventUtil.addHandler(div, "touchstart", function(e){ console.log("touchstart"); console.log(e.touches); console.log(e.changedTouches); console.log(e.targetTouches); }); EventUtil.addHandler(div, "touchmove", function(e){ console.log("touchmove"); }); EventUtil.addHandler(div, "touchend", function(e){ console.log("touchend"); }); }); </script> </head> <body> <div id="div"></div> </body> </html>
一個小案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ width:100%; } #div{ width:400px; height:400px; border:1px solid; margin:50px; } #ul{ list-style: none; } #ul li{ width:100px; height:30px; line-height:30px; text-align: center; border-radius:5px; display: inline-block; cursor:pointer; } #ul li:hover{ color:#fff; } #ul li:first-child{ background:pink; } #ul li:nth-child(2){ background:#abcdef; } #ul li:nth-child(3){ background:lightgreen; } #ul li:last-child{ background:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } } } var ul=document.getElementById("ul"); var div=document.getElementById("div"); EventUtil.addHandler(ul, "click", function(event){ var e=event.target;//快取 if(e.innerHTML=="仙女粉"){ div.style.background="pink"; }else if(e.innerHTML=="氣質藍"){ div.style.background="#abcdef"; }else if(e.innerHTML=="薄荷綠"){ div.style.background="lightgreen"; }else if(e.innerHTML=="元氣橙"){ div.style.background="orange"; } }); }); </script> </head> <body> <div id="div"></div> <ul id="ul"> <li>仙女粉</li> <li>氣質藍</li> <li>薄荷綠</li> <li>元氣橙</li> </ul> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/150290.html
標籤：JavaScript
上一篇：vuex原始碼簡析