<!–
.Abstract {
padding: 15px;
border: dotted 2px #999;
color: #999;
font-family: ‘Microsoft Yahei’;
border-radius: 4px;
}
.First {
margin: 10px 0;
font-family: ‘Microsoft Yahei’;
text-align: left;
padding: 6px 20px;
color: #fff;
background: #55895B;
font-size: 20px;
border-radius: 4px;
clear: both;
}
.Second {
margin: 10px 0;
font-family: ‘Microsoft Yahei’;
padding: 6px 20px;
background: #93C8A2;
color: white;
font-size: 18px;
border-radius: 4px;
clear: both;
}
.Third {
margin: 10px 0;
padding: 6px 20px;
font-family: ‘Microsoft Yahei’;
margin: 15px 0;
font-size: 16px;
color: black;
background: #C6EFD2;
border-radius: 4px;
clear: both;
}
.note {
margin: 10px 0;
padding: 15px 20px 15px 60px;
background: #FCFAA9 url(‘https://img.zhankr.net/m1tmarze502167687.png’) no-repeat 20px 0;
font-size: 15px;
font-family: ‘Microsoft Yahei’;
box-shadow: 0 0 8px #aaa;
clear: both;
}
.demo {
text-align: left;
padding: 6px 20px;
overflow: auto;
border-radius: 4px;
background: orange;
color: #fff;
font-size: 16px;
clear: both;
}
.cnblogs_Highlighter {
border: solid 1px #ccc;
clear: both;
}
.cnblogs_code {
background: #EFFFF4;
border: solid 0px #939393;
font-size: 14px;
clear: both;
padding: 10px 20px;
}
.cnblogs_code pre {
font-size: 14px;
}
.cnblogs_code span {
font-family: Courier New;
font-size: 14px;
}
–>
原文出处: http://www.w3cfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html 。 我拿出作者中的一段,感谢作者原创。
DOM中的事件模拟(自定义事件):
DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent(“CustomEvent”); 返回的对象有一个initCustomEvent()方法接收如下四个参数。
1)type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
2)bubble(布尔值):标示事件是否应该冒泡;
3)cancelable(布尔值):标示事件是否可以取消;
4)detail(对象):任意值,保存在event对象的detail属性中;
可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如:
var div = document.getElementById(“myDiv”);
EventUtil.addEventHandler(div,”myEvent”, function () {
alert(“div myEvent!”);
});
EventUtil.addEventHandler(document,”myEvent”,function(){
alert(“document myEvent!”);
});
if(document.implementation.hasFeature(“CustomEvents”,”3.0″)){
var e = document.createEvent(“CustomEvent”);
e.initCustomEvent(“myEvent”,true,false,”hello world!”);
div.dispatchEvent(e);
}
这个例子中创建了一个冒泡事件“myEvent”。而event.detail的值被设置成了一个简单的字符串,然后在div和document上侦听该事件,因为在initCustomEvent中设置了事件冒泡。所以当div激发该事件时,浏览器会将该事件冒泡到document。
IE中的事件模拟(IE8及之前版本中):
与DOM中事件模拟的思路类似,先创建event对象,再为其指定相应信息,然后再使用该对象来触发事件。当然IE在实现以下每个步骤都不太一样。
例如:
var btn = document.getElementById(“myBtn”);
//创建事件对象,不接受任何参数,结果会返回一个通用的event对象,你必须为该event对象指定所有必要的信息。
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);