DOM事件处理详解

最新推荐文章于 2023-07-05 18:04:29 发布

张0x0

最新推荐文章于 2023-07-05 18:04:29 发布

阅读量254

点赞数 1

分类专栏： web前端基础学习 html学习 JavaScript学习文章标签：前端 javascript html dom

本文链接：https://blog.csdn.net/zxn200125/article/details/121531062

版权

web前端基础学习同时被 3 个专栏收录

80 篇文章 3 订阅

订阅专栏

JavaScript学习

37 篇文章 0 订阅

订阅专栏

html学习

12 篇文章 0 订阅

订阅专栏

事件注册

事件注册目的是让浏览器对象能够识别对象，在之前的博客中我们就有使用过传统的事件注册方法连接js和html

传统方式

element.事件名 = function(){

//事件处理程序

}

该方式的特点是，事件处理具有唯一性，同一个元素对于同一个事件只能注册一个处理函数，之后新注册的函数会将之前注册的函数覆盖掉

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid;
        margin: 100px auto;
    }
</style>
<body>
    <div>
        <p id="p1"></p>
        <p id="p2"></p>
    </div>
    <script>
        //传统方式注册
        var div = document.querySelector('div');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementById('p2');
        //注册onclick事件第一个函数
        div.onclick = function(){
            p1.innerHTML = "第一个函数";
        }
        //注册onclick事件第二个函数
        div.onclick = function(){
            p2.innerHTML = "第二个函数";
        }
    </script>

上例中，对click事件注册两个函数，第二个函数会覆盖第一个函数，只是先第二个函数内的效果，也就是单击div元素只出现文字“第二个函数”

事件监听方式

该方式可以给元素注册多个事件处理函数

element.addEventListener(type,callback,[capture]);

type：事件类型

callback：事件处理函数

cpature：可选参数，默认false(事件冒泡阶段处理)，可填true(事件捕获阶段处理)

我们可以通过该方式对上述代码进行改造，实现div绑定两个click函数

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid;
        margin: 100px auto;
    }
</style>
<body>
    <div>
        <p id="p1"></p>
        <p id="p2"></p>
    </div>
    <script>
        //事件监听方式注册
        var div = document.querySelector('div');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementById('p2');
        //注册onclick事件第一个函数
        div.addEventListener('click',function(){
            p1.innerHTML = "第一个函数";
        })
        //注册onclick事件第二个函数
        div.addEventListener('click',function(){
            p2.innerHTML = '第二个函数';
        })
    </script>

网页单击div后呈现效果如下，可见click两个函数都实现了

事件移除

事件既然可以注册，那当然也有方式可以移除，移除方式也分为两种

传统方式

element.事件名 = null;

标准方式

element.removeEventListener(type,callback);

标准方式要移除事件，执行的callback时间处理函数必须是外部函数，使用匿名函数是无法移除的

    <div>文本</div>
    <script>
        var div = document.querySelector('div');
        //向div元素添加事件
        div.addEventListener("mousemove",myFunction);
        //设置函数myFunction
        function myFunction(){
            div.style.color = 'red';
        }
        //移除div元素事件
        div.removeEventListener("mousemove",myFunction);

        //标准方式使用匿名函数移除方法无效！！！
        div.removeEventListener("mouseover",function(){
            div.onmouseover = 'null';
        })
    </script>

事件对象

事件对象(event)封装了跟时间有关的数据，只在事件发生时存在，是由系统自动创建的，也是事件处理函数的默认参数

属性

1.event.target：返回触发事件的节点

2.event.timeStamp：返回发生时间的日期和时间(从客户机启动时间开始的毫秒数)

3.event.type：返回发生事件的类型

    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>
    <button>点击</button>
    <Script>
        var btn = document.querySelector('button');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementById('p2');
        var p3 = document.getElementById('p3');
        btn.addEventListener("click",function(e){
            p1.innerHTML = e.target;     //打印触发事件的节点
            p2.innerHTML = e.timeStamp;  //打印事件发生时间戳
            p3.innerHTML = e.type;       //打印发生事件类型
        })
    </Script>

上例点击按钮后便会打印绑定的事件属性

方法

1.preventDefault()：阻止执行与事件关联的默认动作

2.stopPropagation()：阻止同一事件的传播

    <a href="https://www.csdn.net/">CSDN</a>
    <script>
        var link = document.querySelector('a');
        //组织链接点击跳转页面
        link.addEventListener('click',function(e){
            e.preventDefault();
        })
    </script>

上例中，链接相关联的默认动作是点击跳转页面，使用preventDefault阻止默认点击事件，故设置后再点击后不会出现页面跳转

    <div onclick="fn2()" id="box2">box2
        <div onclick="fn1(event)" id="box1">box1</div>
    </div>
    单击：
    <input type="checkbox" id="choose">
    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        function fn1(event){
            box1.innerHTML = "改变box1！";
            if(document.getElementById('choose').checked){
                event.stopPropagation();
            }
        }
        function fn2(){
            box2.innerHTML = "改变box2！";
        }    

        //为了效果图明显，设置一个鼠标移入box1背景色变化
        box1.addEventListener('mouseover',function(){
            box1.style.backgroundColor = 'yellow';
        })
    </script>

上例中，由于box1位于box2内，所以单击box1时，两个box都会被单击。可以利用stopPropagation阻止当前事件的传播，让点击box1时，单击事件不会传播影响到box2

网页实现效果：

鼠标/键盘事件对象

鼠标事件对象

1.clientX：事件被触发时，鼠标指针在当前浏览器窗口的水平坐标

2.clientY：事件被触发时，鼠标指针在当前浏览器窗口的垂直坐标

3.screenX：事件被触发时，鼠标指针在屏幕的水平坐标

4.screenY：事件被触发时，鼠标指针在屏幕的垂直坐标

5.pageX：事件被触发时，鼠标指针在文档的水平坐标

5.pageY：事件被触发时，鼠标指针在文档的垂直坐标