JavaScript事件

简介: JavaScript事件

1、JavaScript 事件的概念

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

2、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 前缀。

3、JavaScript 事件流

页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。  

浏览器规定了两种事件流模型:捕获型事件流冒泡型事件流

而 DOM 标准规定事件流包括三个阶段:事件捕获阶段处于目标阶段事件冒泡阶段

eg:

<script>
let  nameList  =  document.getElementById("list"); 
 
nameList.addEventListener('click',showName,false);
 
function  showName(e){
 
e  =  e  ||  window.event;
 
let  targetElement  =  e.target  ||  e.srcElement; 
 
if(targetElement.nodeName.toLowerCase()  ===  "li"){
 
alert(targetElement.innerHTML);
}
}
</script>

e 表示 event 是事件对象模型,e || window.event e.target || e.srcElement 是兼容 IE 浏览器的写法。toLowerCase() 是将字符串全部转换成小写。toUpperCase()是转换为大写。

相关文章
|
1月前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
27 7
|
20天前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
17 0
|
1月前
|
数据采集 JavaScript 前端开发
理解并应用:JavaScript响应式编程与事件驱动编程的差异
了解JavaScript的响应式编程与事件驱动编程至关重要。事件驱动编程基于事件触发函数执行,如用户交互或系统事件。响应式编程则关注数据流变化,利用Observables自动响应更新。在爬虫代理IP的Web Scraping示例中,两者分别通过axios和rxjs显示了数据抓取的不同处理方式。掌握这两者能提升异步操作的效率和代码质量。
理解并应用:JavaScript响应式编程与事件驱动编程的差异
|
13天前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
8 1
|
15天前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
24 2
|
21天前
|
JavaScript 前端开发
JavaScript 中的三种事件模型
JavaScript 中的事件模型主要有三种: 传统事件模型(DOM Level 0) 标准事件模型(DOM Level 2) IE 事件模型(非标准,仅限于旧版本的 Internet Explorer)
19 1
|
28天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
26天前
|
JavaScript 前端开发
第八篇-Javascript 事件
第八篇-Javascript 事件
22 1
|
27天前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
21 1
|
1月前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件