前端进阶Event

1.取得事件对象及取得事件目标对象

    document.onclick =function (evt) {
        evt = evt || window.event;//在IE中evt会是undefined
        //而支持W3C DOM事件的浏览器中事件对象将会作为事件处理函数的第一个参数
        var targetElement = evt.target || evt.srcElement;
        //IE中事件对象没有target属性
    };

2.添加事件

    function addEvent(obj,evtype,fn,useCapture) {
        if (obj.addEventListener) {
            obj.addEventListener(evtype,fn,useCapture);
        } else {
            obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获
        } else {
            obj["on"+evtype]=fn;//事实上这种情况不会存在
        }
    }
    function delEvent(obj,evtype,fn,useCapture) {
        if (obj.removeEventListener) {
            obj.removeEventListener(evtype,fn,useCapture);
        } else {
            obj.detachEvent("on"+evtype,fn);
        } else {
            obj["on"+evtype]=null;
        }
    }

3.Load事件

//使用JavaScript操纵DOM，必须等待DOM加载完毕才可以执行代码，但window.onload有个坏处，它非要等到页面中的所有图片及视频 加载完毕才会触发load事件。
//结果就是一些本来应该在打开时隐藏起来的元素，由于网络延迟，在页面打开时仍然会出现，然后又会突然消失，让用户觉得莫名 其妙。必须与这种丑陋的闪烁告别！
    function addLoadEvent(fn) {
        var init = function() {
            if (arguments.callee.done) return;
            arguments.callee.done = true;
            fn.apply(document,arguments);
        };
        //注册DOMContentLoaded事件，如果支持的话
        if (document.addEventListener) {
            document.addEventListener("DOMContentLoaded", init, false);
        }
        //但对于Safari，我们需要使用setInterval方法不断检测document.readyState
        //当为loaded或complete的时候表明DOM已经加载完毕
        if (/WebKit/i.test(navigator.userAgent)) {
            var _timer = setInterval(function() {
                if (/loaded|complete/.test(document.readyState)) {
                    clearInterval(_timer);
                    init();
                }
            },10);
        }
        //对于IE则使用条件注释，并使用script标签的defer属性
         //IE中可以给script标签添加一个defer(延迟)属性，这样，标签中的脚本只有当DOM加载完毕后才执行
         /*@cc_on @*/
         /*@if (@_win32)
         document.write("<script id=\"__ie_onload\" defer=\"defer\" src=\"javascript:void(0)\"><\/script>");
         var script = document.getElementById("__ie_onload");
         script.onreadystatechange = function() {
             if (this.readyState == "complete") {
                 init();
             }
         };
         /*@end @*/
         return true;
     }