JS事件监听两种使用方法

简介: JS事件监听两种使用方法

首先说一下什么是事件监听,


事件监听就是通过某一事物的源对象(当某种事件发生时),然后向监听器传送某种事件对象,监听器里面封装了某种事件信息,接到事件对象后进行某种处理,这就是事件监听。简单来说以学校放课铃作为事物源对象,然后放学


设置事件监听的方法主要有onclick(点击事件)和addEventListener()两种;


先说一下最基础的点击时间吧;

html
<button onclick="but(aa)"></button> //点击事件可以是其他标签主要是使用onclick点击事件绑定.
<script>
function but(a){
console.log(a);//打印的传参
}//这是最简单的点击事件
</script>

事件的话除了click点击事件,还有更多的事件:

键盘事件

表单事件监

然后是另一种事件的传播:

语法:addEventListener(参数1,参数2,)

分为三个阶段:依次是捕获阶段、目标阶段、冒泡阶段

参数1:事件类型,这个事件类型不加on

参数2:回调函数;参数3:false代表事件冒泡,true代表事件捕获

前者事件先执行,后者事件后执行,注意IE不支持这个方法,其他浏览器支持

解绑事件:removeEventListener(事件,回调函数);//这个回调函数要单独写出来才可以正常的解绑,不然无法解绑

在这里多说一下什么是事件冒泡:

事件冒泡:当子级触发事件的时候会将子级冒泡到父级上去(会传播到父级)

原理是由微软公司提出,IE浏览器支持事件冒泡,IE浏览器中没有事件捕获

类比:石头砸到水底后,湖底会有气泡往上冒,由点找面

相关文章
|
6月前
three.js的Gui面板使用方法
three.js的Gui面板使用方法
297 0
|
6月前
|
JavaScript 前端开发
Node.js中的EventEmitter模块:基本概念、使用方法和常见应用场景
Node.js中的EventEmitter模块:基本概念、使用方法和常见应用场景
122 0
|
9天前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
22天前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
23 0
|
26天前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
25 0
|
3月前
|
JavaScript 前端开发
JavaScript 中 this 的使用方法详解
JavaScript 中 this 的使用方法详解
44 1
|
3月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
47 0
|
4月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
54 1
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
JavaScript 前端开发
js正则表达式的作用及使用方法
js正则表达式的作用及使用方法
103 1