以点击为例了解JavaScript中HTML DOM事件

文章目录

 

目录

 文章目录

前言

事件

点击示例如下：

用调用函数的方法处理

HTML事件属性

示例

使用 HTML DOM 来分配事件

事件三要素

示例如下

示例2

HTML 事件的其他例子

 

---

前言

大家好，我是遇见ice。

个人主页：遇见ice的博客

本文主要是以点击事件为例，讲了一些关于事件的知识，其他事件例子下次再讲啦。

走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流。学一点，就会进步一点，大家一起加油呀！笔芯

 

---

事件

事件是用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情。当事件发生时执行代码JavaScript，对事件做出反应。

比如用户在HTML元素上点击，这一事件可写做οnclick=JavaScript的格式。

点击示例如下：

    

    









请点击文本!

用调用函数的方法处理

    

    









点击文本!

HTML事件属性

可以使用事件属性向 HTML 元素分配事件。HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件。

示例

    

    

    







点我

使用 HTML DOM 来分配事件

HTML DOM 允许使用 JavaScript 来向 HTML 元素分配事件

事件三要素

事件源：谁触发的，一般指某个元素节点

事件：怎么触发的

事件处理程序：触发后发生了什么事

还是以点击为例，格式可如下

document.querySelector( 'button ' ).onclick = function() {alert('事件属性赋值')}

解释：document.querySelector( 'button ' )是事件源，onclick是事件，function() {alert('事件属性赋值')}是事件处理程序

示例如下

    

    





点击文本!



修改背景颜色

注意：上述示例HTML元素尽量在script上方，不要在下方，可能会出现事件不响应的问题。

示例2

    

    

    





点这里

注意：名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。按钮点击时Javascript函数将会被执行。

HTML 事件的其他例子

当用户点击鼠标时

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交 HTML 表单时

当用户触发按键时

……