JS事件监听与派发及form常用事件、JS字符串、数组常用API

程序员文章站 2022-03-13 12:52:00

...

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>

上一篇： deepin v20如何安装mysql

下一篇： HTML常用元素样式、定位学习与应用

JS事件监听与派发及form常用事件、JS字符串、数组常用API

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

" class="reference-link">

字符串常用API

数组常用API

Js表单事件与数组常用 API

Js表单事件与数组常用 API

学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

JS事件监听与派发及form常用事件、JS字符串、数组常用API

js--用blur事件做表单验证，常用字符串、数组api小结

js--用blur事件做表单验证，常用字符串、数组api小结

JS事件监听与派发及form常用事件、JS字符串、数组常用API