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

qm_qingmu 2007-01-10 02:14:39

最近在学ａｊａｘ，看到可以对页面的的事件进行编程响应，于是模拟写了个程序，但是执行的效果却不是我想像的那么简单。我的代码原意是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 没有反应，我试过了，所以我觉得很奇怪，想请教一下到底是怎么回事呢

回复赞