js事件详解一

TerryCai 发布于2019-08-21 10:37 / 1747人阅读

摘要：所有节点中都包含这两个方法，并且它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。最后这个布尔值如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。

事件处理的方法： 1、直接在html中编写

例如：

但是这样处理的事件存在两个缺点，一个是时间差问题，一个是不同浏览器对标识符的解析有差异，很可能会在访问非限定对象成员时出错。

2、JavaScript指定事件处理程序

每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示：

var btn=document.getElementById("btn");
    btn.onclick=function(){
        alert("clicked");
    }

在此，我们通过文档对象取得了一个按钮的引用，然后为它指定了onclick事件处理程序。但要注意，在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就可能在一段事件内怎么单击都没有反应。

删除事件：

btn.onclick=null;

以上都是DOM0级的事件处理方式，而DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

例如，要再按钮上为click事件添加处理程序，可以使用以下代码：

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。比如：

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);

btn.addEventListener("click",function(){
    alert("Hello World");
},false);

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。

通过addEventListener()添加的事件处理程序之恩给你使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也以为着通过addEventListener()添加的匿名函数将无法移除。因为传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同。

在大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。

GPU云服务器云服务器 js事件详解 js原生动画详解 js的event详解 js 事件分发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85879.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
详解JS事件 - 事件模型/事件流/事件代理/事件对象/自定义事件

摘要：取消事件的默认行为。阻止事件的派发包括了捕获和冒泡阻止同一个事件的其他监听函数被调用。事件模型 DOM0 级事件模型 -没有事件流，这种方式兼容所有浏览器 // 方式一将事件直接通过属性绑定在元素上 / 方式二获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件 var btn = document.getElementById(btn) btn....

URLOS 2019-08-23 17:07 评论0 收藏0
JS基础篇--JS之onunload、onbeforeunload事件详解

摘要：事件事件在用户退出页面时发生。注意事件同样触发了页面载入事件事件。如图所示大体一句话描述和支持事件但是或者不支持该事件。浏览器兼容情况完美支持不支持文字提醒信息不支持如图所示使用遇到的凡是标签都会触发事件包括这种。简介 onunload，onbeforeunload都是在刷新或关闭时调用，可以在脚本中通过 window.onunload来调用。区别在于onbeforeunload在o...

rollback 2019-08-21 17:26 评论0 收藏0
js事件委托详解

摘要：先说事件流的事件流分为个阶段捕获目标冒泡。如果是每个都去单独绑定事件明显不科学，毕竟去拿列表也是毕竟消耗性能的，同时每个事件绑定的回调函数也会占用大量的内存。那如果有动态插入的元素呢于是委托就可以用上了。先说事件流 js的事件流分为3个阶段：捕获、目标、冒泡。即事件来了，先从上到下传播（捕获），到达目标节点（目标），然后在往上传播（冒泡）。看下图： showImg(https://s...

Sleepy 2019-08-01 18:39 评论0 收藏0