DailyUp

认识事件（Event）

Web页面需要经常和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：

比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；
浏览器需要搭建一条JavaScript代码和事件之间的桥梁；
当某个事件发生时，让JavaScript可以响应（执行某个函数），所以我们需要针对事件编写处理程序（handler）；

如何进行事件监听呢？

事件监听方式一：在script中直接监听（很少使用）；

html

<!-- 直接在html中编写JavaScript代码(了解) -->
<button onclick="console.log('按钮1发生了点击~');">按钮1</button>

事件监听方式二：DOM属性，通过元素的on来监听事件；

这种方式只会执行一个函数

html

<button class="btn2">按钮2</button>

javascript

// 1.获取元素对象
var btn2El = document.querySelector(".btn2")

// 2.onclick属性
function handleClick01() {
    console.log("按钮2发生了点击~")
}
function handleClick02() {
    console.log("按钮2的第二个处理函数")
}
btn2El.onclick = handleClick01
btn2El.onclick = handleClick02 // 后面函数会把前面的覆盖掉，只会执行handleClick02

事件监听方式三：通过EventTarget中的addEventListener来监听；

html

<button class="btn3">按钮3</button>

javascript

// 1.获取元素对象
var btn3El = document.querySelector(".btn3")

// 3.addEventListener(推荐) 三个函数都会执行
btn3El.addEventListener("click", function() {
    console.log("第一个btn3的事件监听~")
})
btn3El.addEventListener("click", function() {
    console.log("第二个btn3的事件监听~")
})
btn3El.addEventListener("click", function() {
    console.log("第三个btn3的事件监听~")
})

认识事件流

事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢？

我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；

这是因为我们的HTML元素是存在父子元素叠加层级的；

比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的；

事件冒泡和事件捕获

我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）;

事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（Event Capture）；

为什么会产生两种不同的处理流呢？

这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题;
但是他们采用了完全相反的事件流来对事件进行了传递；
IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式；

那么我们如何去监听事件捕获的过程呢？

css

.box {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: orange;
}

.box span {
width: 100px;
height: 100px;
background-color: red;
}

html

<div class="box">
    <span></span>
</div>

javascript

// 1.获取元素
var spanEl = document.querySelector("span")
var divEl = document.querySelector("div")
var bodyEl = document.body


// 2.绑定点击事件
// spanEl.onclick = function() {
//   console.log("span元素发生了点击~")
// }
// divEl.onclick = function() {
//   console.log("div元素发生了点击~")
// }
// bodyEl.onclick = function() {
//   console.log("body元素发生了点击~")
// }

// 默认情况下是事件冒泡
spanEl.addEventListener("click", function() {
    console.log("span元素发生了点击~冒泡")
})
divEl.addEventListener("click", function() {
    console.log("div元素发生了点击~冒泡")
})
bodyEl.addEventListener("click", function() {
    console.log("body元素发生了点击~冒泡")
})

// 设置希望监听事件捕获的过程，第三个参数为true表示捕获
spanEl.addEventListener("click", function() {
    console.log("span元素发生了点击~捕获")
}, true)
divEl.addEventListener("click", function() {
    console.log("div元素发生了点击~捕获")
}, true)
bodyEl.addEventListener("click", function() {
    console.log("body元素发生了点击~捕获")
}, true)

事件捕获和冒泡的过程

如果我们都监听，那么会按照如下顺序来执行：

捕获阶段（Capturing phase）：事件（从 Window）向下走近元素。
目标阶段（Target phase）：事件到达目标元素。
冒泡阶段（Bubbling phase）：事件从元素上开始冒泡。

事实上，我们可以通过event对象来获取当前的阶段：eventPhase

开发中通常会使用事件冒泡，所以事件捕获了解即可。

事件对象

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

比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；
那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象；
该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作；

如何获取这个event对象呢？

event对象会在传入的事件处理（event handler）函数回调时，被系统传入；
我们可以在回调函数中拿到这个event对象；

javascript

spanEl.onClick = function(event) {
   console.log("事件对象：", event) 
}
spanEl.addEventListener("click", function(event) {
    console.log("事件对象：", event)
})

这个对象中都有哪些常见的属性和操作呢？

event常见的属性和方法

常见的属性：

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

html

<div class="box">
    <span class="btn">
        <button>按钮</button>
    </span>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

css

.box {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: orange;
}

span {
    width: 100px;
    height: 100px;
    background-color: #f00;
}

javascript

var divEl = document.querySelector("div")
var btnEl = document.querySelector(".btn")

// btnEl.onclick = function() {
//   console.log("按钮发生了点击~")
// }

divEl.onclick = function(event) {
    // 1.偶尔会使用
    console.log("事件类型:", event.type) // click
    console.log("事件阶段:", event.eventPhase) // 点击按钮或span会冒泡，此时是3，如果直接点击div是2，捕获是1

    // 2.比较少使用
    console.log("事件元素中位置", event.offsetX, event.offsetY)
    console.log("事件客户端中位置", event.clientX, event.clientY)
    console.log("事件页面中位置", event.pageX, event.pageY)
    console.log("事件在屏幕中位置", event.screenX, event.screenY)

    // 3.target/currentTarget
    console.log(event.target) // 当前事件发生的元素，比如点击按钮，那么就是按钮；点击span就是span
    console.log(event.currentTarget) // 当前处理事件的元素，当前是divEl，所以是div
    console.log(event.currentTarget === event.target) // 只有当点击div时两者才相等
}

常见的方法：

preventDefault：取消事件的默认行为；

html

<a href="http://www.baidu.com">百度一下</a>

javascript

// 1.阻止默认行为
var aEl = document.querySelector("a")
aEl.onclick = function(event) {
    console.log("a元素发生了点击~")
    event.preventDefault() // 正常情况下点击会跳转到百度，加了这句就会阻止掉
}

stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；

html

<div class="box">
    <span>
        <button>按钮</button>
    </span>
</div>

css

.box {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: orange;
}

.box span {
    width: 100px;
    height: 100px;
    background-color: #f00;
}

javascript

// 2.阻止事件进一步传递
var btnEl = document.querySelector("button")
var spanEl = document.querySelector("span")
var divEl = document.querySelector("div")

divEl.addEventListener("click", function(event) {
    console.log("div的事件捕获监听~")
    // event.stopPropagation() 只会打印 div的事件捕获监听~
}, true)
spanEl.addEventListener("click", function() {
    console.log("span的事件捕获监听~")
}, true)
btnEl.addEventListener("click", function(event) {
    console.log("button的事件捕获监听~")
    // event.stopPropagation() 只会打印前两个
}, true)

divEl.addEventListener("click", function() {
    console.log("div的事件冒泡监听~")
})
spanEl.addEventListener("click", function(event) {
    console.log("span的事件冒泡监听~")
    event.stopPropagation() // 除了 div的事件冒泡监听~ 这个不会打印，其他都会打印，顺序是先捕获再冒泡
})
btnEl.addEventListener("click", function() {
    console.log("button的事件冒泡监听~")
})

事件处理中的this

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

这是因为在浏览器内部，调用event handler是绑定到当前的currentTarget上的

html

<div>
    <button>按钮</button>
</div>

javascript

var btnEl = document.querySelector("button")
var divEl = document.querySelector("div")

divEl.onclick = function(event) {
    console.log(this)
    console.log(event.currentTarget)
    console.log(divEl)
    console.log(this === divEl) // true
}
// divEl.addEventListener("click", function() {
//   console.log(this) // divEl
// })

EventTarget类

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

事实上Window也继承自EventTarget；

那么这个EventTarget是什么呢？

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

EventTarget常见的方法：

addEventListener：注册某个事件类型以及事件处理函数；
removeEventListener：移除某个事件类型以及事件处理函数；

html

<button>按钮</button>

javascript

// 1.将监听函数移除的过程
var foo = function() {
    console.log("监听到按钮的点击")
}
btnEl.addEventListener("click", foo)

// 需求: 过5s钟后, 将这个事件监听移除掉
setTimeout(function() {
    btnEl.removeEventListener("click", foo)
}, 5000)

// 这种做法是无法移除的
btnEl.addEventListener("click", function() {
    console.log("btn监听的处理函数~")
})

setTimeout(function() {
    btnEl.removeEventListener("click", function() {})
}, 5000)

dispatchEvent：派发某个事件类型到EventTarget上；

javascript

// eventtarget就可以实现类似于事件总线的效果
window.addEventListener("coderwhy", function() {
    console.log("监听到coderwhy的呼唤~")
})

setTimeout(function() {
    window.dispatchEvent(new Event("coderwhy"))
}, 5000)

事件委托（event delegation）

事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式 – 事件委托模式（也是一种设计模式）

那么这个模式是怎么样的呢？

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

案例：一个ul中存放多个li，点击某一个li会变成红色

方案一：监听每一个li的点击，并且做出相应；

html

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

css

.active {
    color: red;
    font-size: 20px;
    background-color: orange;
}

javascript

// 1.每一个li都监听自己的点击, 并且有自己的处理函数(自己的函数)
var liEls = document.querySelectorAll("li")
for (var liEl of liEls) {
    // 监听点击
    liEl.onclick = function(event) {
        event.currentTarget.classList.add("active")
    }
}

方案二：在ul中监听点击，并且通过event.target拿到对应的li进行处理；

javascript

// 2.统一在ul中监听
var ulEl = document.querySelector("ul")
ulEl.onclick = function(event) {
    console.log("点击了某一个li", event.target)
    event.target.classList.add("active")
}

因为这种方案并不需要遍历后给每一个li上添加事件监听，所以它更加高效；

新需求：点击li变成active, 其他的取消active

方法一：

javascript

var ulEl = document.querySelector("ul")
ulEl.onclick = function(event) {
    // 1.将之前的active移除掉
    for (var i = 0; i < ulEl.children.length; i++) {
        var liEl = ulEl.children[i]
        if (liEl.classList.contains("active")) {
            liEl.classList.remove("active")
        }
    }
}

方法二：

javascript

ulEl.onclick = function(event) { 
	// 1.找到active的li, 移除掉active
    var activeLiEl = ulEl.querySelector(".active")
    if (activeLiEl) {
        activeLiEl.classList.remove("active")
    }
}

方法三：

javascript

var activeLiEl = null
ulEl.onclick = function(event) { 
	// 1.变量记录的方式
    // edge case
    if (activeLiEl && event.target !== ulEl) {
        activeLiEl.classList.remove("active")
    }

    // 2.给点击的元素添加active
    if (event.target !== ulEl) {
      	event.target.classList.add("active")  
    }
    
    // 3.记录最新的active对应的li
    activeLiEl = event.target
}

事件委托的标记

某些事件委托可能需要对具体的子组件进行区分，这个时候我们可以使用data-*对其进行标记：

比如多个按钮的点击，区分点击了哪一个按钮：

html

<div class="box">
    <button data-action="search">搜索~</button>
    <button data-action="new">新建~</button>
    <button data-action="remove">移除~</button>
    <button>1111</button>
</div>

javascript

var boxEl = document.querySelector(".box")
boxEl.onclick = function(event) {
    var btnEl = event.target
    var action = btnEl.dataset.action
    switch (action) {
        case "remove":
            console.log("点击了移除按钮")
            break
        case "new":
            console.log("点击了新建按钮")
            break
        case "search":
            console.log("点击了搜索按钮")
            break
        default:
            console.log("点击了其他")
    }
}

常见的鼠标事件

接下来我们来看一下常见的鼠标事件（不仅仅是鼠标设备，也包括模拟鼠标的设备，比如手机、平板电脑）

常见的鼠标事件：

html

<div class="box"></div>

css

.box {
    width: 200px;
    height: 200px;
    background-color: orange;
}

javascript

// 鼠标事件
var boxEl = document.querySelector(".box")

boxEl.onclick = function() {
    console.log("click")
}

boxEl.oncontextmenu = function(event) {
    console.log("点击了右键")
    event.preventDefault()
}

// 变量记录鼠标是否是点下去的
var isDown = false
boxEl.onmousedown = function() {
    console.log("鼠标按下去")
    isDown = true
}

boxEl.onmouseup = function() {
    console.log("鼠标抬起来")
    isDown = false
}

boxEl.onmousemove = function() {
    if (isDown) {
        console.log("鼠标在div上面移动")
    }
}

当鼠标按下去才可以移动，鼠标抬起来触发点击事件。

mouseover和mouseenter的区别

mouseenter和mouseleave

不支持冒泡
进入子元素依然属于在该元素内，没有任何反应

mouseover和mouseout

支持冒泡
进入元素的子元素时
先调用父元素的mouseout
再调用子元素的mouseover
因为支持冒泡，所以会将mouseover传递到父元素中；

html

<div class="box">
    <span></span>
</div>

css

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: orange;
}

.box span {
    width: 100px;
    height: 100px;
    background-color: red;
}

javascript

var boxEl = document.querySelector(".box")
var spanEl = document.querySelector("span")

// 1.第一组
boxEl.onmouseenter = function() {
    console.log("box onmouseenter")
}
boxEl.onmouseleave = function() {
    console.log("box onmouseleave")
}

spanEl.onmouseenter = function() {
    console.log("span onmouseenter")
}
spanEl.onmouseleave = function() {
    console.log("span onmouseleave")
}

鼠标进入②会打印box onmouseenter，从②进入①会打印span onmouseenter，从①到②会打印span onmouseleave，

从②移到外面会打印box onmouseleave，整个过程不会冒泡。

javascript

// 第二组
boxEl.onmouseover = function() {
    console.log("box onmouseover")
}
boxEl.onmouseout = function() {
    console.log("box onmouseout")
}

鼠标进入②会打印box onmouseover，不一样的地方来了，从②进入①会先打印box onmouseout，然后由于span的冒泡再打印

box onmouseover，从②到①由于span的冒泡会先打印box onmouseout，然后再打印box onmouseover，最后从②离开打印

box onmouseout。

mouseenter和mouseover的应用

来完成一个需求，鼠标移入下面的三个按钮，分别打印按钮对应的文字。

html

<div class="box">
    <button>删除</button>
    <button>新增</button>
    <button>搜索</button>
</div>

css

.box {
    background-color: orange;
}

.box button {
    flex: 1;
    height: 50px;
}

javascript

// 方案一: 监听的本身就是button元素
var btnEls = document.querySelectorAll("button")
for (var i = 0; i < btnEls.length; i++) {
    btnEls[i].onmouseover = function(event) {
        console.log(event.target.textContent)
    }
}

javascript

// 方案二: 事件委托 只能用onmouseover
var boxEl = document.querySelector(".box")
boxEl.onmouseover = function(event) {
    if (event.target.tageName === "BUTTON") {
       console.log(event.target.textContent)
    }
}

常见的键盘事件

常见的键盘事件：

事件的执行顺序是 onkeydown、onkeypress、onkeyup

down事件先发生；
press发生在文本被输入；
up发生在文本输入完成；

我们可以通过key和code来区分按下的键：

code：“按键代码”（"KeyA"，"ArrowLeft" 等），特定于键盘上按键的物理位置。
key：字符（"A"，"a" 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）

html

<input type="text">
<button>搜索</button>

javascript

var inputEl = document.querySelector("input")
var btnEl = document.querySelector("button")

inputEl.onkeydown = function() {
    console.log("onkeydown")
}
inputEl.onkeypress = function() {
    console.log("onkeypress")
}
inputEl.onkeyup = function(event) {
    console.log(event.key, event.code)
}

实现搜索功能：

javascript

// 1.搜索功能 按钮点击
btnEl.onclick = function() {
    console.log("进行搜索功能", inputEl.value)
}

// 按回车搜索
inputEl.onkeyup = function(event) {
    if (event.code === "Enter") {
        console.log("进行搜索功能", inputEl.value)
    }
}

在空白处按s键，输入框会自动获取焦点

javascript

// 2.按下s的时候, 搜索自动获取焦点
document.onkeyup = function(event) {
    if (event.code === "KeyS") {
        inputEl.focus()
    }
}

常见的表单事件

针对表单也有常见的事件：

html

<input type="text">

javascript

var inputEl = document.querySelector("input")

// 1.获取焦点和失去焦点
inputEl.onfocus = function() {
    console.log("input获取到了焦点")
}
inputEl.onblur = function() {
    console.log("input失去到了焦点")
}

javascript

// 2.内容发生改变/输入内容
// 输入的过程: input
// 内容确定发生改变(离开): change
inputEl.oninput = function() {
    console.log("input事件正在输入内容", inputEl.value)
}
inputEl.onchange = function() { // 失去焦点触发
    console.log("change事件内容发生改变", inputEl.value)
}

监听重置和提交

html

<form action="/abc">
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>

    <button type="reset">重置</button>
    <button type="submit">提交</button>
</form>

javascript

// 3.监听重置和提交
var formEl = document.querySelector("form")
formEl.onreset = function(event) { // 会把整个表单重置
    console.log("发生了重置事件")
    event.preventDefault()
}

formEl.onsubmit = function(event) {
    console.log("发生了提交事件")
    // axios库提交
    event.preventDefault() // 会阻止默认提交，后面拼上/abc，开发中一般都是自定义提交
}

文档加载事件

DOMContentLoaded：浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img>和样式表之类的外部资源可能尚未加载完成。

load：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

正常情况下，下面这样写是可以给box设置背景色

html

<div class="box"></div>

<script>
	var boxEl = document.querySelector(".box")
    boxEl.style.backgroundColor = "orange"
</script>

但假如将它们的顺序对调一下会怎么样呢？

html

<script>
	var boxEl = document.querySelector(".box")
    boxEl.style.backgroundColor = "orange"
</script>

<div class="box"></div>

运行到浏览器就会报错，因为此时还没有加载box，也就是boxEl是null。

那么有没有办法拿到boxEl呢？我们可以在DOMContentLoaded或onload事件中拿到boxEl

javascript

window.addEventListener("DOMContentLoaded", function() {
    // 1.这里可以操作box, box已经加载完毕
    var boxEl = document.querySelector(".box")
    boxEl.style.backgroundColor = "orange"
    console.log("HTML内容加载完毕")
})

window.onload = function() {
    // 这里也可以操作box
    var boxEl = document.querySelector(".box")
    boxEl.style.backgroundColor = "orange"
    console.log("文档中所有资源都加载完毕")
}

既然这两个事件中都能操作box，那么它们的区别是什么？

DOMContentLoaded中是无法获取图片的一些信息，因为此时图片还没有加载完成，所以offsetWidth和offsetHeight都是0。

javascript

// 注册事件监听
window.addEventListener("DOMContentLoaded", function() {
    // 2.获取img对应的图片的宽度和高度
    var imgEl = document.querySelector("img")
    console.log("图片的宽度和高度:", imgEl.offsetWidth, imgEl.offsetHeight) // 0 0
})

而onload事件中却可以获取到真实的图片信息

javascript

window.onload = function() {
    console.log("文档中所有资源都加载完毕")
    var imgEl = document.querySelector("img")
    console.log("图片的宽度和高度:", imgEl.offsetWidth, imgEl.offsetHeight)
}

其他更多的事件类型：https://developer.mozilla.org/zh-CN/docs/Web/Events

javascript

window.onresize = function() {
    console.log("创建大小发生改变时")
}

认识事件（Event） ​

认识事件流 ​

事件冒泡和事件捕获 ​

事件捕获和冒泡的过程 ​

事件对象 ​

event常见的属性和方法 ​

事件处理中的this ​

EventTarget类 ​

事件委托（event delegation） ​

事件委托的标记 ​

常见的鼠标事件 ​

mouseover和mouseenter的区别 ​

mouseenter和mouseover的应用 ​

常见的键盘事件 ​

常见的表单事件 ​

文档加载事件 ​

认识事件（Event）

认识事件流

事件冒泡和事件捕获

事件捕获和冒泡的过程

事件对象

event常见的属性和方法

事件处理中的this

EventTarget类

事件委托（event delegation）

事件委托的标记

常见的鼠标事件

mouseover和mouseenter的区别

mouseenter和mouseover的应用

常见的键盘事件

常见的表单事件

文档加载事件