JS事件监听与派发及form常用事件

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <button>添加事件</button>
    <button>事件监听</button>
    <button>事件派发</button>
    <form action="#" name="eventForm" method="post">
      <fieldset>
        <legend>表单常用事件</legend>
        <input
          type="text"
          id="focus"
          placeholder="onFocus"
          onfocus="myFocus(this)"
        />
        <input
          type="text"
          id="blur"
          placeholder="onBlur"
          onblur="myBlur(this)"
        />
        <input
          type="text"
          name="change"
          id="change"
          placeholder="onChange"
          onchange="myChange(this)"
        />
        <input
          type="text"
          id="input"
          placeholder="onInput"
          oninput="myInput(this)"
        />
        <button name="submit" onclick="check(this)">提交</button>
      </fieldset>
    </form>
    <script>
      function show() {
        console.log(event.target);
      }
      //   添加事件
      let btn1 = document.querySelector("button:first-of-type");
      btn1.onclick = show;
      //   添加事件监听
      let btn2 = document.querySelector("button:nth-of-type(2)");
      btn2.addEventListener("click", show, false);
      //   btn2.removeEventListener("click", show, false);
      //   事件派发
      let btn3 = document.querySelector("button:nth-of-type(3)");
      //   先添加一个事件,然后自动去的触发它
      btn3.addEventListener("click", show, false);
      // 创建一个自定义事件
      let myclick = new Event("click");
      //   setInterval: 间歇式的定时器
      //   dispatchEvent 派发事件
      setInterval(() => {
        btn3.dispatchEvent(myclick);
      }, 2000);
      //   form常用事件
      function myFocus(ele) {
        ele.form.focus.value = "获取焦点";
      }
      function myBlur(ele) {
        ele.form.blur.value = "获取焦点，又失去焦点";
      }
      function myChange(ele) {
        ele.form.change.value = "值修改后，又失去焦点";
      }
      //   input: 值发生改变就会触发,不必等失去焦点,与change不同
      function myInput(ele) {
        let input = document.querySelector("#input");
        let p = document.createElement("p");
        p.textContent = ele.form.input.value;
        input.insertAdjacentElement("afterend", p);
      }
      function check(ele) {
        // 防止默认的提交行为, 用户自定义
        event.preventDefault();
        // 防止冒泡
        event.stopPropagation();
        let focus = ele.form.focus;
        let blur = ele.form.blur;
        let change = ele.form.change;
        let input = ele.form.input;
        if (focus.value.length === 0) {
          alert("onFocus不能为空");
          return false;
        } else if (blur.value.length === 0) {
          alert("onBlur不能为空");
          return false;
        } else if (change.value.length === 0) {
          alert("onChange不能为空");
          return false;
        } else if (input.value.length === 0) {
          alert("onInput不能为空");
          return false;
        } else {
          alert("验证通过");
        }
      }
    </script>
  </body>
</html>

图示：

" class="reference-link">

字符串常用API

<script>
      // 字符串常用API
      let str =
        "There is no such thing as a great talent without great will power. ——没有伟大的意志力,便没有雄才大略。";
      //字符串是数组
      //   索引从0开始:
      // [0->T,1->h,2->e,3->r...]
      // index = [0, str.length-1]
      //   字符串长度
      console.log(str.length);
      //   charAt: 索引->元素
      console.log(str[3]);
      console.log(str.charAt(3));
      //   indexOf: 字符->索引
      console.log(str.indexOf("有"));
      //   search: indexOf一样,但支持正则等
      console.log(str.search("没有"));
      //   concat: 字符串拼装
      // 直接用"+", 或者`模板字面量` 更方便
      console.log(str.concat("——巴尔扎克"));
      //   replace: 替换
      console.log(str.replace("——", " — —"));
      //   slice: 子串, 忽略结束索引的值
      console.log(str.slice(0, 66));
      //   substr: 子串, 只需要知道取多少个
      //  第一个参数：正数：从前向后取。负数：从后向前取， -1最后一个, -2向前一个
      console.log(str.substr(2, 10));
      console.log(str.substr(-10, 5));
      //   split: str->array
      // 通过设定的符号，将字符串分割成数组
      console.log(str.split(" "));
      console.log(str.split("."));
      console.log(str.split(""));
      //   第二个参数：指定分割后数组元素的个数
      console.log(str.split("", 4));
      //   toLowerCase, toUpperCase 大小写转换
      console.log(str.toLowerCase());
      console.log(str.toUpperCase());
      //   与html相关  将字符串,用html标签包裹
      console.log(str.link("http:baidu.com"));
      console.log(str.bold());
      console.log(str.big());
      console.log(str.anchor("锚点"));
</script>

数组常用API

<script>
//   数组元素可以是任何内容
      let arr = [
        1,
        2,
        "a",
        "b",
        true,
        { x: 1, y: 2 },
        [1, 2, 3],
        function () {},
      ];
      console.log(arr);
      //   ...arr :将数组解压成一个一个的元素
      console.log(...arr);
      // [ ] :将元素放在数组中 。 [...arr]快速复制数组。
      let arr1 = [...arr];
      arr1 = arr;
      console.log(arr1);
      arr = [1, 2, 3, ...arr1, 4, 5];
      console.log(arr);
      // Array.of 生成数组
      arr = Array.of(...arr1);
      console.log(arr);
      // Array.from 将类似数组对象，转换为数组
      let likeArr = { 0: "red", 1: "blue", length: 2 };
      console.log(likeArr);
      console.log(Array.from(likeArr));
      // push,pop, unshift,shift,delete
      arr = [];
      //   push:从尾部增加。pop：从尾部删除。后进先出。
      console.log(arr.push(1));
      console.log(arr.push(2));
      console.log(arr.push(3));
      console.log(arr);
      console.log(arr.pop());
      console.log(arr.pop());
      console.log(arr);
      //   unshift:从头部增加。shift：从头部删除。后进先出。
      arr = [];
      console.log(arr.unshift(1));
      console.log(arr.unshift(2));
      console.log(arr.unshift(3));
      console.log(arr);
      console.log(arr.shift());
      console.log(arr.shift());
      console.log(arr);
      //   delete:删除数组元素，但是位置还在，元素个数不变
      arr = [1, 2, 3];
      delete arr[1];
      console.log(arr);
      console.log(arr.length);
      // 通过改变元素个数，也可以删除元素
      arr.length = 2;
      console.log(arr);
      // 迭代方法, 遍历元素
      // 1. forEach,map
      // 2. every, some
      // 3. filter, find, findIndex
      // 4. reduce
      //   forEach((item,index,arr)=>{...}), 每个元素逐个调用回调处理
      arr = [1, 2, 3, 4, 5];
      let res = arr.forEach(function (item, index, arr) {
        // 三个参数中, 只有第一个 item是必须的
        // console.log(item, index, arr);
        return item * 2;
      });
      // 没有返回值
      console.log(res);
      //   map: 参数与功能 与forEach一样,只不过有返回值
      res = arr.map(function (item) {
        // console.log(item);
        return item * 10;
      });
      console.log(res);
      // every, some: 断言函数,返回true,false
      //   every: 数组成员全部满足条件,则返回 true , 否则 false,“与”关系
      console.log(arr.every((item) => item > 0));
      console.log(arr.every((item) => item > 3));
      //   some: 数组成员中只要有一个满足条件,就返回 true, 否则 false, “或”关系
      console.log(arr.some((item) => item > 3));
      console.log(arr.some((item) => item > 10));
      //   filter: 返回数组中的满足条件的元素组成的新数组
      console.log(arr.filter((item) => item > 3));
      //   find 找到第一个符合条件的元素
      console.log(arr.find((item) => item > 3));
      //   findIndex 找到第一个符合条件的元素的序号
      console.log(arr.findIndex((item) => item > 3));
      //   reduce: 归并
      // acc：默认读取第1个元素(在 reduce（）没有第2个参数值的时候，否则为 reduce（）第2个参数值），并保存最终结果
      // cur:当前元素值
      // index：当前元素的序号
      // arr：本数组
      res = arr.reduce(function (acc, cur, index, arr) {
        // 查看reduce的执行过程
        console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
        // 最终结果用 acc 返回,
        return acc + cur;
      }, 5);
      console.log(res);
      arr = [1, 12, 5, 20];
      //   sort 排序  默认排序顺序为按字母升序。在原数组上排序，不生成副本、
      console.log(arr.sort());
      //   升序
      console.log(arr.sort((a, b) => a - b));
      // 降序
      console.log(arr.sort((a, b) => b - a));
      // join 默认用逗号连接每个元素。 array -> String
      console.log(arr.join());
      console.log(arr.join("-"));
      arr = [1, 12, 5, 20];
      console.log(arr);
      //   slice: 获取子元素，原数组不变
      console.log(arr.slice(2, 3));
      console.log(arr.slice(2));
      console.log(arr.slice(-3, 4));
      console.log(arr);
      //   splice: 删除, 新增, 替换。会改变原数组
      // 删除
      console.log(arr);
      console.log(arr.splice(2, 3));
      console.log(arr);
      //   更新
      arr = [1, 12, 5, 20];
      console.log(arr.splice(1, 2, "a", "b"));
      console.log(arr);
      //   插入
      console.log(arr.splice(1, 0, "red", "green"));
      console.log(arr);
      let data = ["red", "green", "blue"];
      console.log(arr.splice(1, 0, ...data));
      console.log(arr);
</script>

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常用语法

2021-12-26 17:46:37