JavaScript学习5：DOM（注册事件、删除事件、DOM事件流、事件对象、事件委托、鼠标键盘事件）

最新推荐文章于 2022-10-31 01:43:05 发布

Vivian小姐

最新推荐文章于 2022-10-31 01:43:05 发布

阅读量239

点赞数

分类专栏： JavaScript 文章标签： dom javascript js

本文链接：https://blog.csdn.net/qq_43819274/article/details/114239177

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript学习5：DOM（注册事件、删除事件、DOM事件流、事件对象、事件委托、鼠标键盘事件）

文章目录

- JavaScript学习5：DOM（注册事件、删除事件、DOM事件流、事件对象、事件委托、鼠标键盘事件）

一、注册事件（绑定事件）

注册事件有两种方式：传统方式和方法监听注册方式
在这里插入图片描述
方法监听注册方式：（重要）
同一个元素同一个事件可以添加多个事件处理程序

attachEvent()：ie9以前，尽量不用

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

传统方式删除事件：divs[0].onclick = null;
removeEventListener删除事件：divs[1].removeEventListener(‘click’, fn);
detachEvent删除事件：div[2].detachEvent(‘onclick’, fn1);

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        //1. 传统方式注册事件
        divs[0].onclick = function () {
            alert(11);
            //1. 传统方式删除事件
            divs[0].onclick = null;
        }
        //2. addEventListener方式注册事件（ie9之后）
        divs[1].addEventListener('click', fn);
        function fn() {
            alert(22);
            //2. removeEventListener删除事件
            divs[1].removeEventListener('click', fn);
        }
        //3. attachEvent方式注册事件（ie9之前，谷歌现在不支持）
        divs[2].attachEvent('onclick', fn1);
        function fn1() {
            alert(33);
            //3. detachEvent删除事件
            div[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

三、DOM事件流

在这里插入图片描述

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        //捕获阶段（document->html->body->father->son） 第三个参数为true
        //冒泡阶段（son->father->body->html->document） 第三个参数为false（不写默认值）
        son.addEventListener('click', function () {
            alert('son');
        }, true);

        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, true);
    </script>
</body>

1.开发中一般使用冒泡阶段，就是addEventListener第三个参数为默认值false时，onclick 和 attachEvent只能得到冒泡阶段
2.有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

四、事件对象（重要）

事件对象event

    <script>
        var div = document.querySelector('div');
        //1. event（或者写作e、evt） 就是一个事件对象 当形参来看
        //2. 事件对象只有有事件（onclick）才存在 它是系统自动创建的
        //3. event包含了和事件相关的数据集合 例如鼠标坐标等等
        //4. 事件对象也存在兼容性问题 ie678 要用window.event来获取
        div.onclick = function (event) {
            console.log(event);
        }
    </script>

在这里插入图片描述
e.target和this的区别：
e.target：返回触发事件的对象（点击了哪个元素，就返回哪个元素）
this：返回绑定事件的对象（哪个元素绑定的事件，就返回哪个元素）
例如：可能ul>li 给ul绑定了onclick事件，因此this是ul，但是点击时可能点了li，此时e.target为li，通过冒泡阶段，ul的点击事件也能触发

阻止默认行为：让链接不跳转让提交按钮不提交

e.preventDefault(); dom标准写法 ie9以上
e.returnValue; 低版本浏览器 ie678
return false; 没有兼容性问题，仅限于div.onclick = function(e){}的传统注册方式，return false后面的代码不执行

阻止事件冒泡（重要）

e.stopPropagation(); //ie9以上
window.event.cancelBubble = true; //ie678

五、事件委托（代理、委派）

面试常问：
在这里插入图片描述

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            alert('1');
            //e.target 可以获取点击对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

六、常用的鼠标事件

在这里插入图片描述

案例：跟随鼠标的天使：
img采用绝对定位


<body>
    <img src="error.png" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;
            //千万不要忘记加px 若想图案和鼠标居中对齐，则还要 减去图片宽高一半
            img.style.left = x + 'px';
            img.style.top = y + 'px';
        })
    </script>
</body>

七、常用的键盘事件

三个事件的执行顺序：keydowm – keypress – keyup
在这里插入图片描述

案例：模拟京东s键定位到输入焦点

<body>
    <input type="text">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup', function (e) {
            if (e.keyCode == 83) {
                search.focus();
            }
        })
    </script>
</body>

注意：keydown或者keypress在触发事件时，文本还没有获取到，而keyup触发时已经获取了文本

Vivian小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习5：DOM（注册事件、删除事件、DOM事件流、事件对象、事件委托、鼠标键盘事件）

JS——事件高级文章目录JS——事件高级一、注册事件（绑定事件）二、删除事件（解绑事件）三、DOM事件流四、事件对象（重要）一、注册事件（绑定事件）注册事件有两种方式：传统方式和方法监听注册方式方法监听注册方式：（重要）同一个元素同一个事件可以添加多个事件处理程序attachEvent()：ie9以前，尽量不用二、删除事件（解绑事件）传统方式删除事件：divs[0].onclick = null;removeEventListener删除事件：divs[1].removeEven
复制链接

扫一扫