您的位置：首页 > Web前端 > JavaScript

JS事件之事件流机制

2020-05-02 12:16 851 查看

JS事件之事件流机制

众所周知JS和HTMl元素的交互几乎都是通过“事件”来完成的，事件从触发到完成响应一般分为3个阶段：捕获阶段，目标阶段，和冒泡阶段。

那么事件是在捕获阶段响应还是在冒泡阶段响应那？？我们是可以手动设置事件是在捕获阶段响应还是在冒泡阶段响应。

理解JS的事件流机制对充分理解JS的事件至关重要，那么什么是JS的事件流那？？

事件流：

可以理解为当事件发生时，响应事件的顺序。这个顺序就按照一个流进行的。这就是事件流。这个流是从里向外流，还是从外向里流那？？不同的浏览器事件流的流向不太一样。

例如IE采用的是 “事件冒泡流”(从里向外流），自然响应事件的顺序也是从里向外的，事件冒泡流也是大部分浏览器采用的默认方式；而网景采用的是 “事件捕获流”(从外向里流)

那么什么是事件冒泡流那？？什么有时事件捕获流那？？？

比如上图body里面有个div，div里面有一个button，当点击button的时候，浏览器会认为你同时点击了div，也点击了body。

如果button，div，body上都绑定了onclick事件，当点击button时，onclick事件就会按照事件流的流向依次做出响应，那么事件的响应顺序是从里往外流，还是从外向里那？？

IE的“事件冒泡流”会认为是从里往外; 先响应button上的事件在响应div上的事件，最后响应body上的事件；

而“事件捕获流”认为是从外向里流：先响应body上的事件，在响应div上的，最后响应button上的事件。

大部分浏览器默认的都是事件源冒泡流的方式来响应事件（自然是在事件冒泡阶段做出响应），不过浏览器也都支持“事件捕获流”的方式（支持在捕获阶段响应事件），需要我们手动设置，怎么设置那？？

可以用“事件监听”方式绑定时间的时候来设置

例如：

button.addEventListener(“click”,function( ){....},false);

将第三个参数设置为true，就表示在“捕获阶段”响应事件，此时事件流就是从外向里流的（先响应body上的事件，在响应div上的，最后响应button上的事件。

），关于绑定事件的几种方式。

JS事件之绑定事件

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>

注意：这里

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

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

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

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

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

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

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

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

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

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

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

<script>
var inputBtn = document.getElementById('inputBtn');
if(typeof window.addEventListener != "undefined"){
// 表示不是IE，支持addEventListener方法
inputBtn.addEventListener('click',showMsg,false);
}else{
inputBtn.attachEvent("onclick",showMsg);
}

function showMsg() {
alert("事件监听");
}

第三种方式绑定的事件怎么去除那？

inputBtn.removeEventListener('click',showMsg,false);

就ok了

妙趣前端

原创文章 83获赞 226访问量 1万+ 关注私信

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航