JavaScript中的DOM（三）

1.事件监听的方式

事件监听方式一：在script中直接监听（很少使用）；事件监听方式二：DOM属性，通过元素的on来监听事件；事件监听方式三：通过EventTarget中的addEventListener来监听；

      我是box
    
    

onclick的方式不能添加多个事件，但是addEventListener可以添加多个事件 

常见的事件

◼ 鼠标事件： click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。 mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。 mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。 mousemove —— 当鼠标移动时。◼ 键盘事件： keydown 和 keyup —— 当按下和松开一个按键时。◼ 表单（form）元素事件： submit —— 当访问者提交了一个时。 focus —— 当访问者聚焦于一个元素时，例如聚焦于一个 。◼ Document 事件： DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。◼ CSS 事件： transitionend —— 当一个 CSS 动画完成时。

2.事件冒泡和事件捕获

默认情况下事件是从最内层向外依次传递的顺序，这个顺序我们称之为事件冒泡；

另外一种监听事件流的方式就是从外层到内层，这种称之为事件捕获。

监听的时候，有下面几种阶段

捕获阶段

事件（从Window）向下走近元素；

目标阶段

事件到达目标元素；

冒泡阶段

事件从元素上开始冒泡 ；

 3.事件对象event

当一个事件发生时，就会有和这个事件相关的很多信息：

比如事件的类型是什么，你点击的是哪个元素，点击的位置是哪里这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象

获取这个event对象

event对象会在传入的事件处理函数回调；我们可以在回调函数中拿到这个event对象；

El.onclick = function(event){
    console.log("事件对象", event)
}
El.addEventListener("click", function(event){
    console.log("事件对象", event)
})

event常见的属性和方法

常见的属性：

type：事件的类型；target：当前事件发生的元素； currentTarget：当前处理事件的元素；eventPhase：事件所处的阶段；offsetX、offsetY：事件发生在元素内的位置；clientX、clientY：事件发生在客户端内的位置；pageX、pageY：事件发生在客户端相对于document的位置；screenX、screenY：事件发生相对于屏幕的位置；

常见的方法：

preventDefault：取消事件的默认行为；stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；

事件处理中的this

在函数中，我们可以通过this来获取当前发生的元素：

El.addEventListener("click", function(event){
    console.log(this === event.target) //true
})

4.EventTarget类

我们发现，所有的节点，元素都继承自EventTarget

window也继承自EventTarget

EventTarget是一个DOM接口，主要用于添加、删除、派发Event事件

 常见的EventTarget方法

addEventListener：注册某个事件类型以及事件处理函数； removeEventListener：移除某个事件类型以及事件处理函数；dispatchEvent：派发某个事件类型到EventTarget上；

El.addEventListener("click", function(){
    console.log("点击了el")
})

El.addEventListener("click", function(){
    window.dispatchEvent(new Event("aaa"))    
})

window.addEventListener("aaa", function(event){
    console.log("监听到aaa事件", event)
})

5.事件委托 

事件冒泡可以帮助我们实现强大的事件处理模式-事件委托模式

 因为 当子元素被点击 时，父元素可以 通过冒泡可以监听到子元素的点击 ；  并且 可以通过event.target获取到当前监听的元素 ；

6. 常见的鼠标事件

7.mouseover和mouseenter的区别

◼ mouseenter和mouseleave

 不支持冒泡  进入子元素依然属于在该元素内，没有任何反应 ◼ mouseover和mouseout  支持冒泡  进入元素的子元素时 ✓ 先调用父元素的mouseout ✓ 再调用子元素的mouseover ✓ 因为支持冒泡，所以会将mouseover传递到父元素中；

8.常见的键盘事件

    搜索
    

9.表单事件

10.文档加载事件

◼ DOMContentLoaded ：浏览器已完全加载 HTML，并构建了 DOM 树，但像 和样式表之类的外部资源可能尚未加载 完成。 ◼ load ：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

window.addEventListener("DOMContentLoaded", function() {
        console.log("dom内容加载");
      })
      window.addEventListener("load", function() {
        console.log("所有内容加载");
      })