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

文章标签: javascript,,javascript事件
2015-1-11 22:03:38     12 人阅读    

//专有事件
//上下文菜单事件
EventUtil.addHandler(window, "load", function(event) {
    var div = document.getElementById("myDiv");

    EventUtil.addHandler(div, "contextmenu", function(event) {//Windows中,单击右键触发contextmenu事件,Mac中“Ctrl+单击”触发
        var event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);

        var list = document.getElementById("myList");
        list.style.left = event.clientX + "px";
        list.style.top = event.clientY + "px";
        list.style.visibility = "visible";
    });

    EventUtil.addHandler(document, "click", function(event) {
        document.getElementById("myList").style.visibility = "hidden";
    });
});

//卸载前事件
EventUtil.addHandler(window, "beforeunload", function(event) {
    var event = EventUtil.getEvent(event);
    event.returnValue = "I'm really going to missing you if you go."
});

//鼠标滚轮事件及DOMMouseScroll事件
EventUtil.addHandler(document, "mousewheel", function(event) {//IE,Sa,Ch,Op
    var event = EventUtil.getEvent(event);
    alert(event.wheelDelta);
});
EventUtil.addHandler(window, "DOMMouseScroll", function(event) {//FF
    var event = EventUtil.getEvent(event);
    alert(event.detail);
});
    //跨浏览器实现
(function(){
    function handleMouseWheel(event) {
        var event = EventUtil.getEvent(event);
        var delta = EventUtil.getWheelDelta(event);
        alert(delta);
    }

    EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
    EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
})();

//DOMContentLoaded事件
EventUtil.addHandler(document, "DOMContentLoaded", function(event) {//FF,Sa,Ch,Op
    alert("Content Loaded!");
});

//就绪状态变化(readystatechange)事件
EventUtil.addHandler(document, "readystatechange", function(event) {//IE
    if(document.readyState) {
        alert("Content Loaded!");
    }
});
EventUtil.addHandler(document, "readystatechange", function(event) {//IE
    if(document.readyState == "interactive" || document.readyState == "complete") {
        EventUtil.removeHandler(document, "readystatechange", arguments.callee);
        alert("Content Loaded!");
    }
});

    //script也支持readystatechange事件
EventUtil.addHandler(window, "load", function() {//IE
    var script = document.createElement("script");

    EventUtil.addHandler(script, "readystatechange", function(event) {
        var event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if(target.readyState == "loaded" || target.readyState == "complete") {
            EventUtil.removeHandler(target, "readystatechange", arguments.callee);
            alert("Script Loaded!");
        }
    });
    script.src = "demo.js";
    document.body.appendChild(script);
});

    //link也支持readystatechange事件
EventUtil.addHandler(window, "load", function() {//IE
    var link = document.createElement("link");
    link.type= "text/css";
    link.rel= "stylesheet";

    EventUtil.addHandler(link, "readystatechange", function(event) {
        var event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if(target.readyState == "loaded" || target.readyState == "complete") {
            EventUtil.removeHandler(target, "readystatechange", arguments.callee);
            alert("Stylesheet Loaded!");
        }
    });
    link.href = "style.css";
    document.getElementsByTagName("head")[0].appendChild(link);
});

//页面显示(pageshow)和页面隐藏(pagehide)事件
(function() {
    var showCount = 0;

    EventUtil.addHandler(window, "load", function() {//刷新浏览器,showCount就会重置为0
        alert("Load fired");
    });

    EventUtil.addHandler(window, "pageshow", function(event) { //FF
        showCount ++;
        alert("Show has been fired " + showCount + " times.");
        alert("Show. Persisted? " + event.persisted);//如果页面被保存在bfcache中,则返回true,反之为false
    });

    EventUtil.addHandler(window, "pagehide", function(event) { //FF
        alert("Hiding. Persisted? " + event.persisted);//如果页面被卸载之后会保存在bfcache中,则返回true,否则false
    });
})();

//内存及性能
//事件委托
EventUtil.addHandler(window, "load", function() {
    var list = document.getElementById("myList");
    EventUtil.addHandler(list, "click", function(event) {
        var event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        switch(target.id) {
            case "li1":
                document.title = "I changed the document's title!";
                break;
            case "li2":
                location.href = "http://www.baidu.com/";
                break;
            case "li3":
                alert("hello!");
                break;
            case "li4":
                return;
                break;
        }
    });
});

//移除事件处理程序
EventUtil.addHandler(window, "load", function() {
    var btn = document.getElementById("myBtn");
    btn.onclick = function() {
        alert("This button is clicked!");
        btn.onclick = null;//先移除按钮的事件处理程序
        btn.innerHTML = "Processing...";
    }
});

//模拟事件
//DOM中的事件模拟
//模拟鼠标单击事件
EventUtil.addHandler(window, "load", function() {
    var btn = document.getElementById("myBtn");
    var event = document.createEvent("MouseEvents");//创建事件对象
    event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);//初始化事件对象
    btn.dispatchEvent(event);//触发事件
});

//模拟键盘事件
EventUtil.addHandler(window, "load", function() {//FF
    var textbox = document.getElementById("myTextbox");
    var ffEvent = document.createEvent("KeyEvents");//创建事件对象
    ffEvent.initKeyEvent("keypress", true, true, document.defaultView, false, false, false, false, 65, 65);//初始化事件对象
    textbox.dispatchEvent(ffEvent);//触发事件,会在指定的文本框中输入字母A

    //其它浏览器中
    var event = document.createEvent(Events);//创建事件对象
    event.initEvent(type, bubbles, cancelable);//初始化事件对象
    event.view = document.defaultView;
    event.altKey = false;
    event.ctrlKey = false;
    event.shiftKey = false;
    event.metaKey = false;
    event.keyCode = 65;
    event.charcode = 65;

    textbox.dispatchEvent(event);
});

//IE中的事件模拟
EventUtil.addHandler(window, "load", function() {//IE
    var btn = document.getElementById("myBtn");

    var event = document.createEventObject();//创建事件对象

    event.screenX = 100;//初始化事件对象
    event.screenY = 100;
    event.clientX = 10;
    event.clientY = 10;
    event.ctrlKey = false;
    event.altKey = false;
    event.shiftKey = false;
    event.button = 0;

    btn.fireEvent("onclick", event);//触发事件
});


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

jQuery教程(12)-ajax操作之基于请求加载数据   上一篇
下一篇  JavaScript 教程学习笔记——事件 event(二)

精彩回复
发表评论
姓名:       

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