js绑定事件

在JavaScript中，常用的绑定事件的方法：

内联模式，在DOM元素中直接绑定。

外联（脚本）模式，在JavaScript代码中绑定。

绑定事件监听器。``

1、内联模式，就是把事件绑定直接写在DOM内

function btnClick(){ 
alert（"内联模式"）；//当点击按钮后会去执行字符串中的代码 
｝
<button onclick = "btnClick();">内联模式</button>

2、外联模式，在javascript代码中绑定

window.onload = function(){
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        alert("外联模式");
    }
}
<button id = 'btn'>外联模式</button>

3、绑定事件监听器 事件监听器（低版本IE浏览器不支持）

addEventListener 格式：

元素节点.addEventListener（）

参数： 第一参数：绑定的事件类型 click mouseover

第二参数：绑定的函数 函数名/匿名函数

第三参数：默认是false （事件冒泡(false) 事件捕获(true)）

//传统的事件绑定有相互覆盖的问题，而事件监听器可以给一个事件添加多个函数，并且这些功能函数都可以保留。 
var oBtn = document.getElementById("btn"); 
oBtn.addEventListener("click", function(){ 
    alert("点击1"); 
}, false); 
oBtn.addEventListener("click", function(){ 
    alert("点击2"); 
}, false);
<button id = 'btn'>事件监听器</button> 

removeEventListener 格式：

元素节点.removeEventListener()

参数：第一个参数：删除事件类型

第二个参数：删除的函数 必须传入函数名

//传统的事件绑定没有办法删除某一个元素节点上指定事件下的某一个函数。 
function show(){ 
    alert("我是的新的函数"); 
} 
aBtns[1].addEventListener("click", function(){
    alert("默认事件"); 
}, false); 
aBtns[0].onclick = function(){ 
    aBtns[1].addEventListener("click", show, false);//添加事件 
} 
aBtns[2].onclick = function(){ 
    aBtns[1].removeEventListener("click", show);//删除事件 
} 

4、三种事件绑定的区别

内联模式：函数写在结构层里面。非常不好，使页面很混乱，行为与结构得不到分离。

外联模式：行为与结构开始分离。第二种绑定方式中只能给一个时间绑定一个处理函数，在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

绑定事件监听器：可以绑定多次同一个事件，且都会执行