JS事件之绑定事件_js绑定单击事件第三个参数的含义-CSDN博客

JS中的事件是js中很重要的一部分内容，充分理解事件机制是必不可少的。

JS中事件分类：
鼠标事件：onclick, ondbclick, onmouseover,onmousedown, onmouseup,onmousemove,onmouseout等

键盘事件：onkeyup，onkeydown,onkeypress...

表单事件：onsubmit，onblur，onfoucs，onchange..

页面事件：onload，onunload，onreload...

既然有这么多的事件，那么怎么给元素绑定事件那？？看一下给元素绑定事件应该有几种方法！

第一种方法：HTML元素行间事件（也可以叫HTMl事件处理程序）,直接在html标签里添加事件。
缺点：html和js代码紧密耦合

<input type="button" οnclick="test();"/>
<script>
function test() {
alert("我是行间事件");
}
</script>

第二种添加事件的方法，用的比较多的一种方式：把一个函数赋值给一个事件处理程序属性。（这种方式也叫做Dom0级事件处理程序）
简单而且有跨浏览器的优势

<body>
<input id="button1"type="button" value="按钮"/>
<script>
oBtn = document.getElementById('button1');// 获取的按钮元素
//定义函数abc
function abc(){
alert('abc');
}
oBtn.οnclick=function abc(){alert('abc');}
//oBtn.οnclick=abc;//当点击的时候执行abc这个函数，等价于 oBtn.οnclick=function abc(){alert('abc');}
</script>
</body>

如何要去掉绑定的事件：直接让btn2.onclick = null；即可

上面的这种方式在web开发中是比较常用的方式，onclick，onmousemove等这些事件在网页中都可以很到的支持，但是在手机上就失效了，在手机上需要通过“事件监听”的方式来实现事件绑定，接下来看看第三种方式

第三种方法：通过“事件监听”的方式来绑定事件（也叫Dom2级事件处理程序）
<input id="inputBtn" type="button" value="click"/>
<script>
var inputBtn = document.getElementById('inputBtn');
inputBtn.addEventListener('click',showMsg,false);//鼠标单击的时候调用showMes这个函数
function showMsg() {
alert("事件监听");
}
</script>

注意：这里<script>要放在input下面

addEventListener('click',showMsg,false); 有三个参数

第一个代表触发什么事件，注意这里的写法没有on

第二个参数代表事件发生时调用的事件处理函数

第三个参数是布尔值：true或者false

第三个参数是true：表示允许在捕获阶段响应事件

第三个参数是false：表示不允许在捕获阶段响应事件

(如果看不懂第三个参数说的意思),可以参考我的另一篇博客《JS事件之事件流机制》

上面写的通过addEventListener“事件监听的”方式绑定事件在IE下有问题，因为IE下支持addEventListener这个方法，IE的方法是attachEvent(“onclick”,showMsg);IE的attachEvent只有两个参数

第一个代表触发什么事件，注意这里的写法有on

第二个参数代表事件发生时调用的事件处理函数

以上所述就是第三者绑定事件的方式，这种方式在pc上也都是支持的，只不过不同浏览器支持的方式有略微不同，所以在PC端用事件监听方式绑定事件的时候需要处理一下浏览器兼容的问题