web API 介绍及DOM对象（2）

最新推荐文章于 2024-05-08 01:32:16 发布

奶茶丶

最新推荐文章于 2024-05-08 01:32:16 发布

阅读量82

点赞数 1

分类专栏：前端 html css 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_52764447/article/details/120279728

版权

前端同时被 3 个专栏收录

59 篇文章 4 订阅

订阅专栏

html

51 篇文章 2 订阅

订阅专栏

css

17 篇文章 1 订阅

订阅专栏

本文详细介绍了DOM中的事件处理，包括使用传统方式和addEventListener()方法进行事件注册和删除，强调了事件对象的重要性和事件流的概念。事件流分为捕获阶段、当前目标阶段和冒泡阶段，通常更多关注冒泡阶段。同时，文章讲解了如何阻止事件冒泡和利用事件委托提高程序性能。此外，还探讨了鼠标事件对象和键盘事件对象的相关属性和方法。

摘要由CSDN通过智能技术生成

一、注册事件

给元素添加事件称为注册事件或者绑定事件

前面我们学习了DOM里面的1、传统注册事件的方式，我们一起回忆一下

btn.onclick = function () {

alert('你好');

}

当我们用传统方式注册事件，当同一个元素注册多个事件时，只能生成最后一个。

下面介绍一种同一个元素同一个事件可以注册多个监听器

2、addEventListener() 方法监听注册方式

它是一个方法
同一个元素同一个时间可以注册多个监听器
按注册顺序依次执行
传统注册方式有兼容性ie9以后。但是对于移动端开发不用考虑

语法：eventTarget.addEventListener(type，listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象指定的事件时，就会执行事件处理函数

该方法接受三个参数：

type:事件类型字符串，比如：click、mouseover，注意这里不带on 字符串带引号
listener：事件处理函数，事件发生时，会调用该监听函数（function函数）
useCapture：可选参数，是一个布尔值，默认是false

方法一：
        //方法监听注册事件 
        btns[1].addEventListener('click',function() {
            alert(22);
        })
        btns[1].addEventListener('click',function() {
            alert(33);
        })

根据执行的次数，先弹出22再弹出33



方法二：
divs[1].addEventListener('click',fn)
        function fn() {
            alert(22);
        }

这里调用函数 fn 不用加括号

3、attachEvent(）（了解）

语法：eventTarget.attachEvent(eventNameWithOn,callback)

参数：

callback 事件处理函数当目标触发事件时回调函数被调用

eventNameWithOn 事件类型字符串比如 onclick、onmouseover 这里要带on
ie9以前的，不提倡使用

二、删除事件的方式

传统方式删除事件 eventTarget.onclick = null

        divs[0].onclick = function () {
            alert(11);
            //传统方式解绑
            divs[0].onclick = null;
        }

方法监听解绑事件 eventTarget.removeEventListener(事件,调用处理函数)

注意写法

        //方法监听注册解绑
        divs[1].addEventListener('click',fn)
        function fn() {
            alert(22);
            divs[1].removeEventListener('click' ,fn)
        }

eventTarget.detachEventEvent() ie9以前的解绑方式

        //ie9以前的解绑
        divs[2].attachEvent('onclick',fn1);
        function fn1() {
            alert(33);
            divs[2].detachEventEvent('onclick',fn1);
        }

三、事件对象

3.1、什么是事件对象：

div.onclick = function(event){ }

event就是一个事件对象。写到我们侦听函数的小括号里面，当形参来看
事件对象只要有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息（鼠标的坐标等）；如果是键盘事件里面就包含了键盘事件的信息，比如：判断用户按下了什么键
这个事件对象我们可以自己命名比如：event、evt、e
事件对象也有兼容性问题 ie678通过window.event 兼容性的写法：加个条件 e=e || window.event ;

3.2、事件对象常见的属性和方法

属性	说明（e是事件对象）
e.target	返回触发事件的对象标准的和this区别：this指的是绑定事件的对象；e.target是触发事件的对象也就是点击了哪个元素就返回哪个元素
e.type	返回事件类型触发什么样的事件. 比如click事件就返回click
e.returnValue	该属性阻止默认事件不标准比如：让链接不跳转、让提交按钮不提交可以利用return false 也可以阻止默认事件行为没有兼容性问题
e.cancelBubble	等于true 就是停止冒泡非标准
方法（）	说明
e.stopPropagation() 方法	阻止冒泡标准 DOM推荐
e.preventDefault()	该方法阻止默认事件标准用于事件高级注册事件的方法里面比如：让链接不跳转、让提交按钮不提交

四、DOM事件流（重点）

事件流：事件流描述的是从页面接受中接受事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

阶段：

捕获阶段 - 从文档流开始往下
当前目标阶段-拥有事件的元素节点
冒泡阶段-从目标阶段往上的阶段

注意：

实际开发中我们很少使用事件捕获，我们更关注事件冒泡
有些事件使没有冒泡的，比如：onblur、onfoucs、onmousenter、onmouseleave
事件冒泡有时候会带来麻烦有时候又会帮助很巧妙的做某些事情
js代码中能执行捕获或者冒泡其中的一个阶段
以前的传统事件onclick和attachEvent只能得到冒泡阶段
验证就用eventTarget.addEventListener(type，listener[,useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序如果是false 表示在事件冒泡阶段调用事件处理程序

根据事件冒泡的好处和坏处的情况

1、坏处：当执行了当前点击事件后父节点如果添加了点击事件在执行了当前点击事件后会向上执行点击事件

此时就需要我们阻止冒泡

语法：e.stopPropagation()

是标准的

语法：e.cancelBubble

非标准
有两个点击事件 son点击了 father不会点击

2、好处：事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派
比如：如果要给每个li一个点击事件，不需要循环注册点击事件而是给ul利用冒泡找到监听

事件委托原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

比如：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发监听器

作用：只操作了一次DOM，提高了程序的性能

<body>
    <ul>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e) {
            // alert('你好');
            for (var i=0;i<ul.children.length;i++) {
                ul.children[i].style.backgroundColor = '';
            }
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

五、鼠标事件对象

event对象代表事件的状态，跟事件相关的一些列信息的集合

5.1、鼠标事件对象 MouseEvent

属性	说明
e.clientX 和 e.clentY	返回鼠标相对于浏览器窗口可视区的X坐标和Y坐标
e.pageX 和 e.pageY	返回鼠标对于文档流页面的X坐标和Y坐标 ie9 + 支持
e.screenX 和 e.screenY	返回相对于电脑屏幕的X，Y坐标

鼠标移动事件 mousemove

鼠标不断的移动，使用鼠标移动事件

<body>
    <img src="../images/angel.gif" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;
            //有单位
            img.style.left = x -50+ 'px';
            img.style.top = y -40 + 'px';

        })
    </script>
</body>

5.2、键盘事件 keyboardEvent

事件	说明
onkeyup	按键弹起的时候触发
onkeydown	按键按下的时候触发
onkeypress	按键按下的时候触发

注意：

如果都写了执行顺序 onkeydown - onkeypress - onkeyup
传统事件注册事件添加on
高级事件注册事件不添加on
keyup 和 keydown 事件不区分大小写 a和A得到的都是65
keypress 区分大小写 a-97 A-65
keydown 和 keypress 两个事件在触发的时候，文字还没有落入文本框中
keyup 事件触发的时候文字已经落入文本框里面了
keypress 不识别功能键比如：ctrl shift 左右箭头

键盘事件对象

属性

说明

e.keyCode

返回该键的ASCLL值

可以用来判断用户按下了哪一个键

e.key

获取我们从键盘上按下什么值

按下a e.key=a

案例：从键盘输入小写字母表单显示对应的大写

<body>
    <input type="text">
    <script>
        var ipt = document.querySelector('input');
        document.addEventListener('keypress', function (e) {
            if (e.keyCode >= 97 && e.keyCode <= 122) {
                ipt.value = e.key.toUpperCase();
            }
            else {
                alert ('请输入小写字母')
            }
        })
    </script>
</body>