DOM系列:DOM事件简介

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

如果你浏览过早期的Web网站,或许你已经发现了这些Web站点除了能提供查阅信息之外,无其他作用可言。这样的Web站点其实是非常无聊的。那是因为Web站点没有提供人与机器的互动行为。激不起用户的兴趣。

造成这种现象的原因很简单。Web应用程序或者Web站点存应该是为了响应用户对它们所做的事情。好比,我们每天一大早起床时就想好了一天要做些什么,这样每天都有动力,也变得充实。那么在Web应用或Web网站上其实也是类似的,Web网站之后做的事情很大程度上取决于你告诉他们做什么。这样一来,Web网站会变得有趣的多。

告诉应用程序做什么的方法是让它们对已知的事件做出反应。那么在今天开始,我们就开始来学习Web应用程序或网站中的事件,即DOM事件。首先在今天这篇文章中,我们将学习到什么是事件,以及如何使用它们。

事件是什么?

事实上,你创建的所有内容都可以按照下面的语句来建模:

这样的填空题有很多种答案。第一个空格填将一些事情;第二个空格描述了人们对该事件做出的反应。比如下面这样的示例:

  • 页面加载 时,播放一段视频
  • 点击发生 时,提交已填好的表单
  • 鼠标释放 时,弹出下人对话框
  • 删除键按下 时,删除选中的图片
  • 触摸屏幕 时,把卡片移出屏幕
  • 文件下载发生 时,请更新进度条

这样的模型也适用于编码的世界中。而且这种模型用于事件中是非常有用的。其实事件只不过是一个信号。它告诉我们或用户发生了什么事情。这些信号在Web中,可以是鼠标点击、键盘上的按键,也可以是窗口大小被调整,甚至只是文档被加载。不过需要注意的是,这些信号可以是JavaScript中内置的任何东西,或者你为你的应用程序创建的定制的东西。回到我们的模型中,事件构成了前半部分:

事件定义了发生的事情,一个动作信号。模型的第二部分定义了模型中指定的事件做出的相应的反应:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/dom-event-intro.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部