11.JavaScript 事件的概念以及绑定方法

简介: 11.JavaScript 事件的概念以及绑定方法

JavaScript 事件的概念:


               事件就是发生在 HTML 元素上的“事情”。例如这个 div 标签被用户点击(click 事件),或者是浏览器已经完成页面加载(load 事件),又或者鼠标移动到某个 HTML 元素上(mouseover 事件)等等,当这些事件触发时,我们要让程序去做一些操作,这些操作被称为事件的响应。


JavaScript 事件的绑定:

常用的绑定方式有三种:

       通过on DOM 元素中直接绑定:

<button  onclick="fn()">按钮</button>
<script>
function fn(){
 alert('事件响应');
}
</script>

 在JavaScript 代码中绑定:

<button  id="isButton">按钮</button>
<script>
let  isButton  =  document.getElementById('isButton');
isButton.onclick  =  function  ()  {
alert('事件响应');
}
</script>


以上方式不能重复绑定相同事件,且事件前需要加上 on 关键字

       绑定事件监听函数:

      语法为:元素.addEventListener(事件名,执行程序,true/false)

<button  id="isButton">按钮</button>
<script>
let  isButton  =  document.getElementById('isButton');
isButton.addEventListener('click',function()  {
alert('事件响应');
})
</script>


此方法可以重复绑定相同的事件,或是绑定多个事件,并且不需要加 on 前缀


相关文章
|
1月前
|
JavaScript 前端开发 开发者
JavaScript中的箭头函数:简洁的语法与this绑定
JavaScript中的箭头函数:简洁的语法与this绑定
308 184
|
4月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
292 69
|
3月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
285 0
|
1月前
|
前端开发 JavaScript
JavaScript中的箭头函数:简洁与this绑定
JavaScript中的箭头函数:简洁与this绑定
|
3月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
311 80
|
5月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
97 15
|
5月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
241 2