替代JavaScript中的內嵌腳本

Question

我知道內聯腳本應該通過保持html/css和javascript分開來避免。

如何在下面的代碼中做這樣的事情？ //在上面的代碼中考慮功能宣佈

<img src="LittleBrain.png" id="littlebrain" onClick="alertMe();"> 

它是如何將有可能在線路編碼不使用？

在此先感謝。

Answer 1

隨着addEventListener()：

var img = document.getElementById('littlebrain'); 
img.addEventListener('click', function(event){ 
    alertMe(); 
}); 

Answer 2

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

甚至更​​短：

document.getElementById('littlebrain').onclick = alertMe; 

Answer 3

var el = document.getElementById('littlebrain'); 
el.addEventListener('click', alertMe, false); 

Answer 4

在JavaScript代碼文件，你可以通過它id找到img元素，然後你可以設置其onclick處理程序。例如，使用jQuery：

$("#littlebrain").click(function() { 
    // ...handler code here... 
}); 

在你的情況下，處理程序是一個名爲函數，稱爲alertMe：

$("#littlebrain").click(alertMe); 

Answer 5

這取決於你支持的瀏覽器，但如果你是幸運的只有得到擔心現代的瀏覽器，你可以使用.addEventListener()

var thing = document.getElementById('thing'); 

thing.addEventListener('click', function(e) { 
    // do something here! 
}, false); 

如果你沒有那麼幸運了，那麼你就必須拿出一個跨瀏覽器的解決方案..

var thing = document.getElementById('thing'); 

addEvent(thing, 'click', function() { 
    // do something 
}); 

function addEvent(elem, event, callback) { 
    if (elem.addEventListener) { 
    elem.addEventListener(event, callback, false); 
    } else if (elem.attachEvent) { // IE7 and earlier 
    elem.attachEvent('on' + event, function() { 
     callback.apply(elem, arguments); 
    }); 
    } else { 
    elem['on' + event] = callback; 
    } 
} 

或者，如果你使用像jQuery庫，你可以很容易地正常化的全過程

$('#thing').on('click', function() { 
    // do something... 
});