search

博客列表 >js急速入门之四

js急速入门之四

培(信仰)
培(信仰)原创
2021年01月20日 16:04:13598浏览

js急速入门之四（事件/事件派发/事件传递/事件代理/常用表单事件/字符串常用方法/留言板）

事件添加

  1. 添加到元素的事件属性上
  2. 通过脚本添加到事件属性上
  3. 通过事件监听器添加事件
  1.     <!-- 1. 添加到元素的事件属性上 -->
  2.     <!-- <button onclick="js代码">button1</button> -->
  3.     <button onclick="console.log(this.innerHTML);">在元素上添加事件</button>
  4.     <!-- 2. 通过脚本添加到事件属性上 -->
  5.     <button>通过脚本在事件属性上添加</button>
  6.     <script>
  7.       const btn2 = document.querySelector("body button:nth-of-type(2)");
  8.       //添加事件
  9.       btn2.onclick = function () {
  10.         console.log(this.innerHTML);
  11.       };
  12.       btn2.onclick = function () {
  13.           this.style.background='skyblue';
  14.       }
  15.     // 移除事件
  16.     //   btn2.onclick = null;
  17.     </script>
  18.     <!-- 3. 通过事件监听器添加事件 -->
  19.     <button>通过事件监听器添加</button>
  20.     <script>
  21.       // addEventListener(事件类型,事件回调方法，触发阶段)
  22.       const btn3 = document.querySelector("button:nth-of-type(3)");
  23.       btn3.addEventListener("click",function (){
  24.           console.log(this.innerHTML);
  25.       });
  27.       //直接使用onclick 事件会覆盖，使用addEventListener就不会覆盖，可以添加多个相同行为事件
  28.       btn3.addEventListener("click",function (){
  29.         this.style.background='yellow';
  30.       });
  32.       //3.1 移除事件，通过回调添加的事件是无法移除的,可以移除独立函数
  33.       //事件方法函数
  34.       const handle =()=>console.log(btn3.innerHTML,"第3次");
  35.       btn3.addEventListener("click",handle);
  36.       btn3.removeEventListener("click",handle);
  38.     </script>  
  40.     <button>点击广告</button>
  41.     <script>
  42.         //3.2 事件派发
  43.         const btn4 = document.querySelector("body button:nth-of-type(4)");
  44.         //自定义事件
  45.         const ev = new Event("click");
  46.         btn4.addEventListener("click",function(){
  47.             console.log("点击了我");
  48.         });
  49.         btn4.dispatchEvent(ev);
  51.         //使用间歇式定时器
  52.         setInterval("btn4.dispatchEvent(ev)",1000);
  54.     </script>

事件传递

  1. 捕获：从最外层元素逐级向内直到事件的绑定着
  2. 目标：到达事件目标
  3. 冒泡：从目标再由内向外逐级向上直到最外层元素

on+event:不支持捕获，只有冒泡
addEventListener()第三个参数是true表示事件在捕获阶段触发，false是冒泡（默认）

  1.       window.addEventListener(
  2.         "click",//事件类型:行为
  3.         (ev) => console.log(ev.currentTarget),//做什么
  4.         true//true表示事件在捕获阶段触发，false是冒泡（默认）,不写就表示冒泡
  5.       );

事件冒泡与事件代理

事件代理：也叫“事件委托”
冒泡最主要的应用就是事件委托
合理的应用冒泡可以减少遍历，将事件委托给父元素
有些时候需要阻止冒泡：ev.stopPropagation();

  1.     <ul>
  2.       <li>item1</li>
  3.       <li>item2</li>
  4.       <li>item3</li>
  5.       <li>item4</li>
  6.       <li>item5</li>
  7.       <li>item6</li>
  8.     </ul>
  9.     <script>
  10.       //事件代理：也叫“事件委托”
  11.       //冒泡最主要的应用就是事件委托
  12.       const lis = document.querySelectorAll("li");
  13.       //遍历每个li，并逐个添加点击事件
  14.       //   lis.forEach(
  15.       //     (li) =>
  16.       //       (li.onclick = (ev) => {
  17.       //         console.log(ev.currentTarget);
  18.       //       })
  19.       //   );
  20.       document.querySelector("ul").addEventListener("click", (ev) => {
  21.         //事件的绑定者
  22.         console.log(ev.currentTarget);
  23.         //事件的触发者,通常是 事件绑定者的子元素
  24.         console.log(ev.target.innerHTML);
  25.       });
  26.     </script>

常用表单事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>常用表单事件</title>
  7.     <style>
  8.       #login {
  9.         width: 20em;
  10.         border: 1px solid #888;
  11.         box-sizing: border-box;
  12.         padding: 1em 2em 1em;
  13.         margin: 2em auto;
  14.         background-color: lightcyan;
  15.         display: grid;
  16.         grid-template-columns: 3em 1fr;
  17.         gap: 1em 0;
  18.       }
  19.       #login .title {
  20.         grid-area: auto / span 2;
  21.         place-self: center;
  22.       }
  23.       #login button {
  24.         grid-area: auto / 2 / auto;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <!-- form.id === form.name  -->
  30.     <!-- 推荐使用id，不用name 表示form 方便css -->
  31.     <form id="login" action="" method="POST">
  32.       <label class="title">用户登录</label>
  33.       <label for="email">邮箱：</label>
  34.       <input type="email" name="email" />
  35.       <label for="password">密码：</label>
  36.       <input type="password" name="password" />
  37.       <button name="submit">登录</button>
  38.     </form>
  39.     <script>
  40.       //获取表单
  41.       // const login = document.forms[0];
  42.       // const login = document.forms["login"];
  43.       // const login = document.forms.item(0);
  44.       // const login = document.forms.item("login");
  45.       // const login = document.querySelector("#login");
  46.       //推荐使用namedItem 适用于ID和name
  47.       const login = document.forms.namedItem("login");
  48.       //submit()提交事件
  49.       login.onsubmit = () => alert("submit...");
  50.       // 一般使用ajax提交；如果是自定义表单的提交行为，应该禁用掉默认的提交
  51.       login.onsubmit = (ev) => ev.preventDefault();
  52.       //或者使用form元素的 onsubmit="return false"属性来禁用默认提交行为
  53.       //推荐使用preventDefault方法，保证HTML代码整洁和代码分离机制
  54.       login.submit.onclick = (ev) => {
  55.         //禁用默认提交行为
  56.         ev.preventDefault();
  57.         //阻止事件冒泡
  58.         ev.stopPropagation();
  59.         // 事件绑定者
  60.         // console.log(ev.currentTarget);
  61.         // 表单中的每一个子元素都有一个form属性，指向它所属的表单
  62.         // console.log(ev.currentTarget.form);
  63.         // isEmpty(login);
  64.         isEmpty(ev.currentTarget.form);
  65.       };
  66.       document.body.addEventListener("click", (ev) =>
  67.         console.log(ev.currentTarget)
  68.       );
  69.       //与表单相关的几个事件
  70.       // focus:获取焦点事件
  71.       // blur: 失去焦点事件
  72.       // input: 只要值发生变化时连续触发，不等失去焦点
  73.       // change: 值发生改变且失去焦点是触发<input><select><textarea>
  74.       // select: 选中文本时触发，<input><textarea>
  75.       // invalid: 提交时表单元素值不满足验证条件时触发
  76.       // reset: 将表单值全部重置到默认值（并非清空）
  77.       // submit: 提交表单时触发，注意触发对象是<form>,提交的是表单不是按钮
  78.       // keydown: 按下键盘时：键盘键按下时
  79.       // keyup: 松开键盘时：键盘键弹起时
  80.       // keypress: 按过键盘时，按下有值键时（除Ctrl/Alt/Shift/Meta），先触发keydown
  81.       // 按下一直不放的触发顺序：keydown,keypress,重复这两个事件，直到keyup
  82.       // load,error:
  84.       // 非空验证
  85.       function isEmpty(form) {
  86.         // console.log(form.email.value.length);
  87.         console.log(form.password);
  88.         if (form.email.value.length === 0) {
  89.           alert("邮箱不能为空");
  90.           form.email.focus();
  91.           return false;
  92.         } else if (form.password.value.length === 0){
  93.             alert("密码不能为空");
  94.           form.password.focus();
  95.           return false;
  96.         } else {
  97.             alert("假设验证通过");
  98.         }
  99.       }
  100.     </script>
  101.   </body>
  102. </html>

留言板

使用了字体图标，通过判断触发者的 className 来找到需要处理的上级父元素

  1.    <div class="messageBoard">
  2.         <h3>留言板</h3>
  3.       <label><input type="text" name="message" /></label>
  4.       <div class="messageBoardCenter">
  5.         <ol id="list"></ol>
  6.       </div>
  7.     </div>
  9.     <script>
  10.       //获取dom元素
  11.       const input = document.querySelector("input");
  12.       const list = document.querySelector("#list");
  14.       input.onkeydown = (ev) => {
  15.         if (ev.key === "Enter") {
  16.           if (ev.currentTarget.value.length === 0) {
  17.             alert("内容不能为空");
  18.           } else {
  19.             //将留言内容添加到列表中
  20.             //创建留言
  21.             let str = `<li>${ev.currentTarget.value}&nbsp&nbsp&nbsp&nbsp<a href="#" class="iconfont delete" title="删除">&#xe69a;</a></li>`;
  22.             list.insertAdjacentHTML("afterbegin", str);
  23.             input.value = null;
  24.           }
  25.         }
  26.       };
  27.       list.addEventListener("click", (ev) => {
  28.         if (ev.target.className === "iconfont delete") {
  29.           // console.log(ev.target.parentElement);
  30.           // list.removeChild(ev.target.parentElement);
  31.           confirm("是否删除?")
  32.             ? list.removeChild(ev.target.parentElement)
  33.             : false;
  34.         }
  35.       });
  36.     </script>

效果图
留言板

字符串常用方法

  1.       // 1. concat() 字符串拼接。大量字符拼接操作时用处较大
  2.       let str = "html".concat(" css ", " php !");
  3.       console.log(str);
  4.       // 2. slice(start, end) 取子串
  5.       str = 'hello php.cn';
  6.       let res = str.slice(0, 5);
  7.       console.log(res);
  8.       //第二个参数为0表示结尾不限，后面全部取出
  9.       console.log(str.slice(0));
  10.       //支持负数：
  11.       console.log(str.slice(-2));
  12.       //正方向从0开始，反方向从-1 开始
  13.       console.log(str.slice(-5,-1));
  15.       // 3. substr(start,length); 省略第二参数表示剩下全部取得
  16.       res = str.substr(0, 5);
  17.       console.log(res);
  18.       res = str.substr(-6, 3);
  19.       console.log(res);
  21.       // 4. trim():删除首尾空格
  22.         let psw = `  999 `;
  23.         psw = '  9999 ';
  24.         psw = "  99999 "
  25.         console.log(psw.trim().length);
  27.     // 5. 将字符串打散变成数组
  28.     res = str.split("");
  29.     console.log(res);
  30.     // 比如说从邮箱中解析出用户和邮箱地址
  31.     res = 'admin@php.cn'.split("@");
  32.     console.log(res);
  33.     console.log(res[0]);
  34.     console.log(res[1]);
  36. // String.prototype.includes()
  37. // 判断一个字符串里是否包含其他字符串。
  38. // String.prototype.endsWith()
  39. // 判断一个字符串的是否以给定字符串结尾，结果返回布尔值。
  40. // String.prototype.indexOf()
  41. // 从字符串对象中返回首个被发现的给定值的索引值，如果没有找到则返回-1。
  42. // String.prototype.lastIndexOf()
  43. // 从字符串对象中返回最后一个被发现的给定值的索引值，如果没有找到则返回-1。

总结：字符串常用方法需要准确记忆。
特别是 substr(),split(),indexOf(),toLowerCase(),toUpperCase(),toString()

上一条：Vue组件基础与父子组件之间的通信方式下一条：云服务器租用的按着自己合适的买
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多