事件注册与事件代理

<body>
    <!-- 1.标签属性：通过元素的属性：on + 时间名称（时间属性） -->
    <button onclick="hello()">提交</button>
    <!-- 2.动态属性：元素对象添加属性的方式 -->
    <button>提交</button>
    <!-- 3.事件监听器-->
    <button>提交</button>
    <script>
      // 1.通过元素的属性：on + 时间名称（时间属性）
      function hello() {
        alert("hello");
      }
      // 2.元素对象添加属性的方式（有一个弊端，如果btn2多次绑定同一事件会被覆盖，但是事件监听可以多次绑定）
      const btn2 = document.querySelector("button:nth-of-type(2)");
      btn2.onclick = function () {
        alert("hello");
      };
      //时间删除
      btn2.onclick = null;
      // 3.事件监听
      // btn3.addEventListener(事件类型，事件回掉方法，是否冒泡);
      let btn3 = document.querySelector("button:nth-of-type(3)");
      btn3.addEventListener("click", function () {
        alert("aa");
      })
      // 事件移除
      //如果事件方法使用了回调，就无法移除  例如弹aa的监听事件就无法用下面方法移除
      btn3.removeEvenListener("click", function () {
        alert("bbb");
      });
      // 但是如果是这样的方法就可以移除：
      btn3.addEventListener("click", show);
      function show() {
        alert("bbb");
      }
      btn3.removeEvenListener("click", show);
      // 4.事件派发
      let myClick = new Event("click");
      let but3 = document.querySelector("button:nth-of-type(3)");
      btn3.addEventListener("click",() => {alert("123");})
      // 派发事件
      setInterval(function () {
        btn3.dispatchEvent(myClick);
      }, 3000)
    </script>
  </body>

事件的传递机制

// 事件传递机制：
// 1.捕获：从最外层元素逐级向内，直到事件绑定者
// 2.冒泡：从事件目标逐级向外部，知道最外层元素
// 默认false，事件发生在冒泡阶段
// true事件在捕获
window.addEventListener("click", show, false);
function show(ev) {
  // ev:事件对象，是可以直接在事件方法中使用的对象
  // ev.target:事件的触发者
  // ev.currentTarget:事件的绑定者
}

// 事件冒泡的典型应用场景：事件委托/事件代理
<body>
    <ul>
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      const items = document.querySelectorAll("li");
      // 一般情况下，给所有的li添加点击时间
      for (let i = 0; i < items.length; i++) {
        items[i].onclick = () => console.log("aaa");
      }
      //采用onclick这种动态属性添加事件，该方法默认的就是冒泡
      document.querySelector("ul").onclick = function (ev) {
        console.log("aaa");
        console.log(ev.target);
      };
    </script>
  </body>

事件实现表单验证

<body>
    <form method="post" action="" id="login" name="heihei">
      <label class="controltitle">用户登录</label>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" value="" autofocus />
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" value="" />
      <button name="submit">登录</button>
    </form>
    <script>
      //获取表单元素
      const login = document.forms.heihei;
      login.submit.onclick = (ev) => {
        //禁止默认提交行为
        ev.preventDefault();
        //禁制冒泡
        ev.stopPropagation();
        //非空验证
        isEmpty(ev.currentTarget.form);
      };
      function isEmpty(form) {
        if (form.email.value.length === 0) {
          alert("邮箱不能为空");
          form.email.focus();
        } else if (form.password.value.length === 0) {
          alert("密码不能为空");
          form.password.focus();
        } else {
          alert("验证通过");
        }
      }
      //submit:提交
      //focus:焦点
      //input：用户输入内容是发生
      //blur：失去焦点触发
      //change：值发生变化
      //select：选择文本触发
    </script>
  </body>

事件的传递机制

事件实现表单验证

更多相关文章

随机推荐