his navi dev apt 屬性 事件冒泡 rac abc delta

clientX/Y 可視區的鼠標坐標 全兼容 offsetX/Y 鼠標坐標到物體邊框的距離 IE+Chrome pageX/Y 頁面 高級 瀏覽器 screenX/Y 屏幕 全兼容(沒用) var e = evt || window.event; evt作為參數兼容高級瀏覽器,window.event兼容低版本IE;(此處註意屬性和變量eg:window.a和a,親著是undefined,後者是is no difined) 添加事件的方法: 1 賦值的方法 ---document.onclick = function(){}; --->缺點:會覆蓋; 取消事件的方法 document.onclick = null; 2 事件綁定------addEventListener(evname,fn,false)/attachEvent(‘on‘+evname,fn); 兼容高級瀏覽器(false代表冒泡,true代表捕獲) 兼容低版本IE(IE事件流只有冒泡) 取消綁定的方法 removeEventListener(evname,fn,false)/detachEvent(‘on‘+evname,fn); DOM事件必須用時間綁定添加; 註意事件綁定的函數,不能作為匿名函數,而是用函數名來取消綁定 3 事件委托 利用事件冒泡,給父級加事件--->優點:1簡化重復的函數代碼2給未來的元素加事件 給父級添加事件委托,this變為父級,要通過var oSrc=oEvent.srcElement||oEvent.target;來獲取事件源,IE和Chrome兼容srcElement , Firefox Chrome兼容target;Chrome都行 setCapture(),將所有的事件歸集捕獲給obj releaseCapture() 取消事件冒泡的方法: evt.stopPropagation();//非IE window.event.cancelBubble = true;//IE中 兼容寫法: window.event ? window.event.cancelBubble = true : evt.stopPropagation(); 取消默認事件的方法: evt.preventDefault(); 非IE window.event.returnValue = false;/return false IE return false阻止默認事件，遇到addEventListener會失效 *用preventDefault解決 ready事件 高級瀏覽器: document.addEventListener(‘DOMContentLoaded‘, function (){ alert(‘ready‘); }, false);

---

低版本IE:(有interactive 和complete) document.attachEvent(‘onreadystatechange‘, function (){ if(document.readyState==‘complete‘){ alert(‘ready‘); } ready 的兼容寫法: function addReady(fn){ if(document.addEventListener){ document.addEventListener(‘DOMContentLoaded‘, fn, false); }else{ document.attachEvent(‘onreadystatechange‘, function (){ if(document.readyState==‘complete‘){ fn(); } }); } } 滾輪事件: wheelDelta IE、Chrome 上 正 下 負 detail Firefox 上 負 下 正 //IE、Chrome /*oDiv.onmousewheel=function (){ alert(‘a‘); };*/

---

//FireFox——DOMMouseScroll oDiv.addEventListener(‘DOMMouseScroll‘, function (){ alert(‘a‘); }, false); DOM事件必須用事件綁定 滾輪的兼容寫法1 function wheel(ev){ var oEvent=ev||event; var down; if(oEvent.wheelDelta){ if(oEvent.wheelDelta<0){ down=true; }else{ down=false; } }else{ if(oEvent.detail<0){ down=false; }else{ down=true; } } if(down){ alert(‘向下‘); }else{ alert(‘向上‘); } } if(window.navigator.userAgent.indexOf(‘Firefox‘)!=-1){ oDiv.addEventListener(‘DOMMouseScroll‘, wheel, false); }else{ oDiv.onmousewheel=wheel; } } //wheelDelta IE、Chrome //上 正 //下 負 //detail Firefox //上 負 //下 正 滾輪寫法2 和3 function wheel(ev){ var oEvent=ev||event; var down; //down=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0; down=(oEvent.wheelDelta||-oEvent.detail)<0; if(down){ alert(‘向下‘); }else{ alert(‘向上‘); } } if(window.navigator.userAgent.indexOf(‘Firefox‘)!=-1){ oDiv.addEventListener(‘DOMMouseScroll‘, wheel, false); }else{ oDiv.onmousewheel=wheel; } 關於相等的問題 -->只有字符串是靜態的,不可變的; //alert(12==12); //alert(‘abc‘==‘abc‘); //alert([1,2,3]==[1,2,3]); //alert(new Array(1,2,3)==new Array(1,2,3)); //[1,2,3] => new Array(1,2,3)

---

//alert(12==12); //alert(‘abc‘==‘abc‘); alert({a: 12, b: 5}=={a: 12, b: 5}); //{a: 12, b: 5} => new Object()

---

//alert(12==12); //alert(‘abc‘==‘abc‘); /*var arr=[1,2,3]; arr[1]=4; alert(arr);*/ var str=‘abc‘; str[1]=‘d‘; alert(str); 只有字符串是靜態的,不可變的;

---

//alert(function (){alert(‘abc‘)}==function (){alert(‘abc‘)}); alert(new Function("alert(‘abc‘)")==new Function("alert(‘abc‘)")); /*var show=function (){ alert(‘abc‘); };*/ //var show=new Function("alert(‘abc‘);"); //show();

事件捕獲、冒泡、綁定、賦值、委托、兼容、滾輪