JavaScript 教程学习笔记——事件 event(二)

2015-1-11 10:54:32     9 人阅读    

//HTML事件
//var isSupport = document.implementation.hasFeature("HTMLEvents", "2.0");//确定浏览器是否支持DOM规定的HTML事件
//alert(isSupport);//除IE外,都返回true(以非标准方式支持这些事件的浏览器会返回false)
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;
        }
    },
    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;
        }
    },
    getEvent: function(event) {//获取对象的event对象
        return event ? event : window.event;
    },
    getTarget: function(event) {//获得对象的目标元素
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {//取消对象的默认行为
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {//取消事件冒泡
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBobble = true;
        }
    },
    getWheelDelta: function(event) {//跨浏览器的鼠标滚轮事件
        if(event.wheelDelta) {
            return event.wheelDelta;//用户向前滚动鼠标时,wheelDelta值是120的倍数,反之则为-120的倍数
        } else {
            return -event.detail * 40;//兼容FF
        }
    }
};

//EventUtil.addHandler(window, "load", function() {
    //var event = EventUtil.getEvent(event);
    var img = document.getElementById("baidu");
    EventUtil.addHandler(img, "load", function(event) {
        alert(EventUtil.getTaget(event).src);
    });
    
    var image = document.createElement("img");
    EventUtil.addHandler(image, "load", function(event) {
        alert(EventUtil.getTaget(event).src);
    });
    document.body.appendChild(image);
    image.src = "http://www.baidu.com/img/baidu_logo.gif";
    
    var newImg = new Image();
    EventUtil.addHandler(newImg, "load", function(event) {
        alert(newImg.src);
    });
    newImg.src = "http://www.baidu.com/img/baidu_logo.gif";
    
    var script = document.createElement("script");
    EventUtil.addHandler(script, "load", function(event) {
        alert("Loaded");//除IE外浏览器支持script的load事件
    });
    script.src = "demo.js";
    document.body.appendChild(script);
    
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    EventUtil.addHandler(link, "load", function() {
        alert("css Loaded");//IE,Op支持link的load事件
    });
    link.href = "style.css";
    document.getElementsByTagName("head")[0].appendChild(link);
//});

EventUtil.addHandler(window, "unload", function() {//unload事件
    alert("Unloaded!");
});

EventUtil.addHandler(window, "resize", function() {//resize事件
    alert("Resized!");
});

EventUtil.addHandler(window, "scroll", function() {//scroll事件
    if(document.compatMode == "CSS1Compat") {
        alert(document.documentElement.scrollLeft);//标准模式下根据html跟踪scrollLeft变化
    } else {
        alert(document.body.scrollLeft);//怪异模式下根据body跟踪scrollLeft变化
    }
});

//事件变动
var isSupport = document.implementation.hasFeature("MutationEvents", "2.0");//检测浏览器是否支持变动事件
alert(isSupport);//IE,FF返回false
//节点移除
EventUtil.addHandler(window, "load", function(event) {
    var list = document.getElementById("myList");
    EventUtil.addHandler(document, "DOMSubtreeModified", function(event) {
        alert(event.type);//DOMSubtreeModified
        alert(event.target);//object HTMLHtmlElement
    });

    EventUtil.addHandler(document, "DOMNodeRemoved", function(event) {
        alert(event.type);//DOMNodeRemoved
        alert(event.target);//object HTMLDivElement
        alert(event.relatedNode);//object HTMLHtmlElement
    });

    EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument", function(event) {
        alert(event.type);//DOMNodeRemoved
        alert(event.target);//object HTMLUListElement
        alert(event.relatedNode);//object HTMLBodyElement
    });

    list.parentNode.removeChild(list);
});

//节点插入
EventUtil.addHandler(window, "load", function(event) {
    var list = document.getElementById("myList");
    var item = document.createElement("li");
    var itemText = document.createTextNode("Item 5");
    item.appendChild(itemText);

    EventUtil.addHandler(document, "DOMSubtreeModified", function(event) {
        alert(event.type);//DOMSubtreeModified
        alert(event.target);//object HTMLHtmlElement
    });

    EventUtil.addHandler(document, "DOMNodeInserted", function(event) {
        alert(event.type);//DOMNodeInserted
        alert(event.target);//object HTMLLIElement
        alert(event.relatedNode);//object HTMLUListElement
    });

    EventUtil.addHandler(item, "DOMNodeInsertedTnToDocument", function(event) {
        alert(event.type);//DOMSubtreeModified
        alert(event.target);//object HTMLUListElement
    });

    list.appendChild(item);
});

//特性变化
EventUtil.addHandler(window, "load", function(event) {
    var list = document.getElementById("myList");
    
    EventUtil.addHandler(document, "DOMSubtreeModified", function(event) {
        alert(event.type);//DOMSubtreeModified
        alert(event.target);//object HTMLHtmlElement
    });

    EventUtil.addHandler(document, "DOMAttrModified", function(event) {
        alert(event.type);//DOMAttrModified
        alert(event.target);//object HTMLUListElement
        alert(event.relatedNode);//object Attr
        alert(event.attrName);//class
        alert(event.attrChange);//2,表示添加
        alert(event.prevValue);//空字符串
        alert(event.newValue);//ul
    });
    
    list.setAttribute("class", "ul");
});

//文本变化
EventUtil.addHandler(window, "load", function(event) {
    var div = document.getElementById("myDiv");
    
    EventUtil.addHandler(document, "DOMSubtreeModified", function(event) {
        alert(event.type);//DOMSubtreeModified
        alert(event.target);//object HTMLHtmlElement
    });

    EventUtil.addHandler(document, "DOMCharacterDataModified", function(event) {
        alert(event.type);//DOMCharacterDataModified
        alert(event.target);//object Text
        alert(event.prevValue);// "Hello World!"
        alert(event.newValue);// "Some other text."
    });
    
    div.firstChild.nodeValue = "Some other text.";
});


原文地址:http://www.itmmd.com/201501/473.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

JavaScript 教程学习笔记——事件 event(三)   上一篇
下一篇  JavaScript 教程学习笔记——事件 event(一)

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!