13.4.4

最新推荐文章于 2025-08-01 16:58:00 发布

原创最新推荐文章于 2025-08-01 16:58:00 发布 · 145 阅读

CC 4.0 BY-SA版权

<script>

var EventUtil={
//省略的代码

getCharCode:function(event){
if(typeofevent.charCode=="number"){
return event.charCode;

}else{
event.keyCode;

} //这个方法首先检验charCode属性是否包含数值，如果是，则返回该值，否则，返回keycode.

};

</script>

示例

<script>

var textbox=document.getElementById("mytext");
EventUtil.addHandler(textbox,"keypress",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getCharCode(event));
});

加载外部JavaScript文件的代码

<script>

EventUtil.addHandler(window,"load",function(){
var script=document.createElement("script");
EventUtil.addHandler(script,"readystatechange",function(Event){
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="example.js";
document.body.appendChild(script);
});
</script>

上面同样的编码方式也适用于通过<link>元素加载CSS文件的情况，同样，最重要的是要疫病监测readystate的两个状态，并在调用了一次事件处理程序之后就将其删除。

<script>

EventUtil.addHandler(window,"load",function(){
var link=document.createElement("link");
EventUtil.addHandler(script,"readystatechange",function(Event){
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");
}
});
link.href="example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
</script>

事件委托(占内存少)

<body>
<ul 
id="mylink">
<li 
id="link1">e</li>
<li 
id="link2">w</li>
<li 
id="link3">q</li>
</ul>
</body>
<script>
var list=document.getElementById("mylink");
EventUtil.addHandler(list,"onlick",function(){
var event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
switch(target.id){
case link1:
document.title="I changed the document's title";
break;
case link2:
location.href="http://ww.baidu.com";
break;
case "link3":
alert("hi");
break;

}
})
</script>

为避免双击，单击这个按钮时就将按钮移除并替换成一条消息，移除事件处理程序，内存可被再次利用。

<body>
<div 
id="mydiv">
<input
type="button"
value="Click me"
id="mybtn">
</div>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.onclick=function(){

btn.onclick=null;
document.getElementById("mydiv").innerHTML="pp";
} 

</script>