Javascript中给document元素绑定自定义事件

发布时间：2011年4月18日 / 分类：JavaScript / 14,484 次浏览 / 评论

一个项目中要使用javascript模拟原来activex控件中的方法，要求触发事件的方式及方法名不能改变。首先想到javascript对象是可以自定义方法或者事件的，比如去除字符串前后的空格，检查字符串是否数字格式等。不过这里要给Document元素绑定一个事件，自己没有想出来怎么搞。还好有强大的Google。

最重要的就是怎么自定义事件，看几个例子：

例1：

首先获取这个对象，然后绑定一个事件GetHtml，然后在ShowHtml中触发事件。看起来很简单。

<html>
<head>
<title>Demo1</title>
</head>
<body>
<div id="iamdiv">121212</div>
<input type="button" value="按下我" onclick="ShowHtml();" />
<script type="text/javascript">
var obj = document.getElementById('iamdiv');
obj.GetHtml = function() {
??? return this.innerHTML;
}
function ShowHtml(){

alert(document.getElementById('iamdiv').GetHtml());
}
</script>
</body>
</html>

例2：

我们可以把绑定事件放到onload中，统一初始化。

<html>
<head>
<title>Demo</title>
</head>
<body>
<div id="iamdiv">121212</div>
<input type="button" value="按下我" onclick="ShowHtml();" />
<script type="text/javascript">
window.onload=function(){
var obj = document.getElementById('iamdiv');
obj.GetHtml = function() {
??? return this.innerHTML;
}
}
function ShowHtml(){
alert(document.getElementById('iamdiv').GetHtml());
}
</script>
</body>
</html>

例3：

将绑定事件放到单独的js文件中，方便多个页面调用。

function InitEvent(){
var obj = document.getElementById('iamdiv');
obj.GetHtml = function() {
??? return this.innerHTML;
}
}
function ShowHtml(){
alert(document.getElementById('iamdiv').GetHtml());
}

<html>
<head>
<title>Demo3</title>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
window.onload=function(){
InitEvent();
}
</script>
</head>
<body>
<div id="iamdiv">121212</div>
<input type="button" value="按下我" onclick="ShowHtml();" />
</body>
</html>

例4：

结合jquery，让其更强大起来。这个例子中我们还给自定义事件传了一个参数。

<html>
<head>
<title>Demo4</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#iamdiv").bind("getHtml",function(e,myName){
alert(myName+"触发:\n"+$(this).html());
});
$("#iambtn").bind("click",function(){
$("#iamdiv").trigger("getHtml",["iambtn"]);
});
});
</script>
</head>
<body>
<div id="iamdiv">121212</div>
<input type="button" id="iambtn" value="按下我" />
</body>
</html>

参考这个例子，还可以给div、span等各种标签所代表的html document元素绑定自定义事件。

是不是看起来都挺简单的。需要的朋友自己试试吧。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马，原文地址《Javascript中给document元素绑定自定义事件》

关键字: document 自定义事件