13章 事件

<input type=‘button‘ value=‘Click Me‘ onclick="alert(‘Clicked‘)" />

• 方式二    ：    调用其他地方定义的脚本

<script>    function showMessage(){        alert(‘Hello world!‘);    }</script><input type=‘button‘ value=‘Click Me‘ onclick="showMessage()" />

<!-- try-catch避免引发错误 --><input type=‘button‘ value=‘Click Me‘ onclick=‘try{showMessage();}catch(e){}‘ />

var btn = document.getElementById(‘myBtn‘);var handler = function(){    alert(this == window);    //true};btn.attachEvent(‘onclick‘, handler);btn.detachEvent(‘onclick‘, handler);

/*** DOM2>IE>DOM0* param{object} element - dom节点对象* param{string} type - 事件名称* param{boolean} handler - 函数的引用*/var EventUtil = {    //添加事件处理程序    addHandler:    function(element, type, handler){        if(element.addEventListener){    //DOM2            element.addEventListener(type, handler, false)；        }else if(element.attachEvent){    //IE8-            element.attachEvent(‘on‘+type, handler);        }else{    //DOM0            element[‘on‘+type] = hanler;        }    },    //移除事件处理程序    addHandler:    function(element, type, handler){        if(element.removeEventListener){    //DOM2            element.addEventListener(type, handler, false)；        }else if(element.detachEvent){    //IE8-            element.detachEvent(‘on‘+type, handler);        }else{    //DOM0            element[‘on‘+type] = null;        }    }};

var btn = document.getElementById(‘myBtn‘);var handler = function(event){    switch(event.type){        case "click":            alert(‘Clicked‘);            break;        case "mouseover":            event.target.style.backgroundColor = ‘red‘;            break;        case "mouseout":            event.target.style.backgroundColor = ‘‘;            break;    }};btn.onclick = handler;btn.onmouseover = handler;btn.onmouseout  = handler;

var btn = document.getElementById(‘myBtn‘);//捕获阶段document.body.addEventListener(‘click‘, function(event){    alert(event.eventPhase);    //1},true);//处于目标阶段btn.onclick = function(event){    alert(event.eventPhase);    //2};//冒泡阶段document.body.addEventListener(‘click‘, function(event){    alert(event.eventPhase);    //3},false);

var btn = document.getElementById(‘myBtn‘);btn.onclick = function(){    var event = window.event;    alert(event.type);    //‘click‘};

• 作为参数对象（attachEvent()）

<input tyep=‘button‘ value=‘Click Me‘ onclick=‘alert(event.type)‘ />

var EventUtil = {    /**    * 用来添加事件处理程序的方法    * param{object} element - dom    * param{string} type - 事件名称    * param{function} handler - 函数引用    */    addHandler:    function(element, type, handler){        if(element.addEventListener){    //DOM2            element.addEventListener(type, handler, false)；        }else if(element.attachEvent){    //IE8-            element.attachEvent(‘on‘+type, handler);        }else{    //DOM0            element[‘on‘+type] = hanler;        }    },     /**    * 用来移除事件处理程序的方法    * param{object} element - dom    * param{string} type - 事件名称    * param{function} handler - 函数引用    */    addHandler:    function(element, type, handler){        if(element.removeEventListener){    //DOM2            element.addEventListener(type, handler, false)；        }else if(element.detachEvent){    //IE8-            element.detachEvent(‘on‘+type, handler);        }else{    //DOM0            element[‘on‘+type] = null;        }    },    /**    * 获得事件对象的方法    * param{object} event - 事件处理程序执行时产生的事件对象（如果有的话）    * return{object} 事件对象    */    getEvent:    function(event){        return event ? event : window.event;    },    /**    * 获得触发事件的目标的方法    * param{event} event    - 事件对象    * return{object} dom    - 触发事件的节点        */    getTarget:    function(event){        return event.target || event.srcElement;    },    /**    * 取消默认动作    * param{object} event    -事件对象    */    preventDefault:    function(event){        if(event.preventDefault){            event.preventDefault();        }else{            event.returnValue = false;        }    },    /**    * 阻止事件冒泡（或捕获）    * param{object} event    -事件对象    */    stopPropagation:    function(event){        if(event.stopPropagation){            event.stopPropagation();        }else{            event.cancelBubble =  true;        }    }};

btn.onclick = function(event){    event = EventUtil.getEvent(event);    //    确保在不同浏览器都能获得event    var target = EventUtil.getTarget(event);    //确保获得target    EventUtil.preventDefault(event);    //确保清除默认动作    EventUtil.stopPropagatiom(event);    //阻止传播    };

<!DOCTYPE html><html><head>    <title>Load Event Example</title></head><body onload=‘alert(‘Loaded!‘)‘></body></html>

<img src=‘smile.gif‘ onload=‘alert(‘Image loaded.‘)‘>

EventUtil.addHandler(window, ‘load‘, function(){    var image = new Image();    EventUtil.addHandler(image, ‘load‘, function(event){        alert(‘Imaeg loaded!‘);    });});

EventUtil.addHandler(window, ‘load‘, function(){    var script = document.createElement(‘script‘);    EventUtil.addHandler(script, ‘load‘, function(event){        alert(‘Loaded‘);    });    script.src = ‘exaple.js‘;    document.body.appendChild(script);});

<!DOCTYPE html><html><head>    <title>Unloaded</title></head><body onunload="alert(‘unloaded!‘)"></body></html>

EventUtil.addHandler(window, ‘resize‘, function(event){    alert(‘Resized‘);});

<!DOCTYPE html><html><head>    <title>Unloaded</title></head><body onresize="alert(‘resized!‘)"></body></html>

//输出页面的垂直滚动位置，根据不同模式使用不同的元素EventUtil.addHandler(window, ‘scroll‘, function(event){    if(document.compatMode == ‘CSSCompat‘){        alert(document.documentElement.scrollTop);    }else{        alert(document.body.scrollTop);    }});

1. focusout(A)

2. focusin(B)

3. blur(A)

4. DOMFocusOut(A)

5. focus(B)

6. DOMFocusIn(B)

var isSupported = document.implementation.hasFeature(‘MouseEvent‘, ‘2.0‘); 

var div = document.getElementByid(‘myDiv‘);EventUtil.addHandler(div, ‘click‘, function(event){    event = EventUtil.getEvent(event);    alert(‘Client coordinates:‘ + event.clientX + ‘,‘ + event.clientY);});

var div = document.getElementByid(‘myDiv‘);EventUtil.addHandler(div, ‘click‘, function(event){    event = EventUtil.getEvent(event);    alert(‘screen coordinates:‘ + event.screenX + ‘,‘ + event.screenY);});

//如果某个修改键被按下，event中对应的属性值为truevar div = document.getElementById(‘mDiv‘);EventUtil.addHandl(div, ‘click‘, function(event){    event = EventUtil.getEvent(event);    var keys = new Array();    if(event.shiftKey){        keys.push(‘shift‘);    }    if(event.altKey){        keys.push(‘alt‘);    }    if(event.ctrlKey){        keys.push(‘ctrl‘);    }    if(event.metaKey){        keys.push(‘meta‘);    }    alert(‘Keys:‘ + keys.join(‘,’));} );

var EventUtil = {    //省略其它代码        /**    * 跨浏览器获得相关元素的方法    */    getRelatedTarget: function(event){        if(event.relatedTarget){            return event.relatedTarget;        }else if(event.toElement){            return event.toElement;        }else if(event.fromElement){            return null;        }    },    //省略其它代码}；

var EventUtil = {    //省略其它代码    /**    * 检测是否兼容DOM并规范化对相应的值规范化    */    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 6:                    return 2;                case 4:                    return 1;                               }        }    },    //省略其它代码};var div = document.getElementById(‘myDiv‘);EventUtil.addHandler(div, ‘mousedown‘, function(event){    event = EventUtil.getElement(event);    alert(EventUtil.getButton(event));});

//解决Opera 9.5之前的版本wheelDelta值正负点到的问题EventUtil.addHandler(document, ‘mousewheel‘, function(event){    event = EventUtil.getEvent(event);    var delta = (client.engine.opera && client.opera < 9.5 ?-event.wheelDelta.opera:event.wheelDelta);    alert(delta);});

• 文本事件（1）

var textbox = document.getElementById(‘myText‘);EventUtil.addHandler(textbox, ‘keyup‘, function(event){        event = EventUtil.getEvent(event);        alert(event.keyCode);});

var textbox = document.getElementById(‘myText‘);EventUtil.addHandler(textbox, ‘keypress‘, function(event){        event = EventUtil.getEvent(event);        alert(event.charCode);});

• 考虑兼容

var EventUtil = {    //省略的代码        getCharCode: function(event){        if(typeof event.charCode == ‘number‘){            reutrn event.charCode;        }else{            reutrn event.keyCode;        }    },        //省略的代码};

//跨浏览器获得键盘字符var textbox = document.getElementById(‘myText‘);EventUtil.addHandler(textbox, ‘keypress‘, function(event){    event = EventUtil.getEvent(event);    var identifier = event.key || event.keyIdentifier;    if(identifier){        alert(identifier);    }});

//获得用户输入的字符var textbox = document.getElementById(‘myText‘);EventUtil.addHandler(textbox, ‘textInput‘, function(event){    event = EventUtil.getEvent(event);    alert(event.data);});

var isSupported = document.implementation.hasFeature(‘CompositionEvent‘);

• DOM2级变动事件

var isSupported = document.implementation.hasFeature(‘MutationEvents‘, ‘2.0‘);

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 = ‘‘visable;    });    EventUtil.addHandler(document, ‘click‘, function(event){        document.getElementById(‘myMenu‘).style.visibility = ‘hidden‘;    });});

//为了显示这个弹出的对话框，必需将event.returnValue的值设置为要显示给用户的字符串。EventUtil.addHandler(window, ‘beforeunload‘, function(event){    event = EventUtil.getEvent(event);    var message = ‘确定卸载页面吗？‘;    event.returnValue = message;    return message;});

//会在load事件之前触发EventUtil.addHandler(document, ‘DOMContentLoaded‘, function(event){    alert(‘Content loaded‘);});

• 不支持DOMContentLoaded的浏览器：

EventUtil.addHandler(document, ‘readystateChange‘, function(event){    if(document.readyState == ‘interactive‘){         alert(‘Content loaded‘);    }});  

EventUtil.addHandler(document, ‘readystatechange‘, function(event){    if(document.readyState == ‘interactive‘ || document.readyState == ‘complete‘){        EventUtil.removeHandler(document, ‘readystatechange‘, arguments.callee);        alert(‘Content loaded‘);    }});

EventUtil.addHandler(window, ‘load‘, function(){    var script = document.createElement(‘script‘);    EventUtil.addHandler(script, ‘readystatecange‘, function(event){        event = EventUtil.getEvent(event);        var target = EventUtil.getTarget(event);            if(target.readyState == ‘loaded‘){            EventUtil.removeHandler(target, ‘readystatechange‘, argument.callee);        }     });    script.src = ‘example.js‘;    docuemnt.body.appendChild(script);});

EventUtil.addHandler(window, ‘load‘, function(){    var link = document.createElement(‘link‘);    link.type = ‘text/css‘;    link.rel = ‘stylesheet‘;    EventUtil.addHandler(script, ‘readystatecange‘, function(event){        event = EventUtil.getEvent(event);        var target = EventUtil.getTarget(event);         if(target.readyState == ‘loaded‘){            EventUtil.removeHandler(target, ‘readystatechange‘, argument.callee);        }    });    link.href = ‘example.css‘;    docuemnt.getElementsByTagName(‘head‘)[0].appendChild(link);});

(function(){    var showCount = 0;    EventUtil.addHandler(window, ‘load‘, function(){        alert(‘Load fired‘);    });    EventUtil.addHandler(window, ‘pageshow‘, function(){        showCount++;        alert(‘Show has been fired ‘ + showCount + ‘ times.‘);    });})();

• 观察pagehide事件

//Firefox6+、Chrome、OperaEventUtil.addHandler(window, ‘hashchange‘, function(event){    alert(‘Old URL:‘ + event.oldURL + ‘\nNew URL:‘ + event.newURL);});//使用location对象确定当前的参数列表(考虑兼容不支持oldURL和newURL的浏览器)EventUtil.addHandler(window, ‘hashChange‘, function(event){    alert(‘Current hash:‘ + location.hash);});

• 检测支持情况（考虑了IE8和IE7在文档模式下运行会发生BUG的问题）

var isSupported = (‘onhashchange‘ in window) &&（document.documentMode === undefined || document.documentMode > 7）;

EventUtil.addHandler(window, ‘load‘, function(event){    var div = document.getElementById(‘myDiv‘);    div.innerHTML = ‘Current orentation is ‘ + window.orientation;    EventUtil.addHandler(window, ‘orientationchange‘, function(event){        div.innerHTML = ‘current orientation is ‘ + window.orientation;    });});