Question

页面中存在多个div，如何实现单击实现取得其中一个的值！

比如<div id=1>1</div><div id=2>2</div><div id=3>3</div><div id=4>4</div>,在其中添加onclick事件，指向同一个方法，如何实现单击取得单击的那个div的值！

Answer 1

三个方法。DOM0级，DOM2级。
网上流传最广的DOM0级
<div
id="a"
onclick="f(this);">1</div>
function
f(e){
alert(e.innerHTML);
}
把this当做参数传入然后调用。
第二个算是混合类型的。严格来说不算是DOM2级。
function
f(){
alert(event.srcElement.innerHTML);
}
<div
id="a"
onclick="f();">1</div>
获取事件源。
这里有兼容问题。IE用srcElement。FF用的是target。而且如果要在FF运行需要把event当做参数写入。如：
<div
id="a"
onclick="f(event);">1</div>
function
f(e){
alert(e.target.innerHTML);
}
第三个方法DOM2级的。
<div
id="a">1</div>
function
addEv(obj,ev,fn){
if(obj.attachEvent){//IE模型
obj.attachEvent("on"+ev,function(){
fn.call(obj);
});
}else
if(obj.addEventListener){//W3C模型
obj.addEventListener(ev,function(){
fn.call(obj);
},false);
}else{
obj["on"+ev]
=
fn;
}
}
var
t
=
document.getElementById('a');
addEv(t,'click',function(){
alert(this.innerHTML);
});
一般类库和高手都用这种写法。
第一个缺点就是如果不加call
IE就会把this指向window。我做了点修改让他this指向当前对象了。还有一个缺点就是无法删除匿名函数写的事件。
obj.attachEvent("on"+ev,function(){
fn.call(obj);
});
可以把这个function写到一个单独的函数中就可以删除了。不过this就不会指向当前的对象了。
如果想做的完美可以搜索detachEvent匿名函数或attachEvent匿名函数。
如果还不懂可以M我。