1.在DOM元素中直接绑定
// html
<div onClick="showAlert()"></div>
// js
function showAlert(){
alert('Hello')
}
2.在JavaScript代码中绑定
// html
<div id="demo"></div>
// js
document.getElementById("demo").onclick = function(){
alert('Hello')
}
3.绑定事件监听函数
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持;但是,IE8.0及其以下版本不支持,它使用attachEvent()来绑定事件监听函数。所以,必须处理一下兼容性问题。
// html
<div id="demo"></div>
// js
addEvent(document.getElementById("demo"),"click",showAlert);
function addEvent(obj,type,handle) {
try{ // 标准浏览器
obj.addEventListener(type,handle,false);
} catch(e) {
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e) { // 早期浏览器
obj['on' + type] = handle;
}
}
}
}
function showAlert(){
alert('Hello')
}