search

博客列表 >JS事件监听与派发及form常用事件、JS字符串、数组常用API

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

云中
云中原创
2022年02月05日 16:52:36627浏览

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <button>添加事件</button>
  11.     <button>事件监听</button>
  12.     <button>事件派发</button>
  13.     <form action="#" name="eventForm" method="post">
  14.       <fieldset>
  15.         <legend>表单常用事件</legend>
  16.         <input
  17.           type="text"
  18.           id="focus"
  19.           placeholder="onFocus"
  20.           onfocus="myFocus(this)"
  21.         />
  22.         <input
  23.           type="text"
  24.           id="blur"
  25.           placeholder="onBlur"
  26.           onblur="myBlur(this)"
  27.         />
  28.         <input
  29.           type="text"
  30.           name="change"
  31.           id="change"
  32.           placeholder="onChange"
  33.           onchange="myChange(this)"
  34.         />
  35.         <input
  36.           type="text"
  37.           id="input"
  38.           placeholder="onInput"
  39.           oninput="myInput(this)"
  40.         />
  41.         <button name="submit" onclick="check(this)">提交</button>
  42.       </fieldset>
  43.     </form>
  44.     <script>
  45.       function show() {
  46.         console.log(event.target);
  47.       }
  48.       //   添加事件
  49.       let btn1 = document.querySelector("button:first-of-type");
  50.       btn1.onclick = show;
  52.       //   添加事件监听
  53.       let btn2 = document.querySelector("button:nth-of-type(2)");
  54.       btn2.addEventListener("click", show, false);
  55.       //   btn2.removeEventListener("click", show, false);
  57.       //   事件派发
  58.       let btn3 = document.querySelector("button:nth-of-type(3)");
  59.       //   先添加一个事件,然后自动去的触发它
  60.       btn3.addEventListener("click", show, false);
  61.       // 创建一个自定义事件
  62.       let myclick = new Event("click");
  63.       //   setInterval: 间歇式的定时器
  64.       //   dispatchEvent 派发事件
  65.       setInterval(() => {
  66.         btn3.dispatchEvent(myclick);
  67.       }, 2000);
  69.       //   form常用事件
  70.       function myFocus(ele) {
  71.         ele.form.focus.value = "获取焦点";
  72.       }
  73.       function myBlur(ele) {
  74.         ele.form.blur.value = "获取焦点，又失去焦点";
  75.       }
  76.       function myChange(ele) {
  77.         ele.form.change.value = "值修改后，又失去焦点";
  78.       }
  79.       //   input: 值发生改变就会触发,不必等失去焦点,与change不同
  80.       function myInput(ele) {
  81.         let input = document.querySelector("#input");
  82.         let p = document.createElement("p");
  83.         p.textContent = ele.form.input.value;
  84.         input.insertAdjacentElement("afterend", p);
  85.       }
  86.       function check(ele) {
  87.         // 防止默认的提交行为, 用户自定义
  88.         event.preventDefault();
  89.         // 防止冒泡
  90.         event.stopPropagation();
  92.         let focus = ele.form.focus;
  93.         let blur = ele.form.blur;
  94.         let change = ele.form.change;
  95.         let input = ele.form.input;
  96.         if (focus.value.length === 0) {
  97.           alert("onFocus不能为空");
  98.           return false;
  99.         } else if (blur.value.length === 0) {
  100.           alert("onBlur不能为空");
  101.           return false;
  102.         } else if (change.value.length === 0) {
  103.           alert("onChange不能为空");
  104.           return false;
  105.         } else if (input.value.length === 0) {
  106.           alert("onInput不能为空");
  107.           return false;
  108.         } else {
  109.           alert("验证通过");
  110.         }
  111.       }
  112.     </script>
  113.   </body>
  114. </html>

图示：

" class="reference-link">

字符串常用API

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

数组常用API

  1. <script>
  2. //   数组元素可以是任何内容
  3.       let arr = [
  4.         1,
  5.         2,
  6.         "a",
  7.         "b",
  8.         true,
  9.         { x: 1, y: 2 },
  10.         [1, 2, 3],
  11.         function () {},
  12.       ];
  13.       console.log(arr);
  14.       //   ...arr :将数组解压成一个一个的元素
  15.       console.log(...arr);
  16.       // [ ] :将元素放在数组中 。 [...arr]快速复制数组。
  17.       let arr1 = [...arr];
  18.       arr1 = arr;
  19.       console.log(arr1);
  21.       arr = [1, 2, 3, ...arr1, 4, 5];
  22.       console.log(arr);
  23.       // Array.of 生成数组
  24.       arr = Array.of(...arr1);
  25.       console.log(arr);
  26.       // Array.from 将类似数组对象，转换为数组
  27.       let likeArr = { 0: "red", 1: "blue", length: 2 };
  28.       console.log(likeArr);
  29.       console.log(Array.from(likeArr));
  31.       // push,pop, unshift,shift,delete
  32.       arr = [];
  34.       //   push:从尾部增加。pop：从尾部删除。后进先出。
  35.       console.log(arr.push(1));
  36.       console.log(arr.push(2));
  37.       console.log(arr.push(3));
  38.       console.log(arr);
  40.       console.log(arr.pop());
  41.       console.log(arr.pop());
  42.       console.log(arr);
  44.       //   unshift:从头部增加。shift：从头部删除。后进先出。
  45.       arr = [];
  46.       console.log(arr.unshift(1));
  47.       console.log(arr.unshift(2));
  48.       console.log(arr.unshift(3));
  49.       console.log(arr);
  51.       console.log(arr.shift());
  52.       console.log(arr.shift());
  53.       console.log(arr);
  55.       //   delete:删除数组元素，但是位置还在，元素个数不变
  56.       arr = [1, 2, 3];
  57.       delete arr[1];
  58.       console.log(arr);
  59.       console.log(arr.length);
  60.       // 通过改变元素个数，也可以删除元素
  61.       arr.length = 2;
  62.       console.log(arr);
  64.       // 迭代方法, 遍历元素
  65.       // 1. forEach,map
  66.       // 2. every, some
  67.       // 3. filter, find, findIndex
  68.       // 4. reduce
  70.       //   forEach((item,index,arr)=>{...}), 每个元素逐个调用回调处理
  71.       arr = [1, 2, 3, 4, 5];
  72.       let res = arr.forEach(function (item, index, arr) {
  73.         // 三个参数中, 只有第一个 item是必须的
  74.         // console.log(item, index, arr);
  75.         return item * 2;
  76.       });
  77.       // 没有返回值
  78.       console.log(res);
  80.       //   map: 参数与功能 与forEach一样,只不过有返回值
  81.       res = arr.map(function (item) {
  82.         // console.log(item);
  83.         return item * 10;
  84.       });
  85.       console.log(res);
  87.       // every, some: 断言函数,返回true,false
  88.       //   every: 数组成员全部满足条件,则返回 true , 否则 false,“与”关系
  89.       console.log(arr.every((item) => item > 0));
  90.       console.log(arr.every((item) => item > 3));
  91.       //   some: 数组成员中只要有一个满足条件,就返回 true, 否则 false, “或”关系
  92.       console.log(arr.some((item) => item > 3));
  93.       console.log(arr.some((item) => item > 10));
  94.       //   filter: 返回数组中的满足条件的元素组成的新数组
  95.       console.log(arr.filter((item) => item > 3));
  96.       //   find 找到第一个符合条件的元素
  97.       console.log(arr.find((item) => item > 3));
  98.       //   findIndex 找到第一个符合条件的元素的序号
  99.       console.log(arr.findIndex((item) => item > 3));
  100.       //   reduce: 归并
  101.       // acc：默认读取第1个元素(在 reduce（）没有第2个参数值的时候，否则为 reduce（）第2个参数值），并保存最终结果
  102.       // cur:当前元素值
  103.       // index：当前元素的序号
  104.       // arr：本数组
  105.       res = arr.reduce(function (acc, cur, index, arr) {
  106.         // 查看reduce的执行过程
  107.         console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
  108.         // 最终结果用 acc 返回,
  109.         return acc + cur;
  110.       }, 5);
  111.       console.log(res);
  113.       arr = [1, 12, 5, 20];
  114.       //   sort 排序  默认排序顺序为按字母升序。在原数组上排序，不生成副本、
  115.       console.log(arr.sort());
  116.       //   升序
  117.       console.log(arr.sort((a, b) => a - b));
  118.       // 降序
  119.       console.log(arr.sort((a, b) => b - a));
  120.       // join 默认用逗号连接每个元素。 array -> String
  121.       console.log(arr.join());
  122.       console.log(arr.join("-"));
  124.       arr = [1, 12, 5, 20];
  125.       console.log(arr);
  126.       //   slice: 获取子元素，原数组不变
  127.       console.log(arr.slice(2, 3));
  128.       console.log(arr.slice(2));
  129.       console.log(arr.slice(-3, 4));
  130.       console.log(arr);
  131.       //   splice: 删除, 新增, 替换。会改变原数组
  132.       // 删除
  133.       console.log(arr);
  134.       console.log(arr.splice(2, 3));
  135.       console.log(arr);
  136.       //   更新
  137.       arr = [1, 12, 5, 20];
  138.       console.log(arr.splice(1, 2, "a", "b"));
  139.       console.log(arr);
  140.       //   插入
  141.       console.log(arr.splice(1, 0, "red", "green"));
  142.       console.log(arr);
  143.       let data = ["red", "green", "blue"];
  144.       console.log(arr.splice(1, 0, ...data));
  145.       console.log(arr);
  146. </script>
上一条：Ubuntu操作系统配置阿里云镜像方法一下一条：获取表单元素、Dom遍历及增删改、JS操作元素内容
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议