JavaScript事件处理程序的3种方式

1.HTML事件处理程序

<input type="button" value="按钮" onclick="alert('被触发')" >

注意：1.由于是在HTML中添加JavaScript，所以不能使用未经过转义的HTML语法字符

               如：和号（&），大于小于号等.

           2.事件处理程序在代码执行时，有权访问全局作用域中的任何代码.

缺点：就是与HTML过于紧密，代码改动或者事件改动需要更改的地方比较多

2.DOM0事件处理程序

<input type="button" id="btn">
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){

alert("我被触发");
alert(this.id);
}

</script>

优势：函数赋值给一个事件处理程序的属性。

          简单，跨浏览器。         

注：可以通过this访问元素的任何属性和方法

3、DOM2级事件处理程序

var btn3=document.getElementById("btn3");
btn3.addEventListener("click",function(){
alert("我被触发了");


},false);

基本格式：addEventListener("事件"，函数，是否冒泡还是捕获即false/true);

                   removeEventListener("事件"，函数，true/false);

注意：1.false和true的区别： 

        false从子集开始向上冒泡，先执行自己，在执行父集元素的事件

       true 从父集开始捕获，先执行父集的事件，再执行子集的事件

2.遇到重复的事件如何处理

 var btn3=document.getElementById("btn3");
　　   btn3.addEventListener("click",showmsg,false);
btn3.addEventListener("click",showmsg,true);

从上往下执行。

持续更新...