带你走进从零认识JavaScript到精髓（十七）JavaScript的事件event对象上

2022-11-07 21:50:35

一、事件 event对象

1.1 事件的概念

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，chrome和火狐的事件流是捕获流

1.2 事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，chrome和火狐的事件流是捕获流

1.3 事件冒泡

事件冒泡，即事件开始时由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上（一直到文档）；

1.4 阻止事件冒泡

event.cancelBubble=true;// IE

event.stopPropagation();// 非IE

兼容写法：

event.stopPropagation?event.stopPropagation():event.cancelBubble=true;

    var btn1=document.getElementById("btn1");
    var content=document.getElementById("content");
    btn1.addEventListener("click",function(event){
        alert("btn1");
        event.stopPropagation();
    },false);
    content.addEventListener("click",function(){
        alert("content");
    },false);
    //这里会输出btn1，阻止了向content的冒泡

preventDefault()——用于取消事件的默认操作,比如链接的跳转或者表单的提交，主要是用来阻止标签的默认行为

<a id="go" href="https://www.baidu.com/">禁止跳转</a>
var go = document.getElementById('go');
function goFn(event) {
 event.preventDefault();
// 不会跳转
}
go.addEventListener('click', goFn, false);

1.5 事件捕捉

事件的捕获是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

事件捕获与事件冒泡事件流正好相反的顺序，事件捕获的事件流失最外层逐级向内传播。

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

1.6 DOM 0级事件处理程序

分为2个：一是在标签内写onclick事件

二是在JS写onlicke=function（）{}函数

1级DOM–(为什么没有1级DOM)

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型，这个标准下的事件模型就是我们所说的2级DOM事件模型

1.7 DOM 2级事件处理程序（不支持IE）

监听方法，有两个方法用来添加和移除事件处理程序：

addEventListener()和removeEventListener()。

函数均有3个参数，
第一个参数是要处理的事件名(不带on前缀的才是事件名)
第二个参数是作为事件处理程序的函数
第三个参数是一个boolean值，默认false表示使用冒泡机制，true表示捕获机制。

<button id="btn">点击</button>
 
<script>
  var btn=document.getElementById("btn");
  btn.addEventListener('click',hello，false);
  btn.addEventListener('click',helloagain，false);
  function hello(){
    alert("hello");
  }
  function helloagain(){
    alert("hello again");
  }
</script>

这样的话，事件处理程序只会执行一次。
但是要注意，如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，一共两次，这两次事件需要分别移除。两者不会互相干扰。
这时候的this指向该元素的引用。
这里事件触发的顺序是添加的顺序。

1.8 IE 事件处理程序

对于 Internet Explorer 来说，在IE 9之前，你必须使用 attachEvent 而不是使用标准方法 addEventListener。

IE8及以下版本浏览器实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。

它们都接收两个参数：
1.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。
2.事件处理程序函数。
之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。
removeEventListener()的方法几乎和添加时用法一摸一样：

<button id="btn">点击</button>
 
<script>
  var btn=document.getElementById("btn");
  btn.attachEvent('onclick',hello);
  btn.detachEvent('onclick',hello);
  function hello(){
    alert("hello");
  }
</script>

总结

以上就是今天带你走进从零认识JavaScript到精髓（十七）JavaScript的事件event对象上
会持续更新中…
原创不易，期待您的点赞关注与转发评论

码农公寓

一、 事件 event对象