首頁 > 開發者 > JavaScript
scroll在IE8-9中無法捕獲,由於又不能冒泡,因此無法使用事件代理.它在FF下可以通過捕獲來處理.
focus與blur事件在IE下可以通過focusin與focusout事件來類比,但對於那些不能非表單元素或連結或圖片等一般元素,我們需要給它設定tabIndex,才能讓它擁有捕獲焦點或失去焦點的能力.在某些非常新的標準瀏覽器中,可以使用DOMFocusIn,DOMFocusOut來類比,但這種不能使用onXXX調用的事件隨時可能廢棄,因此我也不會用它們來類比.focus,blur的事件代理.
</p><p><!doctype html><br /><html><br /> <head></p><p> <title>事件系統筆記 司徒正美</title></p><p> <style><br /> div.test {<br /> width:400px;<br /> height:320px;<br /> margin:0 15px;<br /> background-color:#D6EDFC;<br /> overflow: auto;<br /> float:left;<br /> }<br /> div.test1{<br /> height: 200px;<br /> background: red;<br /> }</p><p> </style></p><p> <script></p><p> window.onload = function(){</p><p> var el = document.getElementById("test");<br /> el.addEventListener("DOMFocusIn",function(e){<br /> console.log(e.type)<br /> },false)</p><p> el.addEventListener("DOMFocusOut",function(e){<br /> console.log(e.type)<br /> },false);</p><p> el.addEventListener("focus",function(e){<br /> console.log(e.type)<br /> },false)</p><p> el.addEventListener("blur",function(e){<br /> console.log(e.type)<br /> },false);</p><p>}</p><p> </script><br /> </head><br /> <body><br /> <h1>mouseenter與mouseleave</h1><br /> <div class="test" id="test" tabIndex="-1" ><br /> <div class="test1" tabIndex="-1" ></div><br /> </div></p><p> </body><br /></html><br />
運行代碼
scroll 只能用於兩個DIV之間 或window中,這時要求存在捲軸.在IE中,不能冒泡也無法用捕獲,在標準瀏覽器中冒泡情況也非常混亂,只重要的是要判定是否存在捲軸,因此也不打算支援其事件代理.
//讓IE與w3c支援focus與blur與select的代理 "focus_focusin,blur_focusout,select_selectstart".replace(/\w+/g,function(types){ types = types.split("_"); events.special[ types[0] ] = { liveType: DOC.dispatchEvent ? types[0] : types[1], livePhase:!!DOC.dispatchEvent, liveSetup: function(node, type, _, phase){ enableFocusin(node); dom.bind(node,type,function(e){ e = events.fix(e); dom.log("讓IE與w3c支援focus與blur與select的代理") e.type = types[0]; events.handle.call(this,e); },phase); } } });Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
