JavaScript getElementById ;

发布于 2024-10-07 18:16:50 字数 261 浏览 2 评论 0原文

我想知道是否有一种方法可以使用 getElementById 访问图像的 onclick 属性？

例如，

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

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

谢谢。

原文

i was wondering if there is a way to acess an image's onclick property by using getElementById?

e.g.

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

these vars are stored so i was wondering if there is a way to access the related onclick event also?

thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

关于从前 2024-10-14 18:16:50

当然，要设置 onclick 属性：

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

或获取它：

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

Sure, to set the onclick property:

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

Or to get it:

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

回复收藏 0 原文

烦人精 2024-10-14 18:16:50

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

如果您使用标准化机制（例如 addEventListener 或 IE 的近乎等效的 attachEvent）附加 click 处理程序，则 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 上的输出：

Attached DOM2-style handler to dom2img via addEventListener
dom0img.onclick = function onclick(event) { dom0click(this); }
dom2img.onclick = null

IE6 和 IE8 上的输出：

Attached DOM2-style handler to dom2img via attachEvent
dom0img.onclick = function anonymous() { dom0click(this); }
dom2img.onclick = null

火狐上的输出：

Attached DOM2-style handler to dom2img via addEventListener
dom0img.onclick = function onclick(event) { dom0click(this); }
dom2img.onclick = undefined

It's important to remember what onclick actually is: It's an attribute (and a reflected property) that can be used to attach a handler to the click event using the old, "DOM0" (e.g., never-standardized) mechanism.

If you are attaching a click handler using a standardized mechanism like addEventListener or IE's near-equivalent attachEvent, onclick will remain null or undefined because those are not assigned to the onclick attribute or property.

Here's an exploration of this 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:

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

Output on Chrome:

Attached DOM2-style handler to dom2img via addEventListener
dom0img.onclick = function onclick(event) { dom0click(this); }
dom2img.onclick = null

Output on IE6 and IE8:

Attached DOM2-style handler to dom2img via attachEvent
dom0img.onclick = function anonymous() { dom0click(this); }
dom2img.onclick = null

Output on Firefox:

Attached DOM2-style handler to dom2img via addEventListener
dom0img.onclick = function onclick(event) { dom0click(this); }
dom2img.onclick = undefined

回复收藏 0 原文