JS中的事件冒泡及事件代理 - 大前端

Home > List of blog posts > JS中的事件冒泡及事件代理

Blogger Information

Blog 29

fans 1

comment 0

visits 14798

Special Recommendation

More>

Related recommendations

classList 对象

通过classList来操作class属性
首先写一段样式和一个标签

<style>
    .red{
        color: red;
    }
    .bgc{
        background-color: blue;
    }
    .yel{
        color: yellow;
    }
</style>
<h1>我是一个颜色</h1>

接下来通过classList对h1的class进行操作
add() 添加：为选中的对象添加对应的class

h1.classList.add("red");

contains（）判断：判断当前的对象是否有这个class

h1.classList.contains("yellow");

replace（替换目标，新类）：将原本的类替换成一个新的类，有两个参数

h1.classList.replace("yellow", "red");

remove()删除：删除当前类

h1.classList.remove("yellow");

toggle()切换：这个切换的意思是如果当前对象有这个类就将这个类删除，如果没有这个类，就加上

h1.classList.toggle("yellow");

事件

事件的添加与删除

事件三要素：
1.事件名称（click.keydown…..）
2.事件主体（元素，事件触发的主体）
3.事件方法（函数）

event: 预定义对象,保存了绑定到当前事件主体上的事件对象的详情
在event中保存着很多很多事件的细节，可以调用
在下面的代码中，Button 就是事件主体，onclick就是事件名称，储存在onclick里面的方法就是事件方法

<body>
<button>变色</button>
<script>
const bnt = document.querySelector('button');
bnt.onclick = function() {
    console.log('触发了事件');
}
    // </script>
</body>

移除事件
给时间一个null参数，就是移除事件

 btn1.onclick = null;

事件监听器

addEventListener(事件名称, 事件回调方法, 触发阶段);
添加事件
先写一个方法，作为事件方法，然后通过在对应的元素上调用addEventListener

const show = function () {
        console.log(event);
      };
      btn2.addEventListener('click', show, false);

移除事件
removeEventListener(事件名称, 事件回调方法, 触发阶段);
直接在元素上调用removeEventListener

  btn2.removeEventListener('click', show, false);

事件派发器
首先通过addEventListenev创建一个自定义事件

const bnt = document.querySelector('button');
let c =0;
bnt.addEventListener('click', function () {
          c += 0.5;
          console.log(c);
});

然后创建一个自定义事件
注释：常量d 包含一个新事件 Event（首字母要大写）里面的click事件，因为是预定义事件所以可以直接调用
然后在bnt 上调用这个新事件

 const d =new Event('click');
    bnt.dispatchEvent(d);

然后在创建一个定时器让他一直自动点击
定时器有两种
1.setTimeout: 一次性的在规定的时间后触发一次事件
注释：上面已经定义了一个事件d 然后调用setTimeout之后的2000（2000毫秒就是两秒）后触发一次事件

 setTimeout(function () {btn.dispatchEvent(d);}, 2000);

2.setInterval: 间歇式每隔一段时间触发一次事件
注释：1.创建一个新事件d
2.然后将这个新事件D挂载到bnt的事件派发器上
3.然后创建一个间歇式定时器命名为f 里面存储一个方法
4.在方法中有一个判断当i（i在上方代码已经创建，用来存储返回的参数）大于3时，停止定时器（在需要时写这个if ）
clearInterval 清除定时器

 const d =new Event('click');
    bnt.dispatchEvent(d);
    let f = setInterval(function () {
        bnt.dispatchEvent(d);
        // 关闭定时器
        if (c >= 3) clearInterval(f);
      }, 1000);

事件传输机制与事件冒泡

event.currentTarget 事件主体（当前事件触发的元素）
event.target 事件目标（当前事件影响的元素）
事件冒泡，当前元素的时间会向上（父级）传递，如果父级有同名事件是后自动触发（必须是父级，必须是同名事件）
event.stopPropagation(); 阻止冒泡（不让事件冒泡，因为有时候不希望向上传递）
事件冒泡的用法：
如果当前是一组列表或者一个集合，那就会有父元素，根据冒泡的原理，可以直接将事件添加到父级，用这个方法来简化代码（但是要通过一些方法判断当前触发事件的子元素）

这种将子元素的事件绑定到父级的方法就叫事件委托
注释：
首先我们在页面中创建了一个列表ul
我们在JS代码中先获取到ul，这里的ul就是所有li的父级
然后我们为ul添加事件click 在冒泡的原理下，下方的li也会有这个事件（虽然看不到）
但是再点击的过程中，我们要让后台知道具体是那个子元素触发了这个事件，所以我们通过自定义属性data- 为每个子元素Li创建一个自定义属性，在点击时返回这个属性
最后一点就是在事件委托的情况下，通常事件主体（事件触发者）与事件目标是不一致的
在下面的代码中事件主体（触发者）是ul 但是事件目标是li

 <ul>
      <li data-index="1">item1</li>
      <li data-index="2">item2</li>
      <li data-index="3">item3</li>
      <li data-index="4">item4</li>
      <li data-index="5">item5</li>
    </ul>
      const ul = document.querySelector('ul');
      ul.onclick = function () {
        console.log(event.target, event.target.dataset.index);
        console.log(event.currentTarget);
        console.log(event.target === event.currentTarget);
      };

表单事件和字符串常用api

首先是取消表单默认提交行为的三种方法：
当button写到form标签内，就会有一个默认行为，提交，这时候就需要将这个行为取消，因为在表单提交时，通常需要验证，然后再提交
1.修改button 类型
将type（类型）修改成button

<button type="button" name="submit")">登录</button>

2.取消form表单元素的默认提交行为
在表单标签内添加一个onsubmt事件将返回值改为false

<form action="login.php" method="post" id="login" onsubmit="return false">

3.在添加的事件中直接禁用提交按钮的默认行为
直接调用event里面的方法实际中比较推荐这个方法因为在上方两个方法都是通过修改源代码的方式，我们在实际工作中尽量通过JS代码来修改不要去随便修改HTML源码

event.preventDefault();

每一个表单控件 input, button, select…都有一个属性form,是当前表单的引用
通过上面的from属性，我们可以调用当前表单的控件
比如下面的代码我们通过form调用当前表单的email 然后通过判断当前输入框的内容长度，知道当前用户有没有输入东西

let email = ele.form.email;
  if (email.value.length === 0) {
          alert('邮箱不能为空');
          email.focus();
          return false;
        }

常用表单事件：

submit: 提交
focus: 焦点
blur: 失去焦点
change: 值改变,且失去焦点时
input: 值一旦改变就触发, 不等失去焦点

常见的字符串API

创建一个字符串

let str = 'php中文网';

如果我们知道健名，想要拿到某一个字符可以直接调用

console.log(str[0], str[1], str[2], str[3]);

如果我们想拿到某个字符的健名
search():输出字符，会返回健名

console.log(str.search('中'));

字符串添加 concat

console.log(str.concat('(', 'https://php.cn', ')'));

字符串替换 replace

console.log(str.replace('中文网', '.cn'));

获取某一部分字符串 slice
slice（第一个参数是起始索引，第二个参数是结束索引）返回值不包含结束索引（比如下面的0-3 不包含第3索引的内容）

console.log(str.slice(0, 3));

substr（第一个参数是起始索引，第二个参数是获取数量）
例如下方代码的意思就是，获取从0开始，往后数三个的值
第二个参数可以写负数负数就是反方向获取
第二个参数还可以不写，如果不写就返回从起始索引开始之后的所有字符串

console.log(str.substr(0, 3));

length 属性返回字符串的长度

console.log(str.length);

indexOf() 方法返回字符串中指定文本首次出现的索引

console.log(str.indexOf('中'));

toUpperCase() 把字符串转换为大写

console.log(str.toUpperCase());

link() 将字符串显示为链接

console.log(str.link());

blink() 显示闪动的字符串

console.log(str.blink());

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdown的实际应用

2022-07-01 23:15:54