替代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... 
});