事件冒泡和事件代理的原理字符串常用API - 大前端

Home > List of blog posts > 事件冒泡和事件代理的原理字符串常用API

Blogger Information

Blog 36

fans 1

comment 0

visits 26106

Special Recommendation

More>

Related recommendations

事件冒泡和事件代理的原理

事件冒泡就是从最深处的节点一层一层向外执行，假如有一个节点树div > ul > li > a，给a标签绑定一个click事件，它的执行是从a < li < ul < div，逐步向外执行，这中机制就叫事件冒泡。
1、事件流触发事件时，事件传递的过程
2、事件流三个阶段：事件捕获/事件目标/事件冒泡
3、事件捕获：事件由祖先元素依次向子孙元素传递事件的过程
4、事件冒泡：事件目标向祖先元素传递事件的过程

事件代理是通过事件冒泡的原理来实现的，假如给div节点添加click点击事件, 里面的子节点都会触发点击事件，这种机制就是事件代理。事件代理是利用事件冒泡的原理将子级的事件代理给父级，有两个好处：一可以减少事件的绑定提高性能；二可以可以实现对未来元素的事件绑定。

实例演示代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件冒泡和事件代理</title>
  </head>
  <body>
    <!-- 事件冒泡案例 -->
    <ul>
      <li>事件冒泡1</li>
      <li>事件冒泡2</li>
    </ul>
    <script>
      const mb = document.querySelectorAll("li");
      mb.forEach(function (con) {
        con.onclick = function () {
          console.log(event.currentTarget.textContent);
          console.log("事件主体: ", event.currentTarget);
          console.log("事件目标: ", event.target);
          console.log(event.target === event.currentTarget);
        };
      });
    </script>
    -----------------------------------------------------------------------
    <!-- 事件代理案例 -->
    <ul class="list">
      <li data-dl="1">事件代理1</li>
      <li data-dl="2">事件代理2</li>
    </ul>
    <script>
      const dl = document.querySelector(".list");
      dl.onclick = function () {
        console.log(event.target, event.target.dataset.dl);
        console.log(event.currentTarget.textContent);
      };
    </script>
  </body>
</html>

运行效果

字符串常用API

1.toLowerCase() toUpperCase() 转换大小写,返回新的字符串；
2.charCodeAt(index)根据索引获取字符串中的某一个字符的ASCII编码；
3.startsWith() endsWith() 判断一个字符串是否以某个字符或字符串开头/结尾，返回布尔值；
4.includes(str,stratIndex)判断一个字符串中是否包含某个字符串，返回布尔值；
5.trim() 去除字符串两端的空格；
6.split(’/’) 以某一特殊字符，将字符串分割为数组；
7.substr(startindex,lenght) 截取字符串；
8.charAt(index) 根据索引获取字符串中的某一个字符；
9.replace(oldstr,newstr) 替换字符串中的某一部分，返回新的字符串；
10.indexOf() 查询指定字符在字符串中第一次出现的索引。

实例演示代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字符串中的常用api</title>
  </head>
  <body>
    <script>
      //   转换大小写
      let gg = "hello world";
      console.log(gg.toLocaleLowerCase());
      console.log(gg.toLocaleUpperCase());
      console.log("--------------------------------------------------");
      //   获取字符串中的某一个字符
      console.log(gg.charCodeAt(1));
      console.log("--------------------------------------------------");
      //   判断一个字符串是否以某个字符或字符串开头/结尾
      console.log(gg.startsWith("hello"));
      console.log(gg.endsWith("ld"));
      console.log("--------------------------------------------------");
      //   判断一个字符串中是否包含某个字符串
      console.log(gg.includes("hello"));
      let gg1 = "早上好，下午好，晚上好";
      console.log(gg1.includes("早上好", 5));
      console.log("--------------------------------------------------");
      //   去除字符串两端空格
      let gg2 = "   早  上  好  ！   ";
      console.log(gg2);
      console.log(gg2.trim());
      console.log("--------------------------------------------------");
      //   以某一特殊字符，将字符串分割为数组
      let gg3 = "中国/美国/韩国";
      console.log(gg3.split("/"));
      console.log("--------------------------------------------------");
    </script>
  </body>
</html>

运行效果

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

如何快速创建前端开发环境

2022-07-05 17:12:50

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

事件冒泡和事件代理的原理

实例演示代码

运行效果

字符串常用API

实例演示代码

运行效果