监听事件 + 鼠标事件 + 键盘事件一、注册事件二、删除事件（解绑事件）三、DOM事件流四、事件对象五、事件委托六、鼠标事件对象七、键盘事件

60 阅读 0 评论 40 点赞

我是靠谱客的博主激昂河马，最近开发中收集的这篇文章主要介绍监听事件 + 鼠标事件 + 键盘事件一、注册事件二、删除事件（解绑事件）三、DOM事件流四、事件对象五、事件委托六、鼠标事件对象七、键盘事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、注册事件

传统
用on开头的
唯一性：同一个元素同一个事件只能设置一个处理函数

btn.onclick = function() {}

监听注册方式
.addEventListener('click', function() {}, )

二、删除事件（解绑事件）

传统

<div>鲸渔</div>
<script>
    var div = document.querySelector('div');
    div.onclick = function() {
        alert('远近渔');
        div.onclick = null;
    }
</script>

监听方式
这里面的fn不需要加小括号调用，相当于绑定进去

<div>鲸渔</div>
<script>
    var div = document.querySelector('div');
    div.addEventListener('click', fn);
    function fn() {
        alert('远近渔');
        div.removeEventListener('click', fn);
    }
</script>

三、DOM事件流

捕获阶段
当前目标阶段
冒泡阶段
onclick 和 attachEvent 只能得到冒泡阶段
onblur onfocus onmouseenter onmouseleave 没有冒泡

四、事件对象

div.onclick = function(event) {}
div.addEventListener('click', function(event) {})
1.此处的 event 就是一个事件对象，当形参看
2.有了事件才会存在，是系统自动创建的，不需要传递参数
3.是事件一系列数据的集合，比如鼠标点击
可以写为 event evt e

事件对象的属性和方法
在这里插入图片描述

e.target 和 this 的区别

this 是事件绑定的元素，就是谁做的改变
e.target 是事件触发的元素，比如onclick就是你点击的谁

阻止默认行为
e.preventDefault() 可以让点击之后不跳转

阻止冒泡
e.stopPropagation
e.cancelBubble = teue; 兼容性写法

五、事件委托

原理： 不是给每个子节点用循环设置监听器了，而是把监听器设置在父节点上，然后利用冒泡原理影响每个子节点

// 就是给父节点设置了点击是事件后，你点击子节点，会影响父节点
<ul>
    <li>远近渔</li>
    <li>远近渔</li>
    <li>远近渔</li>
    <li>远近渔</li>
    <li>远近渔</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        for(var i = 0; i < ul.children.length; i++) {
            this.children[i].style.backgroundColor = '';
        }
        e.target.style.backgroundColor = 'skyblue';
    });
</script>

六、鼠标事件对象

在这里插入图片描述
vent 事件对象是事件相关的一系列信息的集合
鼠标事件对象 MouseEvent
键盘事件对象 KeyboardEvent

鼠标跟随

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
            position: absolute;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <img src="../imggg/吃兔兔.jpg" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.left = x + 'px';
            img.style.top = y + 'px';
        });
    </script>
</body>

七、键盘事件

onkeyup 键盘按下松开触发
onkeydown 键盘按下触发
onkeypress 键盘按下触发，不识别功能键
执行顺序是onkeydown onkeypress onkeyup

键盘事件对象
.keyCode 返回该键的ASCII值

onkeydown onkeyup 不区分大小写 onkeypress 区分

按下s光标进入的输入显示搜索框

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 30px;
            margin: 100px auto;
            border: 3px solid skyblue;
            border-radius: 8px;
        }

        input {
            box-sizing: border-box;
            width: 297px;
            height: 27px;
            border-radius: 8px;
            outline: none;
            border: 0;
            color: lightskyblue;
            line-height: 36px;
            font-size: 20px;
            padding: 0 15px;
        }

        .inbox {
            position: absolute;
            top: -38px;
            box-sizing: border-box;
            width: 280px;
            height: 30px;
            border: 3px solid pink;
            border-radius: 8px;
            padding: 0 15px;
            line-height: 24px;
            font-size: 20px;
            color: turquoise;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="inbox">

        </div>
        <input type="text">
    </div>
    <script>
        var ipt = document.querySelector('input');
        var box = document.querySelector('.inbox');
        document.addEventListener('keyup', function(e) {
            if(e.keyCode === 83) {
                ipt.focus();
            }
        });
        ipt.addEventListener('keyup', function () {
            if (this.value === '') {
                box.style.display = 'none';
            } else {
                box.style.display = 'block';
                box.innerHTML = this.value;
            }
        });
        ipt.addEventListener('blur', function () {
            box.style.display = 'none';
        });
        ipt.addEventListener('focus', function () {
            if (this.value === '') {
                box.style.display = 'none';
            } else {
                box.style.display = 'block';
                box.innerHTML = this.value;
            }
        });
    </script>
</body>