JS事件模型(事件流/事件模型/事件委托/事件监听)

1|0事件

javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等

2|0事件流

由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念

事件流都会经历三个阶段:

  • 事件捕获阶段(capture phase)(事件委托)
  • 处于目标阶段(target phase)
  • 事件冒泡阶段(bubbling phase) 

        

  使用stopPropagation()来阻止冒泡事件

addEventListener()可以控制事件顺序的优点,既在addEventListener()里添加一个参数false(执行冒泡)或者true(执行捕获),addEventListener()默认为false

  

3|0事件模型

3|1原始事件模型

(1)在html中直接绑定

<input type="button" onclick="fun()">

(2)通过JS代码绑定

var btn = document.getElementById('.btn'); btn.onclick = fun;

1|0特性

绑定速度快

DOM0级事件具有很好的跨浏览器优势,会以最快的速度绑定,但由于绑定速度太快,可能页面还未完全加载出来,以至于事件可能无法正常运行

  • 只支持冒泡,不支持捕获

  • 同一个类型的事件只能绑定一次

3|2标准事件模型

在该事件模型中,一次事件共有三个过程:捕获/处理/冒泡

事件绑定监听函数的方式如下:

addEventListener(eventType, handler, useCapture)

事件移除监听函数的方式如下:

removeEventListener(eventType, handler, useCapture)

参数如下:

  • eventType指定事件类型(不要加on)
  • handler是事件处理函数
  • useCapture是一个boolean用于指定是否在捕获阶段进行处理,一般设置为false与IE浏览器保持一致

1|0特性

  • 可以在一个DOM元素上绑定多个事件处理器,各自并不会冲突
btn.addEventListener(‘click’, showMessage1, false); btn.addEventListener(‘click’, showMessage2, false); btn.addEventListener(‘click’, showMessage3, false);
  • 执行时机

    当第三个参数(useCapture)设置为true就在捕获过程中执行,反之在冒泡过程中执行处理函数

 

4|0IE事件模型

IE事件模型共有两个过程:

  • 事件处理阶段:事件到达目标元素, 触发目标元素的监听函数。
  • 事件冒泡阶段:事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行

事件绑定监听函数的方式如下:

attachEvent(eventType, handler)

事件移除监听函数的方式如下:

detachEvent(eventType, handler)

举个例子:

var btn = document.getElementById('.btn'); btn.attachEvent(‘onclick’, showMessage); btn.detachEvent(‘onclick’, showMessage);

5|0 事件委托

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
 我要给上面的li绑定一个点击事件,有两种方法:一种是给每一个li绑定事件,一种是利用事件委托进行绑定
  • 给每个li绑定事件:
let lis = document.querySelectorAll('li') for (let i = 0; i < lis.length; i++) { lis[i].addEventListener('click', function () { console.log(1); }) }
  • 事件委托进行绑定
var list = document.querySelector('ul') list.addEventListener('click', function (e) { if (e.target.tagName === 'LI') { console.log(e.target.innerText) } })

6|0 事件监听  addEventListener()

  1. element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。

  2. addEventListener() 可以给同一个元素绑定多个事件,不会发生覆盖的情况。如果给同一个元素绑定多个事件,那么采用先绑定先执行的规则。

  3. addEventListener() 在绑定事件的时候,事件名称之前不需带 on

  4. 注意该方法的兼容性,如果要兼容 IE6-8 ,不能使用该方法,可以采用以下方法。

  5. 可以使用 removeEventListener() 来移除之前绑定过的事件。



 


__EOF__

本文作者长安
本文链接https://www.cnblogs.com/jingxin01/p/16404499.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   长安·念  阅读(267)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示