请教关于ajax的事件响应问题:请问这段代码有问题吗?

qm_qingmu 2007-01-10 02:14:39
最近在学ajax,看到可以对页面的的事件进行编程响应,于是模拟写了个程序,但是执行的效果却不是我想像的那么简单。我的代码原意是div内的文本被鼠标点击后会显示它的id,但是实际上它并没有显示,以下是我的测试代码,我想请教一下专家,我的代码有什么问题?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test of onclick</title>
<script language="javascript" type="text/javascript">
var MyObjects = new array();
function myObj(id)
{
this.uid = id;
MyObjects[this.uid] = this;
this.render();
}
myObj.prototype.foo = function()
{
alert(this.id);
}
myObj.prototype.render = function()
{
this.onclick = this.foo;
}
window.onload = function(){
var div = document.getElementById("a");
myObj(div.id);
// div.onclick = foo;
}
</script>
</head>

<body>
<div class="a" id="a" >aaaa</div>
</body>
</html>
...全文
233 点赞 收藏 5
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
qm_qingmu 2007-01-10
我弄明白了,有两个问题:
一、
function myObj(id)
{
this.uid = id;
MyObjects[this.uid] = this;
this.render(); --报错,说此对象不支持此属性或方法
}
render在这里的确是不支持,因为它在后面才被声明,我把它移出来就没错了
二、

myObj.prototype.render = function()
{
this.onclick = this.foo; --这里的onclick有问题,this其实并不是我们想像的div元素,而是myObj本身。

所以基于上面两个问题,我把程序改成如下方式,就可以了:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test of onclick</title>
<script language="javascript" type="text/javascript">
var MyObjects = new Array();
function myObj(elmt, id)
{
this.elmt = elmt;
this.uid = id;
MyObjects[this.uid] = this;
}
myObj.prototype.foo = function()
{
alert(this.id);
}
myObj.prototype.render = function()
{
this.elmt.onclick = this.foo;
}
window.onload = function(){
var div = document.getElementById("a");
var myo = new myObj(div, div.id);
myo.render();
}
</script>
</head>

<body>
<div class="a" id="a" >click me</div>
</body>
</html>

}
回复
qm_qingmu 2007-01-10
我就是想把onclick从myObj中给移出来,放到专门的函数中做处理,这样就可以根据不同的情况做不同的处理,但是,移出来以后,它却不认,对于这一段代码:
function myObj(id)
{
this.uid = id;
MyObjects[this.uid] = this;
this.render(); --报错,说此对象不支持此属性或方法
}
能给点建议么
回复
cbf107 2007-01-10
我读懂了你的需求,但没有看动你的代码,你是想让所有加入MyObjects 的类都继承他的方法还是 如何 ?

不论如何,用下面的代码实现你的需求应该比较容易,希望对你有帮助。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test of onclick</title>
<script language="javascript" type="text/javascript">
var MyObjects = new Array();

function myObj(id)
{
document.getElementById(id).onclick=new Function('alert(this.id);');
MyObjects[id]= document.getElementById(id); //我不是很明白你为什么要MyObjects 所以保留了下来。
}

window.onload = function(){
myObj("a");
myObj("b");
}
</script>
</head>

<body>
<div class="a" id="a" >aaaa</div>
<div id="b">bbbb</div>
</body>
</html>
回复
qm_qingmu 2007-01-10
alert 没有反应,我试过了,所以我觉得很奇怪,想请教一下到底是怎么回事呢
回复
meteorlg 2007-01-10
这么复杂啊
把div.onclick alert出来看看是什么
回复
相关推荐
发帖
Ajax
创建于2007-09-28

5.2w+

社区成员

Web 开发 Ajax
申请成为版主
帖子事件
创建了帖子
2007-01-10 02:14
社区公告
暂无公告