我想知道是否有方法通过使用getElementById获取图像的onclick属性?Javascript getElementById <img>
例如
lastTopic = document.getElementById('topicID').src;
lastTitle = document.getElementById('topicID').title;
这些变量是存储的,所以我想知道是否有方法访问相关的onclick事件?
谢谢。
我想知道是否有方法通过使用getElementById获取图像的onclick属性?Javascript getElementById <img>
例如
lastTopic = document.getElementById('topicID').src;
lastTitle = document.getElementById('topicID').title;
这些变量是存储的,所以我想知道是否有方法访问相关的onclick事件?
谢谢。
你可以使用element.getAttribute(的attributeName)方法的DOM属性值。
由于@ box9表示,您需要动态绑定onclick事件或通过图片标记中的onclick属性。
lastClick = document.getElementById('topicID')。getAttribute('onclick'); lastClass = document.getElementById('topicID')。getAttribute('class');这是解决我的问题的解决方案。再次感谢大家。 – iTEgg 2010-12-11 13:58:15
当然,设置的onclick属性:
document.getElementById('topicID').onclick = function() {
...
};
或者获得它:
alert(document.getElementById('topicID').onclick);
重要的是要记住onclick
实际上是什么:它是一个属性(和一个反射属性),可以使用旧的“DOM0”(例如,从未标准化)机制将处理程序附加到click
事件。
如果您使用的是标准化的机制,像addEventListener
或IE近乎等同attachEvent
,onclick
仍将null
或undefined
因为它们没有被分配到onclick
属性或属性附加click
处理程序。
下面是这个diffrence的探索(live example):
HTML:
<p>This one has an onclick:
<img src='http://www.gravatar.com/avatar/0f1f6b8a8416c6cf0a97cfc864889788?s=32&d=identicon&r=PG' id='dom0img' onclick='dom0click(this);'></p>
<p>This one has a DOM2 click handler:
<img src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG' id='dom2img'></p>
的JavaScript:在Chrome
window.onload = function() {
var dom0img, dom2img;
dom0img = document.getElementById('dom0img');
dom2img = document.getElementById('dom2img');
if (dom2img.addEventListener) {
dom2img.addEventListener('click', dom2click, false);
display("Attached DOM2-style handler to dom2img via addEventListener");
}
else if (dom2img.attachEvent) {
dom2img.attachEvent('onclick', dom2click);
display("Attached DOM2-style handler to dom2img via attachEvent");
}
else {
display("Can't attach DOM2-style handler to dom2img");
}
display("dom0img.onclick = " + dom0img.onclick);
display("dom2img.onclick = " + dom2img.onclick);
};
function dom0click(img) {
display("DOM0 click on " + img.id);
}
function dom2click() {
display("DOM2 click on " + this.id);
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
输出:
Attached DOM2-style handler to dom2img via addEventListener dom0img.onclick = function onclick(event) { dom0click(this); } dom2img.onclick = null
OUTP UT在IE6和IE8:
Attached DOM2-style handler to dom2img via attachEvent dom0img.onclick = function anonymous() { dom0click(this); } dom2img.onclick = null
输出在Firefox上:
Attached DOM2-style handler to dom2img via addEventListener dom0img.onclick = function onclick(event) { dom0click(this); } dom2img.onclick = undefined
+1。你说onclick将保持'空'。它会被设置为“null”还是会“保持”“未定义”? – 2010-12-11 11:33:09
@ box9:取决于浏览器。 (我*只是*添加了'undefined',因为我在Firefox的结果中看到了这一点)。在大多数浏览器中,该属性的默认值似乎为'null'。 – 2010-12-11 11:34:10
刚一说明:'click'是一个事件。 'onclick'是一个处理程序。 – 2010-12-11 11:19:42
@Alin:'onclick'是一个属性,也是一个属性(属性反映属性);你分配给它的是一个处理程序。 – 2010-12-11 11:22:35
@Alin @ T.J。 Crowder onclick既不是属性也不是处理程序。它是一个变量,它在元素对象的上下文中解释时是指向处理程序的属性。 – 2010-12-11 11:29:10