29 Dom事件基础

29.1 事件监听（绑定）

事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮。

事件监听（绑定事件或者注册事件）就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。

事件监听三要素：

事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事

语法

DOM对象.addEventListener('事件类型',要执行的函数)

//例子
<body>
    <button>点击</button>
    <script>
        // 事件三要素：事件源、事件类型、事件处理函数
        btn = document.querySelector('button')

        btn.addEventListener('click', function () {
            alert('你好呀')
        })
    </script>
</body>

详见：示例

京东点击关闭顶部广告

需求：点击关闭之后，顶部关闭

详见：示例

随机点名案例

要求：

点击开始按钮随机抽取数组的一个数据，放到页面中
点击结束按钮删除数组当前抽取的一个数据
当抽取到最后一个数据的时候，两个按钮同时禁用（写点开始里面，只剩最后一个数据不用抽了）

详见：示例

事件监听的其他版本

DOM L0：事件源.on事件 = function() { }
DOM L2：事件源.addEventListener(事件，事件处理函数)
区别：on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

29.2 事件类型

鼠标事件（鼠标触发）
- click：鼠标点击
- mouseenter：鼠标经过
- mouseleave：鼠标离开
焦点事件（表单光标）
- focus：获得焦点
- blur：失去焦点
键盘事件（键盘触发）
- Keydown：键盘按下触发
- Keyup：键盘抬起触发
文本事件（表单输入触发）
- input：用户输入事件

29.2.1 鼠标事件

<body>
    <div></div>

    <script>
        const div = document.querySelector('div')
        // 鼠标经过
        div.addEventListener('mouseenter', function () {
            div.innerHTML = '轻轻的我来了'
        })
        // 鼠标离开
        div.addEventListener('mouseleave', function () {
            div.innerHTML = '轻轻的我走了'
        })
    </script>
</body>

详见：示例

轮播图完整版案例

需求：当点击左右的按钮，可以切换轮播图；鼠标经过暂停定时器；鼠标离开开启定时器。

详见：示例

29.2.2 焦点事件

<body>
    <input type="text" name="" id="">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('focus', function () {
            console.log('有焦点触发。');
        })
        input.addEventListener('blur', function () {
            console.log('失去焦点。');
        })
    </script>
</body>

详见：示例

案例

详见：小米搜索框

29.2.3 键盘事件

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('keydown', function () {
            console.log('键盘按下了');
        })
        input.addEventListener('keyup', function () {
            console.log('键盘弹起了');
        })
    </script>
</body>

详见：小米搜索框

29.2.4 文本事件

<body>
    <input type="text">

    <script>
        const input = document.querySelector('input')
        input.addEventListener('input', function () {
            console.log(input.value);
        })
    </script>
</body>

评论字数统计案例

需求：用户输入文字，可以计算用户输入的字数

详见：小米搜索框

29.3 事件对象

事件对象：也是个对象，这个对象里有事件触发时的相关信息。例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。

使用场景

可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作

语法

dom对象.addEventListener('click', function (e) {  //这里的e就是事件对象
  })

//例子
<body>
    <button>点击</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function (e) {
            console.log(e);
        })
    </script>
</body>

详见：示例

事件对象的获取

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

事件对象常用属性

type
- 获取当前的事件类型
clientX/clientY
- 获取光标相对于浏览器可见窗口左上角的像素位置
offsetX/offsetY
- 获取光标相对于当前DOM元素左上角的像素位置
key
- 用户按下的键盘键的值
- 现在不提倡使用keyCode

练习：

详见：示例