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的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
1天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
1天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
1天前
|
消息中间件 存储 设计模式
JavaScript发布订阅模式:实现事件驱动编程!
JavaScript发布订阅模式:实现事件驱动编程!
|
1天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
1天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
2天前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
8 2
|
1天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发