js 事件小結

標籤：style   color   os   width   io   cti   

1，事件對象

    e || window.event //ie

2, 取滑鼠點擊座標 帶有捲軸的

    var top = document.documentElement.scrollTop || document.body.scrollTop;//chorme

        var x = top + e.clientX;  //可視區座標

3, 擷取螢幕座標

    e.screenX    e.screenY

4, shiftKey altKey ctrlkey

5,onkeydown/onkeyup keyCode  返回的是ASCII碼  不區分大小寫

6,onkeypress 

    ff 返回keycode 所有的字元都返回0 

        chorom/ie 返回keycode 支援大小寫

        charCode  返回字元編碼

7， 擷取事件來源

    target = e.target || e.srcElement

        target.tagName

    e.type

8, 事件流

    ff 先捕獲然後再冒泡

    ie  冒泡

9， 取消冒泡

    e.stopPropagation() || e.cancelBubble = true;

10, addEventListener

    1,解決調用兩次，不會被覆蓋 （ie倒著彈出）

     window.addEventListener(‘load‘,function(){

             alert(‘lv‘);

     },false);

     window.addEventListener(‘load‘,function(){

         alert(‘Miss.lv‘);

     },false);

    ff lv Miss.lv

    ie Miss.lv lv

    2,解決傳遞兩個相同的函數，只執行一次（ie沒有解決，傳遞相同的兩個函數)

    window.addEventListener(‘load‘,init,false);

        window.addEventListener(‘load‘,init,false);

   3，this指向 （ie this 指向window）

    window.attachEvent(‘load‘,function(){

            var box = document.getElementById(‘box‘);

            box.attachEvent(‘onclick‘,function(){

             alert(this===window);  //true

            })

    })

    function addEvent(obj,type, fn){

            obj.attachEvent(‘on‘+type, function(){

                fn.call(obj,arguments);

        })

    }

addEvent(window,‘load‘,function(){

    var box = document.getElementById(‘box‘);

    addEvent(box,‘click‘,function(){

        alert(this === box);

    })

})

   4，添加一個額外的方法，不會不覆蓋

11，    移入  e.ralatedTarget e.fromElement mouseover

    移出  e.ralatedTarget e.toElement   mouseout

12, 阻止預設行為

    e.preventDefault();

        e.returnValue = false;

    不能直接用return false；因為return false只能放到前面，後面的就不能執行了

13， 滾輪事件

      非 ff        mousewheel

      ff     DOMMouseScroll

 wD : function(e){

        var e = this.getEvent(e);

        if(e.wheelDelta){

            return e.wheelDelta;

        }else{

            return -e.detail*40;

        }

    }