事件生僻知识学习笔记

DOM2 级事件包括：事件捕获，处于目标，事件冒泡
绑定事件方法：

HTML上直接绑定
DOM0级事件处理程序 - 事件冒泡流上被处理，
DOM2级事件处理程序 - addEventListener / removeEventListener / attachEvent ／ detachEvent
判断是否是DOM2／3级事件，
var isSupported2 = document.implementation.hasFeature("HTMLEvents","2.0")
var isSupported3 = document.implementation.hasFeature("UIEvent","3.0")

3.event事件的属性和方法：

event.type / event.target / event.bubbles / event.cancelable / event.currentTarget
event.preventDefault() / event.stopPropagation() ／event.stopImmediatePropagation()
event.currentTarget == 事件处理程序当前正在处理的元素

4.事件类型

UI事件: load / unload / abort / error / select / resize / scroll
焦点事件： blur / DOMFocusIn / DomFocusOut / focus / focusin / focusout /
鼠标和滚轮事件：

click / dbclick / mousedown / mouseenter / mouseleave / mousemove / mouseout / mouseover / mouseup
event.detail ==> altLeft / ctrlLeft / offsetX / offsetY / shiftLeft

键盘和文本事件

keydown / keypress / keyup
键码；

IMG_0645.JPG

IMG_0646.JPG

HTML5事件

基本支持：IE9+ , Firefox , chrome , safari3.1+ , Opera9+

contextmenu ==> 右键菜单

EventUtil.addHandler(window, "load", function(event){
            var div = document.getElementById("myDiv");
                        
            EventUtil.addHandler(div, "contextmenu", function(event){
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);
                
                var menu = document.getElementById("myMenu");
                menu.style.left = event.clientX + "px";
                menu.style.top = event.clientY + "px";
                menu.style.visibility = "visible";
            });
            
            EventUtil.addHandler(document, "click", function(event){
                document.getElementById("myMenu").style.visibility = "hidden";
            });
        });

beforeunload : 用途是通知用户页面将被卸载，通知
firefox需要设置 event.returnValue 的值为现实给用户的字符串，chrome 和 safari 需要返回字符串

EventUtil.addHandler(window,"beforeonload",function(event){
    var message = "确定要关闭此页吗" 
    event.returnValue = message
    return message
})

DOMContentLoaded : 在DOM树形成后触发，即为在js,css,img加载之前触发。
如果浏览器不支持此事件，可在页面加载期间加载一个事件为0毫秒的调用。但不保证所有浏览器都可以早于 load 事件调用此函数；
readystatechage :
支持此事件的每个对象都有一个 readyState 属性，此属性可能等于以下值：
uninitialized ，loading , loaded , interactive , complate
hashchage: URL参数列表变化

EvnetUtil.addHandler(window , 'hashchange' , function(event){
event.oldUrl
event.newUrl
})


6. 移动设备事件 （小心浏览器兼容情况）
-  orientationchange， safari支持，表示设备横向查看模式和纵向查看模式
window.orentation = 0 / 90 / -90 
- deviceorientation 表示设备在三位空间中的朝向
- devicemotion 表示什么时候移动

7. 触摸与手势事件 （ touch Events 规范）
- 事件： touchstart ／ touchmove ／ touchend ／ touchcancel
- event的属性 ： bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey,metakey
- 与普通触摸事件不同的属性
touches: 当前操作的Touch对象的数组
targetTouchs: 特定鱼事件目标的Touch对象的数组
changeTouches: 自从上次触摸以来发生了什么改变的Touch对象的数组
-  Touch对象包含的属性
clientX  / clientY / identifier / pageX / pageY / screenX / screenY / target

8.使事件占用更少的内存
- 事件委托
- 移除事件处理程序。 如果此出发事件的DOM被移除

9.模拟事件
- 鼠标事件模拟

    EventUtil.addHandler(btn2, "click", function(event){
        //create event object
        var event = document.createEvent("MouseEvents");
        
        //initialize the event object
        //option (type,bubbles,cancelable,view,detail,screenX,...,)
        event.initMouseEvent("click", true, true, document.defaultView, 0, 100, 0, 0, 0, false, 
                             false, false, false, 0, btn2);
        
        //触发事件
        btn.dispatchEvent(event);

    });

//IE中
EventUtil.addHandler(btn2, "click", function(event){
//create event object
var event = document.createEventObject();

        //initialize the event object
        event.view = window;
        event.detail = 0;
        event.screenX = 100;
        event.screenY = 0;
        event.clientX = 0;
        event.clientY = 0;
        event.ctrlKey = false;
        event.altKey = false;
        event.metaKey = false;
        event.shiftKey = false;
        event.button = 0;
        event.relatedTarget = null;
        
        //fire the event
        btn.fireEvent("onclick", event);

    });

 - 键盘模拟事件
注意是DOM3级事件。

    EventUtil.addHandler(btn, "click", function(event){

        //create event object
        var event;
        
        //DOM Level 3 implementation
        if (document.implementation.hasFeature("KeyboardEvent", "3.0")){
            event = document.createEvent("KeyboardEvent");
            event.initKeyboardEvent("keydown", true, true, "a", 0, "Shift");            
        } else {
            try {
                //Firefox implementation
                event = document.createEvent("KeyEvents");
                event.initKeyEvent("keydown", true, true, document.defaultView, false, false, 
                                    true, false, 65, 65);    
            } catch (ex){ //others
                event = document.createEvent("Events");
                event.initEvent("keydown", true, true);
                event.view = document.defaultView;
                event.altKey = false;
                event.ctrlKey = false;
                event.shiftKey = false;
                event.metaKey = false;
                event.keyCode = 65;
                event.charCode = 65;            
            }               
          
        }
        
        //fire the event
        textbox.dispatchEvent(event);
    });

//IE
EventUtil.addHandler(btn, "click", function(event){

        //create event object
        var event = document.createEventObject();
        
        //initialize the event object
        event.altKey = false;
        event.ctrlKey = false;
        event.shiftKey = false;
        event.keyCode = 65;
        
        //fire the event
        textbox.fireEvent("onkeypress", event);

    });

附：

var EventUtil = {

addHandler: function(element, type, handler){
    if (element.addEventListener){
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent){
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
},
getButton: function(event){
    if (document.implementation.hasFeature("MouseEvents", "2.0")){
        return event.button;
    } else {
        switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4: return 1;
        }
    }
},
getCharCode: function(event){
    if (typeof event.charCode == "number"){
        return event.charCode;
    } else {
        return event.keyCode;
    }
},
getClipboardText: function(event){
    var clipboardData =  (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
},
getEvent: function(event){
    return event ? event : window.event;
},
getRelatedTarget: function(event){
    if (event.relatedTarget){
        return event.relatedTarget;
    } else if (event.toElement){
        return event.toElement;
    } else if (event.fromElement){
        return event.fromElement;
    } else {
        return null;
    }

},
getTarget: function(event){
    return event.target || event.srcElement;
},
getWheelDelta: function(event){
    if (event.wheelDelta){
        return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
    } else {
        return -event.detail * 40;
    }
},
preventDefault: function(event){
    if (event.preventDefault){
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
},
removeHandler: function(element, type, handler){
    if (element.removeEventListener){
        element.removeEventListener(type, handler, false);
    } else if (element.detachEvent){
        element.detachEvent("on" + type, handler);
    } else {
        element["on" + type] = null;
    }
},
setClipboardText: function(event, value){
    if (event.clipboardData){
        event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        window.clipboardData.setData("text", value);
    }
},
stopPropagation: function(event){
    if (event.stopPropagation){
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

};

事件生僻知识学习笔记

你可能感兴趣的:(事件生僻知识学习笔记)