DOM事件汇总

最新推荐文章于 2024-06-04 14:53:18 发布

大鼻子的四色鸳鸯

最新推荐文章于 2024-06-04 14:53:18 发布

阅读量357

点赞数

文章标签： javascript html5 前端

本文链接：https://blog.youkuaiyun.com/weixin_47038177/article/details/106699258

版权

今天的话主要是说了dom的事件流，事件代理和dom事件操作方法。
那下面简单的捋一下思路
1⃣，首先说下dom事件流，那么何为事件流？就是一个事件它触发的过程。那dom的事件流就是当我们触发一个事件，它会先进行事件捕获，然后处于目标阶段，事件冒泡。
那你又会问了，什么是事件捕获，事件冒泡？
事件捕获：就是当我们触发一个事件，他不会立即执行，而是从上到下，从document一直向下捕获直到捕获到目标阶段。
那我们怎么阻止默认行为呢？
js写法：. preventDefault
vue写法：. captrue
那么事件冒泡：就是当我们触发一个事件，它会立刻执行，从这个时间一直向上直到document结束。
如何阻止事件冒泡？
js写法：. stopProgation
vue写法：. stop
（一般来说，阻止冒泡一般设在你想要在哪阻止的那一级标签上）

2⃣，那么说到了事件流，还可能会说到事件代理，那么所谓代理呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。那么事件代理分别为js的写法和jq的写法：
js写法思路：
会用到事件源 event对象事件源不管在哪个事件中
只要你操作的那个元素就是事件源
IE : window.event.srcElement
标准下：event.target（主要方法）
nodeName: 找到元素的标签名
-------代码栗子-------
var item1 = document.getElementById(“goSomewhere”);
var item2 = document.getElementById(“doSomething”);
var item3 = document.getElementById(“sayHi”);

document.addEventListener("click", function (event) {
  var target = event.target;
  switch (target.id) {
    case "doSomething":
      document.title = "事件委托";
      break;
    case "goSomewhere":
      location.href = "http://www.baidu.com";
      break;
    case "sayHi": alert("hi");
      break;
  }
})

jq写法思路：jQuery事件主要是通过delegate()实现事件委托
格式：$(selector).delegate(childSelector, event, data, function)
-------代码栗子-------