【轻松零基础JavaScript教程】#12 JavaScript事件 - JavaScript怎么处理HTML Event? | JavaScript Event For Beginners
☕ ☕ ☕ 如果觉得这些教学对你有用，那就请我喝杯咖啡吧！ 我会继续为你创作更多免费的编程教学视频，让你轻松入门编程。 ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4 #javascript-event-事件 #编程入门 #javascript入门
文字版内容：
Hi, 大家好，我是文轩
欢迎再次收看文轩解码
如果你想和其他同学一起学习和讨论JavaScript编程
可以扫描这个二维码
去到自学编程社区里和其他同学一起互动
当用户使用浏览器的时候
一般会点击页面上的链接和按钮
滚动页面
或者在输入框里输入信息
这些行为我们称之为事件Event
点击按钮是一个鼠标事件
输入信息是一个键盘事件
每一个事件 我们都可以给它定义对应的
事件处理程序(Event Handler)
Event Handler其实是一个function
主要功能是针对触发事件进行处理和反馈
像我们在提交表单前
想让JavaScript程序确认输入的信息是否有效
我们就可以使用Event Handler
去处理这些被触发的表单事件
除了鼠标，键盘和表单事件
HTML还有窗口事件(window event)
多媒体事件(media event)
拖放事件(drag&drop event)等等
我们可以使用三种方法去定义事件处理程序
第一种方法是在
HTML元素属性(Element Attribute)里直接定义
但是我个人不建议这么做
因为事件处理程序是JavasScript程序
把大量JavaScript源代码和HTML源代码混在一起
会不利于后期代码的维护
第二种方法是通过DOM属性(Property)
在JavaScript源代码里定义
第三种方法是通过addEventListener去定义
第二和第三种方法是比较常用的
但这两种方法也有一点区别
我会在实操的部分详细的给你们解释这两者的区别
好的，那现在我们切换到VS Code
实操一下要怎么触发事件和怎么定义事件处理程序
现在给你们演示一个经常会在网页里触发的事件
那就是鼠标事件
每当我们点击页面里的元素
我们就会触发Click事件
我们先创建一个按钮
然后再为这个按钮添加事件处理程序
先插入<button>元素
然后我们在button里
添加一个onclick事件属性 (Event Attribute）
onclick能让JavaScript捕捉触发的click事件
当JavaScript成功捕捉click事件
我们要让它干嘛呢？
让它显示alert消息框吧
在双引号这里输入alert('Hey there!')
这里要注意单双引号的使用
如果外面是双引号
里面就用单引号
外面是单引号
里面就用双引号
单双引号需要交叉使用
不然程序会报错
刚才我们输入的alert('Hey there!')
就是事件处理程序
当我们点击这个按钮的时候
会触发click事件
因为我们之前给按钮定义了onclick事件处理程序
所以一旦按钮捕获这个click事件
它就会弹出Hey there!的消息框
我们先保存刷新页面
现在我们来点击这个按钮看看会给我们什么反馈
嗯，页面会弹出消息框
这就证明点击按钮触发的click事件成功被捕获和处理
所以整个触发, 捕获和处理的流程是
首先点击按钮
然后触发click事件
再到捕获click事件
到最后事件处理程序处理click事件
我们除了能在这里输入Javascript源代码
也能在这里调用function
一般事件处理的源代码没这么简单
不会像我们的示例那样
只有一行源代码
所以一般都会把事件处理的源代码放在function里
方便统一调用
我们先在JavaScript文档里创建一个
showAlert() function
然后在function里插入alert('Hey function!')
接着我们把alert('Hey there!')
换成 showAlert()
我们来保存刷新页面看看效果
我们点击一下这个按钮
嗯，现在它不再显示hey there!
而是显示 hey function
所以onclick在捕获click事件后
是直接调用showAlert() 函数处理事件的
同学们有没有发现
即便我们能直接调用showAlert() function
我们还是把JavaScript源代码掺杂在HTML源代码里
这样定义事件处理程序还是不够精简
而且还会增加维护网站的难度
好的
接下来给你们演示
要怎么定义更精简的事件处理程序
稍后我们会在JavaScript文档里
使用DOM属性去定义事件处理程序
那样就能完完全全的把JavaScript和HTML分开
我们先把onclick删掉
只保留<button>元素
那样的话
我们的HTML文档里就不存在JavaScript源代码了
接下来
我们在button里添加一个id属性
叫它myButton
这个id是用来识别这个按钮的
等一下我们会用JavaScript去搜索这个id
然后为这个按钮添加事件处理程序
好的，现在我们在hello.js里声明一个变量
btn
用来储存按钮元素
接着我们用document.getElementById()
调出我们的按钮
getElementById需要提供搜索的Id
这里我们输入myButton
好的，现在btn变量里储存了按钮的元素
接下来，我们要设置按钮的onclick属性
我们可以这样表示
btn.onclick =
接着我们把showAlert function
赋予 btn.onclick
同学们这里要注意
showAlert后面是不需要添加小括号的
如果我们在这里添加小括号
就意味着我们要让程序执行showAlert function
但现在我们不想执行这个showAlert
我们只想把showAlert赋予btn.onclick而已
所以我们这里就不需要输入小括号
好的，我们现在来保存代码
刷新页面看看效果
我们点击这个按钮看看
嗯对的，它还是会显示Hey function
即便刚才我们把HTML和JavaScript源代码完全分开了
它还是能达到同样的效果
把HTML和JavaScript分开还有一个优点
那就是程序会变得更精简
不过，这样定义事件处理程序还有有一个问题
那就是一个元素始终只能有一个事件处理程序
什么意思呢？
我打个比方啊
刚才我们给按钮赋予了一个click事件处理程序
如果我们想再为个这个按钮添加
第二个click事件处理程序
刚才那种赋予的方式
是做不到一个元素同时处理多个click事件的
我来给你们演示一下就明白了
我们再添加一个function，叫它secondFunction
然后在下面这里我们再赋予btn.onclick
新的secondFunction
那现在我们来看看当按钮被点击的时候
它会显示哪一个信息
是hey function还是hey second function?
同学们来猜猜看
答案是
hey second function
我们来验证一下
嗯，对的
是hey second function
同学们知道为什么吗？
这是因为我们在这里赋予secondFunction的时候
就把showAlert function给覆盖掉了
所以使用这种方法去定义click事件处理程序
就只能在同一时间处理一个click事件
如果我们想更灵活的定义事件处理程序
可以使用第三种方法
那就是addEventListener
addEventListener能解决刚才我们遇到的问题
让一个按钮同时处理多个click事件
我给你们演示一下
我们先把原来的onclick事件属性删掉
然后插入btn.addEventListener()
我们在小括号里插入两个参数
第一个参数是告诉event listener我们要监听什么事件
第二个参数是处理事件的function
因为我们现在是要监听click事件
所以这里要输入click字符串
第二个参数我们输入showAlert
这个addEventListener的语句
是要为按钮添加一个事件监听器
让它去捕捉click事件
一旦监听器成功捕获click事件
我们就让showAlert函数去处理这个click事件
好的，我们先保存刷新页面
看看点击按钮后会不会显示hey function
嗯，消息框里是显示hey function
接下来我们再为按钮添加一个新的监听器
第一个参数还是click
因为我们要捕捉click事件
第二个参数我们输入secondFunction
好的，现在我们来验证一下
当我们按下按钮
会不会弹出两个消息框
分别显示hey function
和hey second function
第一个消息框显示hey function
第二个显示hey second function
对的，这两个监听器都正常执行
使用addEventListener
添加事件处理程序还有一个好处
那就是我们可以在程序运行的时候
删除事件处理程序
要删除事件处理程序
我们可以使用removeEventListener
假设我们要删除第一个event listener
我们可以这样做
btn.removeEventListener();
和addEventListener一样
我们也要告诉removeEventListener
要删除哪一个事件
和哪一个事件处理程序
第一个参数我们输入click字符串
第二个参数我们输入showAlert
同学们有没有发现addEventListener
和removeEventListener传递的参数是一样的
只有在removeEventListener输入
和addEventListener一样的参数
我们才能删除该事件监听器
不然的话是删除不了的
好的，我们现在来看看第一个监听器是否成功被删除
先保存刷新页面
之前程序会弹出两个消息框
现在应该只会弹出一个
显示hey second function
我们点击按钮看看是不是那样的
嗯，对的
只显示hey second function
第一个监听器成功被删除了
刚才和同学们介绍了什么是事件
怎么触发事件
和事件被触发后要怎么处理
接下来在分享最后一个知识点
那就是事件对象(Event Object)
Event Object能让我们对事件有更深入的了解
比如当我们用鼠标点击某个元素的时候
我们能通过event object知道鼠标点击的坐标
我来给你们演示一下
要得到Event Object
我们需要在事件处理函数的参数列表里添加一个参数
我们叫它event吧
添加了event之后
我们就可以在函数里访问Event Object的属性
我们再添加一个alert消息框
用来显示鼠标的坐标
我们来保存刷新页面看看效果
嗯，第二个消息框是显示鼠标的坐标
除了显示坐标
Event Object里还有其他有用的信息
我打印出来给你们看看
嗯，这就是click事件对象里所有的属性
每个事件都有对应的Event Object
方便程序利用这些事件属性做进一步的处理
好的，我们来总结一下今天的分享
用户和网页互动的时候会触发各种事件(Event)
像鼠标事件，键盘事件等等
JavaScript可以监听捕捉这些事件
然后通过事件处理程序处理被触发的事件
事件处理程序可以用三种方法定义
第一种是在HTML元素属性里直接定义
但这样的话不利于后期维护
第二种是通过DOM属性在JavaScript里定义
这样做能把JavaScript和HTML分开
第三种是通过addEventListener定义
这种方法比前两个更灵活
要深入了解事件
可以通过事件处理程序 (Event Handler)
Event参数读取事件对象(Event Object)
好的，今天的分享就到这里
有疑问的话欢迎去到自学编程社区里提问
喜欢这个视频就拜托点赞分享吧
我们下期见，拜拜！
Comments
Post a Comment