前端基础笔记

【javascript】事件-内存性能&模拟事件

2017-12-15  本文已影响0人  shanruopeng

内存和性能

//事件处理程序，方便后面使用
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;
        }
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    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;
        }
    }
};

1、事件委托

<ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
</ul>

//传统的做法
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
    location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2, "click", function(event){
    document.title = "I changed the document's title";
});
EventUtil.addHandler(item3, "click", function(event){
    alert("hi");
});

//使用事件委托
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch(target.id){
        case "doSomething":
            document.title = "I changed the document's title";
            break;
        case "goSomewhere":
            location.href = "http://www.wrox.com";
            break;
        case "sayHi":
            alert("hi");
            break;
    }
});

2、移除事件处理程序

<div id="myDiv">
    <input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
    //先执行某些操作
    document.getElementById("myDiv").innerHTML = "Processing..."; //麻烦了！
};
</script>

<!--- 如果你知道某个元素即将被移除，那么最好手工移除事件处理程序。-->
<div id="myDiv">
    <input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        //先执行某些操作
        btn.onclick = null; //移除事件处理程序
        document.getElementById("myDiv").innerHTML = "Processing...";
    };
</script>

模拟事件

1、DOM中的事件模拟

事件名称 解释
UIEvents 一般化的UI 事件。鼠标事件和键盘事件都继承自UI 事件
MouseEvents 一般化的鼠标事件
MutationEvents 一般化的DOM 变动事件
HTMLEvents 一般化的HTML 事件

(1)模拟鼠标事件

参数 含义
type（字符串） 表示要触发的事件类型，例如"click"。
bubbles（布尔值） 表示事件是否应该冒泡。为精确地模拟鼠标事件，应该把这个参数设置为true。
cancelable（布尔值） 表示事件是否可以取消。为精确地模拟鼠标事件，应该把这个参数设置为true。
view（AbstractView） 与事件关联的视图。这个参数几乎总是要设置为document.defaultView。
detail（整数） 与事件有关的详细信息。这个值一般只有事件处理程序使用，但通常都设置为0。
screenX（整数） 事件相对于屏幕的X 坐标。
screenY（整数） 事件相对于屏幕的Y 坐标。
clientX（整数） 事件相对于视口的X 坐标。
clientY（整数） 事件想对于视口的Y 坐标。
ctrlKey（布尔值） 表示是否按下了Ctrl 键。默认值为false。
altKey（布尔值） 表示是否按下了Alt 键。默认值为false。
shiftKey（布尔值） 表示是否按下了Shift 键。默认值为false。
metaKey（布尔值） 表示是否按下了Meta 键。默认值为false。
button（整数） 表示按下了哪一个鼠标键。默认值为0。
relatedTarget（对象） 表示与事件相关的对象。这个参数只在模拟mouseover或mouseout时使用。 
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);

(2)模拟键盘事件

参数 含义
type（字符串） 表示要触发的事件类型，如"keydown"。
bubbles（布尔值） 表示事件是否应该冒泡。为精确模拟鼠标事件，应该设置为true。
cancelable（布尔值） 表示事件是否可以取消。为精确模拟鼠标事件，应该设置为true。
view 与事件关联的视图。这个参数几乎总是要设置为document.defaultView。
key（布尔值） 表示按下的键的键码。
location（整数） 表示按下了哪里的键。0 表示默认的主键盘，1 表示左，2 表示右，3 表示数字键盘，4 表示移动设备（即虚拟键盘），5 表示手柄。
modifiers（字符串） 空格分隔的修改键列表，如"Shift"。
repeat（整数） 在一行中按了这个键多少次。 
/**模拟按住Shift 的同时又按下A 键。**/
var textbox = document.getElementById("myTextbox"),
event;
//以DOM3 级方式创建事件对象
if (document.implementation.hasFeature("KeyboardEvents", "3.0")){
    event = document.createEvent("KeyboardEvent");
    //初始化事件对象
    event.initKeyboardEvent("keydown", true, true, 
    document.defaultView, "a",0, "Shift", 0);
}
//触发事件
textbox.dispatchEvent(event);

(3)模拟其它事件

var event = document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","","",0);
targ et.dispatchEvent(event);

var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
targ et.dispatchEvent(event);

(4)自定义DOM事件

参数 含义
type（字符串） 触发的事件类型，例如"keydown"。
bubbles（布尔值） 表示事件是否应该冒泡。
cancelable（布尔值） 表示事件是否可以取消。
detail（对象） 任意值，保存在event 对象的detail 属性中。 
var div = document.getElementById("myDiv"),
event;
EventUtil.addHandler(div, "myevent", function(event){
    alert("DIV: " + event.detail);
});
EventUtil.addHandler(document, "myevent", function(event){
    alert("DOCUMENT: " + event.detail);
});
if (document.implementation.hasFeature("CustomEvents", "3.0")){
    event = document.createEvent("CustomEvent");
    event.initCustomEvent("myevent", true, false, "Hello world!");
    div.dispatchEvent(event);
}

2、IE中的事件模拟

var btn = document.getElementById("myBtn");

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

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

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


/**采用相同的模式也可以模拟触发keypress 事件**/
var textbox = document.getElementById("myTextbox");

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

//初始化事件对象
event.altKey = false;
event.ctrlKey = false;
event.shiftKey = false;
event.keyCode = 65;

//触发事件
textbox.fireEvent("onkeypress", event);
好好学习
上一篇下一篇

猜你喜欢

热点阅读