编程语言
首页 > 编程语言> > 带你走进从零认识JavaScript到精髓(十七)JavaScript的事件event对象上

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

作者:互联网

一、 事件 event对象

1.1 事件的概念

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

1.2 事件流

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

img

1.3 事件冒泡

img

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

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 事件捕捉

img

事件的捕获是从最不特定的事件目标到最特定的事件目标。即从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对象上
会持续更新中…
原创不易,期待您的点赞关注与转发评论

标签:JavaScript,DOM,精髓,处理程序,冒泡,btn,event,事件
来源: https://blog.csdn.net/weixin_48193717/article/details/121381999