js 事件小结

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;
        }
    }
 
 
 
 
 
    

上一篇:[RxJS] Transformation operators: debounce and debounceTime


下一篇:2016MBA排名