js添加事件和移除事件:addEventListener()与removeEventListener()

js添加事件和移除事件:addEventListener()与removeEventListener()作用:   addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。   它们都接受3个参数:事件名、事件处理的函数和布尔值。   布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。示例:环境:移动端,界面禁止触摸事件要在bo

大家好,又见面了,我是你们的朋友全栈君。

另有js事件详解  点击打开链接


一.addEventListener()和removeEventListener()讲解

     addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。

     它们都接受3个参数:如     addEventListener(“事件名” , “事件处理函数” , “布尔值”);        (注:事件名不含”on”,如“click”)

     现在的版本可以省略第三个参数,默认值为false


示例:

要在body上添加事件处理程序,可以使用下列代码:

document.body.addEventListener('touchmove', function (event) {    event.preventDefault();},false);

    通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除


错误用法示例:

document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
},false);
document.body.removeEventListener('touchmove', function (event) {
    event.preventDefault();
},false);

      这个例子中,使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数,但实际上,第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同


正确用法示例:

function bodyScroll(event){
    event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);

重写后的这个例子在addEventListener()和removeEventListener()中用的是相同的函数。


共用函数不能带参数,错误用法示例:

function bodyScroll(event){ event.preventDefault(); } document.body.addEventListener('touchmove',bodyScroll(),false); document.body.removeEventListener('touchmove',bodyScroll(),false);


总结:

1:相同事件绑定和解除,需要使用共用函数;绑定和解除事件时 事件没有”on” 即onclick写成click

2:共用函数不能带参数;

二.addEventListener()与removeEventListener()的第三个参数详解

     布尔值参数是true,表示在捕获阶段调用事件处理程序;就是最不具体的节点先接收事件,最具体的节点最后接收事件

    如果是false,在冒泡阶段调用事件处理程序;则是先寻找指定的位置,由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)

DOM事件流如图(剪自javascript高级程序设计):

js添加事件和移除事件:addEventListener()与removeEventListener()由图可知捕获过程要先于冒泡过程       即 true的触发顺序在false前面

实例测试


HTML内容:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加事件&&解绑事件</title>
</head>
<body>
    <div id="out">
        <p>最外面</p>
        <div id="middle">
            <div id="inner">最里面</div>
        </div>
    </div>
</body>
</html>



js内容:(第1种情况)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:inner-------middle------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false); 
</script>

js内容:(第2种情况)
<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:out------middle-------inner
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},true); 
</script>

js内容:(第3种情况)
<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第4种情况)
<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:out-------middle------inner
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第5种情况)
<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:middle-------inner------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第6种情况)
<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时,触发顺序为:out-------inner------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>

addEventListener的第三个参数有两种情况:ture & false 所以有2*2*2=8种情况



结论:
1.true的触发顺序总是在false前面
2.如果多个均为true 则外层触发先于内层
3.如果多个均为false 则内层触发先于外层



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158174.html原文链接:https://javaforall.net

(1)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 内网IP和公网IP的区别及作用

    内网IP和公网IP的区别及作用说明:本文仅是针对网络知识懵懂人事的一篇白话解说文,并非技术探讨及进阶文章,各位看官自行甄选;本文仅以ipv4为基础。使用网络的人必然会接触IP地址,ip地址又分内网(私有)ip和公网(外网)ip地址,那么他们之间的区别是什么?为什么要分为内网和外网ip?何时使用哪种ip今天我就用大白话的形式,给大家举一个例子,希望能对各位对于ip有一个初步的了解。拿一个家庭来举例,一般你的路由器以内,就是内网,并且路由器内连接的所有设备或终端都会被分配一个内网ip;反之,路由器及以外就是外网ip,这个外网ip通常

    2022年6月9日
    38
  • Hadoop官方文档中文版3.2.1稳定版

    Hadoop官方文档中文版3.2.1稳定版第一节设置单节点集群目的这个文档描述了如何设置和配置单节点的安装 以便您可以使用 HadoopMapRed 和 Hadoop 分布式文件系统 HDFS 进行快速的简单操作 准备平台支持支持 GNU Linux 作为开发的生产平台 Hadoop 已经在具有 2000 个 GNU Linux 集群进行了演示 Windows 平台同样得到了支持 但是以下的步骤只针对于 Linux 如果想在 Windows 平台设置 Hadoop 请参考 wiki 页面 需要的软件对于 Linux 需要的软件包括 必须安装 Java 推荐

    2025年8月14日
    3
  • PHP+MySql例子

    对于熟悉做网站的人来说,要想网站做成动态的,肯定要有数据库的支持,利用特定的脚本连接到数据库,从数据库中提取资料、向数据库中添加资料、删除资料等。这里我通过一个实例来说明如何用php连接到数据库的。

    2021年12月23日
    43
  • cmd切换盘符_cmd分配盘符

    cmd切换盘符_cmd分配盘符cmd切换盘符自己老是忘,每次都要去百度,所幸就记录下:打开cmd的命令行:window+R,输入cmdcmd命令行下怎么切换目录此时默认的地址是C盘cmd命令行下怎么切换目录如果我们要访问D盘,只需要输入D:(不区分大小写)如下图,盘符已经更改cmd命令行下怎么切换目录如果我们要进入一个具体的文件夹,那么继续输入命令。比如我要进入D:\androi…

    2022年10月4日
    2
  • Andriod TV开发之Leanback

    Andriod TV开发之Leanback2019 独角兽企业重金招聘 Python 工程师标准 gt gt gt

    2025年6月13日
    2
  • ROC曲线的通俗理解

    ROC曲线的通俗理解在准备机器学习导论课程考试的过程中,发现自己根据西瓜书上的讲解总是也理解不上去ROC曲线的含义。于是在网络上寻求答案,发现一篇讲解得不错的博客【1】,说得比西瓜书好很多,通俗易懂。这里说一下自己的感想和理解对于已经有数据标签的训练样本,可以得到它们的评分: 其中class一栏表示真实值,p为正例,n为反例,这20个样本中有10个正例10个反例;score一栏则是分类器给出的分类评分。一…

    2022年5月16日
    50

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号