Javascript getElementById <img>

Question

我想知道是否有方法通過使用getElementById獲取圖像的onclick屬性？

例如

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

這些變量是存儲的，所以我想知道是否有方法訪問相關的onclick事件？

謝謝。

Answer 1

你可以使用element.getAttribute（的attributeName）方法的DOM屬性值。

由於@ box9表示，您需要動態綁定onclick事件或通過圖片標記中的onclick屬性。

Answer 2

當然，設置的onclick屬性：

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

或者獲得它：

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

Answer 3

重要的是要記住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