JS模擬事件操作 · 致力于web前端技術撰寫

昨天晚上，朋友問我怎樣實現模擬鼠標點擊事件，于是有了查找資料，并得到了一些結果。先附上代碼。 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> a{ border: 2px solid red; text-decoration: none; cursor: pointer; font-weight: bold; margin-top: 10px; padding: 20px; } </style> </head> <body> <a id = "box" href = "javascript:void(0)">點擊</a> </body> </html> <script type="text/javascript"> window.onload = function(){ var oBox = document.getElementById("box"); function onclick(e){ e = e || window.event; // console.log(e); alert("a"); } simulation(oBox, "click", onclick); function simulation(obj,type,response){ var isIE=navigator.userAgent.match(/MSIE (\d)/i); isIE = isIE ? isIE[1] : undefined; //給obj綁定事件 //傳統瀏覽器使用attachEvent 現代瀏覽器使用addEventListner isIE < 9 ? obj.attachEvent("on" + type, response): obj.addEventListener(type, response, false); // 觸發自定義事件 if(isIE<9){ //傳統瀏覽器 var event=document.createEventObject();//創建對象 event.msg="我是fireEvent觸發的";//給事件對象添加屬性 obj.fireEvent("on" + type, event);//觸發事件 }else{ //現代瀏覽器 var e=document.createEvent("MouseEvents");//創建事件對象 e.initEvent(type,false,false);//初始化事件對象initMouseEvent需要更多參數 e.msg="我是despatchEvent觸發的"; //給事件對象添加屬性 obj.dispatchEvent(e);//觸發事件 } } } </script> ~~~ 現在，需要做一些說明，首先我只考慮了火狐和谷歌的兼容性，沒有考慮IE6,7,8。今天到公司之后，試圖兼容IE6,7,8，首先用IETester測試，遇到很多問題，經朋友推薦，使用2345瀏覽器去測試，可是不知道為什么，IE7,8都會報不支持attachEvent,不支持createEventObject，不支持fireEvent，實在是無奈至極，查了很多資料，這幾個屬性，明明就是IE的專屬。。。最最神奇的地方是，我去掉兼容性代碼之后重新測測試，竟然IE7,8都是正常的，深深的傷害了我，此處仍然保留考慮兼容性之后的代碼，如果哪位讀到此篇博客的朋友幫我找到問題所在，自當感激不盡。最后，再簡單敘述下，上面代碼中所使用到一些方法。針對IE幾個的特殊方法，在此略過，等上面的代碼得到確認之后再補充。免得誤導他人。 ### 綁定事件： ~~~ obj.addEventListener("事件名（不帶ON）"，函數名，true/false); //IE9/IE11、FF、Chrome支持第一個參數事件名：click、hover、blur等等第二個參數函數名：此事件響應的函數第三個參數useCapture，值為true或false，如果是true則采用capture，如果是false則采用bubbling方式，即事件冒泡。 ~~~ ### 創建事件對象（代替鼠標點擊） ~~~ 通過document上的createEvent()方法，創建事件對象，此方法只接受一個參數，即要創建事件對象的事件字符串 UIEvents：通用的UI 事件，鼠標事件鍵盤事件都是繼承自UI事件，在DOM 3 級上使用的是 UIEvent。 MouseEvents：通用的鼠標事件，在DOM 3 級上使用的是 MouseEvent。 MutationEvents：通用的突變事件，在DOM 3 級上使用的是 MutationEvent。 ~~~ ### 初始化事件對象 ~~~ event.initEvent(eventType,canBubble,cancelable) eventType：事件的類型，字符串值。如"click" canBubble:事件是否冒泡，true為冒泡 cancaelable:是否可以用preventDefault()方法取消事件在創建事件對象之后，觸發事件之前。調用 Event.initEvent() 方法。初始化事件對象，除了可以使用initEvent()方法之外，還可以使用initMouseEvent()和initKeyBoadEvent()，這兩個方法接受的參數都比較多，后面可能會做專門詳細敘述，因為除了鼠標事件之外，還可以模擬鍵盤事件。 ~~~ ### 觸發事件 ~~~ 在創建完事件對象之后，通過dispatchEvent()方法來將事件應用到特定的dom節點上，以便其支持該事件。 ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> <div id = "div_out" style = "border:1px solid green;">外層測試 <div id = "div_inside">內層測試</div></div> </body> </html> <script> window.onload = function(){ document.getElementById("div_out").addEventListener("click",test1,false); document.getElementById("div_inside").addEventListener("click",test2,false); function test1(){ alert("外層div觸發"); } function test2(){ alert("內層div觸發"); } } </script> ~~~ 當值為false時，是冒泡方式，點擊內層的div時，會先后觸發內層的test2和外層的test1 當值為true時，不冒泡，點擊內層的div，只會觸發內層的test2