ASCII码 ASCII码

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

发布于：2022-02-04 10:07:28  栏目：技术文档

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>

图示：

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行