DOM事件

• ， 12 4月 2021
• 作者 847954981@qq.com
• 前端学习, 我的编程之路

DOM事件

要做一个动态的网页，那就必须要网页拥有动态的活动，因此对于网页上的DOM对象，我们需要获取其中的事件来做出相应的活动。

节点名.addEventListener('事件名', function () {});

利用此方法可以获取节点上发生的事件，并在之后的function中对事件做出反应。

具体事件如下

• 焦点事件
  • focus:表单组件（Input, Textarea, etc..）获取焦点事件
  • blur: 表单组件（Input, Textarea, etc..）失去焦点事件
• 鼠标事件
  • click: 点击事件
  • dblclick: 双击事件
  • mousedown: 在元素上按下任意鼠标按钮。
  • mouseenter: 指针移到有事件监听的元素内。
  • mouseleave: 指针移出元素范围外（不冒泡）。
  • mousemove: 指针在元素内移动时持续触发。
  • mouseover: 指针移到有事件监听的元素或者它的子元素内。
  • mouseout: 指针移出元素，或者移到它的子元素上。
  • mouseup: 在元素上释放任意鼠标按键。
• 键盘事件
  • keydown: 键盘按下事件
  • keyup: 键盘释放事件
• 视图事件
  • scroll: 文档滚动事件
  • resize: 窗口放缩事件
• 资源
  • load： 资源加载成功的事件

可以通过以上方法结合DOM操作中更改样式属性的方法，来实现动态化

事件冒泡

在JavaScript有一种情况，当你同时在父亲节点和子节点同时设置监听事件，当你触发了子节点的监听事件，父节点的事件也会被触发，这种现象叫做事件冒泡。

利用这种原理，我们可以实现事件委托—即点击任意子节点都能触发父亲节点的事件

当然，如果我们想阻止这样的情况也是可以的

likeBtn.addEventListener('click', function(e) {
  // 点击事件
  e.stopPropagation()//阻止冒泡

以此来解决问题

除了事件冒泡，JavaScript也存在事件捕捉

捕获和冒泡是完全相反的，冒泡是从当前元素沿着祖先节点往上冒泡，而捕获是从根 HTML 节点开始 依次移动到当前元素。

我们上面使用的addEventListener是在冒泡阶段监听事件，如果想在捕获阶段监听事件，我们需要传 递第三个参数为true， 代码如下

dom.addEventListener('click', function () {}, true);