javascript核心技术(二十三)JS中三种事件绑定方式及区别

[复制链接]
查看: 988|回复: 31
发表于 2023-1-24 19:17:47 | 显示全部楼层 | 阅读模式
在上面的案例中我们使用到了一个简单的事件绑定,如果是零基础的同学们可能到目前为止并不知道何为事件,何为事件绑定。
事件:它的含义是,当...的时候发生了...事,我们把这一类过程统称为事件。
例如:当点击按钮时做了隐藏或显示图片这件事。
我们把点击click称为事件类型,把做的这件事叫做事件方法或事件函数。

事件类型有非常多,比如左键单击onclick、右键单击oncontextmenu、双击ondblclick、鼠标按下onmousedown、鼠标弹起onmouseup、鼠标移动onmousemove等等之类。
事件方法一般是我们自定义的一个函数,通过这个函数实现某种功能。

下面我们先列出一些常用的事件类型,如下:

事件名 解释
onchange 元素的内容改变且失去焦点时触发
onclick 用户点击 HTML 元素是触发
onmouseover 鼠标指针移动到当前元素上时发生
onmouseout 鼠标指针离开当前元素上时发生
onkeydown 用户在当前元素上按下键盘按键时触发
onload 页面加载完成后触发
mouseente 当鼠标移入时触发,与onmouseover的区别是:mouseente鼠标从父元素移入到子元素上时不触发
mouseleave当鼠标移出时触发,与onmouseout的区别是:mouseleave鼠标从子元素移出到父元素上时不触发
onmousedown 当鼠标按下时触发
onmouseup 当鼠标弹起时触发
onmousemove当鼠标移动时触发
oncopy当赋值内容时触发
onkeypress当键盘按键按下时触发
onkeyup当键盘按键弹起时触发
onsubmit 当表单提交时触发
onreset当表单重置时触发
oninput当内容改变时触发


通过以上的讲解,大家应该可以理解了事件的基本原理,下面我们就讲解一下如何给一个元素绑定事件。
事件的绑定有以下三种方式:
方法一:行内绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内绑定事件</title>
</head>
<body>
<input type="button" name="" value="按钮">
<script>
   function f(){
        console.log(456);
        } 
</script>
</body>
</html>

以上我们给input标签绑定一个点击事件,绑定的事件方法为f函数,即:当用户点击按钮时触发f函数。f函数的功能是输出456。

方法二:在js中通过标签的事件属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js中通过标签的事件属性绑定</title>
</head>
<body>
<input type="button" name="" value="按钮" id="btn">
<script>
document.getElementById('btn').onclick = function(){
    console.log('这个是js中通过标签的事件属性绑定的事件');
}
</script>
</body>
</html>

以上,我们先获取到了id为btn的按钮,然后.onclick=事件函数,同样可以给该按钮绑定事件。
javascript核心技术(二十三)JS中三种事件绑定方式及区别
方法三:事件监听方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js中通过标签的事件属性绑定</title>
</head>
<body>
<input type="button" name="" value="按钮" id="btn">
<script>
document.getElementById('btn').addEventListener('click', function(){
    console.log('这是通过事件监听方式绑定的事件');
});
</script>
</body>
</html>

以上我们同样是先获取到要绑定事件的元素,然后使用addEventListener事件监听函数,给监听函数传入事件名称和事件函数,同样可以实现事件的绑定。
注意:这里的事件类型不加on。

javascript核心技术(二十三)JS中三种事件绑定方式及区别

那么,为什么同样是事件绑定,为什么需要这三种不同的方法呢?它们之间到底有何区别?
一、行内绑定事件的特性
通过行内绑定的方式绑定的事件,如果在同一个标签上多次绑定同一个事件,始终执行第一次绑定的事件。
举例说明:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内绑定事件的特性</title>
</head>
<body>
    <input type="button" name="" value="按钮">
<script>
        function f(){
                console.log(456);
        }

        function f1(){
                console.log(654);
        }
</script>
</body>
</html>

以上我们给input标签绑定了两个onclick事件,它们的事件函数分别是f和f1,当我们点击按钮时,它只会触发f这个事件。
javascript核心技术(二十三)JS中三种事件绑定方式及区别

二、在js中通过标签的事件属性绑定事件的特性
如果同一个标签同一个事件,绑定了多次,始终执行最后一次绑定的事件
举例说明:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在js中通过标签的事件属性绑定事件的特性</title>
</head>
<body>
    <input type="button" name="" value="按钮" id="btn">
<script>
        document.getElementById('btn').onclick = function(){
                console.log('在js中通过标签的事件属性111');
        }

        document.getElementById('btn').onclick = function(){
                console.log('在js中通过标签的事件属性222');
        }
</script>
</body>
</html>

javascript核心技术(二十三)JS中三种事件绑定方式及区别
三、事件监听方式绑定事件的特性
如果同一个标签同一个事件,绑定了多次,都会执行(按照绑定的先后顺序执行)
举例说明:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听方式绑定事件的特性</title>
</head>
<body>
    <input type="button" name="" value="按钮" id="btn">
<script>
        document.getElementById('btn').addEventListener('click', function(){
                console.log('事件监听方式绑定事件的特性111');
        });
        document.getElementById('btn').addEventListener('click', function(){
                console.log('事件监听方式绑定事件的特性222');
        });
</script>
</body>
</html>

javascript核心技术(二十三)JS中三种事件绑定方式及区别

ok,以上就是对JS中三种事件绑定方式及区别的讲解,大家动手练习一下,请务必学会后再继续下面的学习。


易博软件介绍

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-2-16 12:00:23 | 显示全部楼层
我非常同意10楼的意见,真的是写出了我们的心声,真是谢谢了

0

主题

20

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-2-28 20:54:31 | 显示全部楼层
很久没看到这么好的帖子了,对我帮助很大,多谢

0

主题

17

帖子

9

积分

营销入门

Rank: 2

积分
9
发表于 2023-3-10 04:17:23 | 显示全部楼层
眉毛能富贵花每年

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-20 16:51:22 | 显示全部楼层
受益匪浅

0

主题

20

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-3-27 07:54:43 | 显示全部楼层
看了这篇文章我的感触很深啊,有很多人都是表面说说,而做的有多少人啊!用一些华丽的东西去炫耀自己的知识,而忘了用一些简单的方法去解决这个问题!!  以后我会用心的学习变成知识,争取为心目中的理想而奋斗,争取做一名好的程序员,为中国的软件业贡献自己的一份力量。

0

主题

3

帖子

2

积分

营销入门

Rank: 2

积分
2
发表于 2023-4-2 06:10:10 | 显示全部楼层
有同感

1

主题

181

帖子

93

积分

年费会员

Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20

积分
93

年费会员

发表于 2023-4-7 02:18:16 | 显示全部楼层
peifu

0

主题

14

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-12 05:12:54 | 显示全部楼层
感想很多,很受用,谢谢楼主!

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-17 04:22:49 | 显示全部楼层
受益非浅  
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表