JavaScript 事件

最新推荐文章于 2023-02-03 12:05:26 发布

揉你脸蛋儿.

最新推荐文章于 2023-02-03 12:05:26 发布

阅读量348

点赞数

分类专栏：前端JS学习文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_51062389/article/details/118691194

版权

前端JS学习专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了JavaScript中的事件处理，包括注册事件（绑定事件）的两种方式：传统注册和事件监听；删除事件（解绑事件）的方法；DOM事件流的概念；事件对象的属性和方法，如何阻止事件冒泡；事件委托的原理和优势；以及常用鼠标事件和键盘事件的使用，附带了相关实践示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件

注册事件（绑定事件）

注册事件概述

给元素添加事件

注册事件方式

传统方式和方法监听注册方式

传统注册事件

1、利用on开头的事件

特点：注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数。

方法监听注册方式

1、W3C标准推荐方式

2、addEventListener（）它是一个方法 ie9以前不支持

3、attachEvent()//ie9以前的方法

4、同一个元素同一个事件可以注册多个监听器按注册顺序依次执行

addEventListener事件监听方式

eventTarget.addEventListener（type，listener，[ useCapture]）

将指定的监听器注册到目标对象上，当该对象触发指定的事件时，就会执行事件处理函数。

1、type：事件类型字符串，例如click，mouse //一点更要加引号

2、listener：事件处理函数，事件发生时，会调用该监听函数

3、useCapture：可选参数，是一个布尔值，默认时false

attachEvent事件监听方式

这里的事件类型字符串要的带on

删除事件（解绑事件）

删除时间的方式

传统注册方式删除

element.οnclick=null;

事件监听方法注册删除

element.removeEventListener(参数和注册时一样)//如果里面的处理函数式在外面定义好的，但是在里面调用不需要加小括号

element.detachEvent（）；

DOM事件流

事件传播过程：DOM事件流

3个阶段：捕获阶段（此外往里）当前目标阶段冒泡阶段（从里往外）

** js代码中只能执行捕获或者冒泡其中一个阶段

onclick和attachEvent只能到冒泡阶段

addEventListener（）第三个参数是true则为捕获阶段是false或者省略则为冒泡

实际开发中很少使用捕获，更多关注事件冒泡

有些事件是没有冒泡的 onblur onfocus onmouseenter onmouseleave

事件对象

1、写在侦听函数的小括号里，当作形参来看

2、事件对象只有有了事件才会存在，他是系统自动创建的不需要传递参数

3、事件对象是事件一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标键盘事件里面就包含了判断用户按下了哪个键

4、可以自己命名、事件对象也有兼容性问题兼容性写法 e=e||window.event；

事件对象常见属性和方法

this返回的是绑定事件的元素

currentTarget 和this相同

return false 也能阻止默认行为没有兼容性问题特点：return后面的代码不执行而且只限于传统的注册方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ATBaTeHx-1626133397957)(C:\Users\甜味少女静\Pictures\QQ截图20210705173559.png)]

阻止事件冒泡

事件委托（代理、委派）

事件委托

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

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

常用鼠标事件

1、禁止鼠标右键菜单

contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

<script>
    document.addEventListener('contextmenu',function(e){
    e.preventDefault();
})
</script>//禁止鼠标右键菜单

2、禁止鼠标选中

selectstart 开始选中

同上添加阻止默认行为就可以禁止选中

mousemove鼠标移动一像素就触发事件

鼠标事件对象

MouseEvent

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ciKoEe6Z-1626133397959)(C:\Users\甜味少女静\Pictures\QQ截图20210705203308.png)]

练习-跟随鼠标的天使

核心原理：每次鼠标移动，就会获得新的鼠标坐标，把x和y坐标作为图片的top和left值就可以移动图片。

 <style>
        img {
            position: absolute;
            width: 50px;
        }
    </style>
</head>
<body>
    <img src="images/1.1.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>

常用键盘事件

onkeyup 某个键盘按键被松开时触发

onkeydown 某个键盘按键被按下时触发

onkeypress 某个键盘按键被按下时触发，但是不识别功能键

** 三个事件执行顺序 keydown keypress keyup

键盘事件对象

keyCode 返回按键的ACII值

** 只有onkeypress区分大小写

练习-模拟京东按键输入内容

**核心思路：检测用户是否按下了s键，如果按下s键，就将光标定位到搜索框里

搜索框获得焦点：js里的focus（）方法

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