波斯马BOSSMA Information Technology

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

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

一个项目中要使用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元素绑定自定义事件

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论