js 事件監聽原理,及相容寫法,jquer基本封裝原理
阿新 • • 發佈：2019-01-24
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>事件監聽原理,及相容寫法,jquer基本封裝原理</title> </head> <body> <button>我綁定了多個事件</button> <script> // ---------------------------------------- 事件箭筒原理 ------------------------------ var btn = document.getElementsByTagName("button")[0]; fn("click",fn1,btn); fn("click",fn2,btn); fn("click",fn3,btn); function fn1(){ console.log("九尺龍泉萬卷書，上天生我意何如。"); } function fn2(){ console.log("不能報國平天下，枉為男兒大丈夫。"); } function fn3(){ console.log("111111。"); } function fn(str,fn,ele){ //判斷位置要注意：如果進入繫結事件本身，那麼該事件已經本綁定了 //所以獲取舊的事件必須在新的事件繫結之前 var oldEvent = ele["on"+str]; ele["on"+str] = function () { //不能直接執行函式，因為我們還不知道以前有沒有繫結我同樣的事件 //進行判斷，如果以前有過繫結事件，那麼把以前的執行完畢在執行現在的事件，如果沒有就直接執行 //如果沒有被定義過事件該事件源的該事件屬性應該是null對應的boolean值是false //如果已經定義過事件該事件源的該事件屬性應該是function本身對應的boolean值是true if(oldEvent){ //因為oldEvent本身他就是函式本身，那麼後面加一個();就是執行函式 oldEvent(); fn(); }else{ //沒有繫結過事件 fn(); } } } //------------------------------ 事件繫結與解綁的相容寫法 ---------------------------- var btn = document.getElementsByTagName("button")[0]; EventListen = { addEvent: function (ele,fn,str) { //通過判斷呼叫的方式相容IE678 //判斷瀏覽器是否支援該方法，如果支援那麼呼叫，如果不支援換其他方法 if(ele.addEventListener){ //火狐谷歌IE9+支援addEventListener //直接呼叫 ele.addEventListener(str,fn); }else if(ele.attachEvent){ //IE678支援attachEvent ele.attachEvent("on"+str,fn); }else{ //在addEventListener和attachEvent都不存在的情況下，用此程式碼 ele["on"+str] = fn; } }, removeEvent: function (ele,fn,str) { if(ele.removeEventListener){ ele.removeEventListener(str,fn); }else if(ele.detachEvent){ ele.detachEvent("on"+str,fn); }else{ ele["on"+str] = null; } } } // btn.addEventListener("click",fn); // 用什麼方式繫結 用什麼方式解綁 EventListen.addEvent(btn,fn,"click"); EventListen.removeEvent(btn,fn,"click"); function fn(){ alert(1); } // ------------------------- jquery 封裝基本原理 ----------------------- // $ 與 _ 是js中能用來起名的特殊符號 jquery選擇了$ // css在定義標籤的時候 可以用 div .ClassName #id 三種方式 function $(str){ var str1 = str.charAt(0); //擷取引數中第一個字元 if(str1==="#"){ //說明是id return document.getElementById(str.slice(1)); }else if(str1 === "."){ //說明是類 return document.getElementsByClassName(str.slice(1)); }else{ //說明是標籤 return document.getElementsByTagName(str); } } </script> </body> </html>