1、HTML事件处理程序
指的是,事件直接加在HTML结构里:
<input type="button" value="按钮" onclick="alert('hello')">
<input type="button" value="按钮" onclick="showMes()">
<script>
function showMes(){
alert('hello');
}
</script>
以上两个例子都是函数调用写在HTML结构里的。最大的缺点是,HTML和js代码是紧密耦合在一起的,也就是说,当我修改js的时候,可能也需要修改HTML里面的内容:例如,我修改showMes()的函数名为showMessage(),那相应的,HTML中的input元素也要修改调用的函数名。
2、DOM 0级事件处理程序(用的最多的一种)
指的是,把一个函数赋值给一个事件处理程序的属性,特点是:在大部分的浏览器都支持,用的较多,而且简单,有跨浏览器的优势,除此之外,还可以给一个元素添加多个事件。
<input type="button" value="按钮" id="btn" onclick="alert('hello')">
<input type="button" value="按钮" onclick="showMes()">
<script>
function showMes(){
alert('hello');
}
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("btn hello");
}
</script>
在这里,事件其实是元素btn的一个属性(给按钮添加一个属性,而这个属性触发了一个函数)
3、DOM 2级事件处理程序
此方法定义了两个方法,用于处理和删除事件的操作:addEventListener()和removeEventListener(),接受3个参数:要处理的事件名,作为事件处理程序的函数,false/true (true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序,一般设置为false,因为添加到冒泡阶段可以最大限度的兼容各种浏览器)
var btns = document.getElementById("btns");
//添加事件监听器
btns.addEventListener('click', showMes, false);
//删除事件
btns.removeEventListener('click', showMes, false);
优点:可以给一个元素添加多个事件。
4、IE事件处理程序(主要是IE和opera)
attachEvent():添加事件; detachEvent():删除事件; 都接受两个参数:事件处理程序的名称,事件处理程序的函数(IE8以及更早的版本,默认是冒泡,所以不需要布尔值)
//添加事件监听器
btns.attachEvent('onclick', showMes);
//删除事件
btns.detachEvent('onclick', showMes);