javascript - Javascript getElementById

Question

我想知道是否有办法通过使用 getElementById 来访问图像的 onclick 属性？

例如

lastTopic = document.getElementById('topicID').src;
lastTitle = document.getElementById('topicID').title;

这些变量被存储，所以我想知道是否有办法访问相关的 onclick 事件？

谢谢。

Answer 1

当然，要设置 onclick 属性：

document.getElementById('topicID').onclick = function () {
   ...
};

或者得到它：

alert(document.getElementById('topicID').onclick);

Answer 2

重要的是要记住onclick实际上是什么：它是一个属性（和一个反射属性），可用于click使用旧的“DOM0”（例如，从未标准化）机制将处理程序附加到事件。

如果您click使用标准化机制（如addEventListenerIE 或 IE 的 near-equivalent ）附加处理程序attachEvent，onclick则将保留null或undefined因为这些未分配给onclick属性或属性。

这是对这种差异的探索（现场示例）：

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：

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);
}​

Chrome 上的输出：

通过 addEventListener 将 DOM2 样式的处理程序附加到 dom2img
dom0img.onclick = function onclick(event) { dom0click(this); }
dom2img.onclick = null

IE6 和 IE8 上的输出：

通过 attachEvent 将 DOM2 样式的处理程序附加到 dom2img
dom0img.onclick = function anonymous() { dom0click(this); }
dom2img.onclick = null

Firefox 上的输出：

通过 addEventListener 将 DOM2 样式的处理程序附加到 dom2img
dom0img.onclick = function onclick(event) { dom0click(this); }
dom2img.onclick = 未定义

Answer 3

您可以使用 element.getAttribute(attributeName) 方法获取任何 DOM 属性值。

正如@box9 所说，您需要动态绑定 onclick 事件或通过图像标签中的 onclick 属性。