原文网址：JS--事件(Event)--使用_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍JavaScript对Event（事件）的使用。

官网

事件介绍 - 学习 Web 开发 | MDN

绑定方式

html标签

优点

同一个 dom 元素上，on 可以绑定多个同类型事件，会按顺序执行。

缺点

能写的代码比较短。

实例

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>This is title</title>
</head><body><div><button id="btn" onclick="function1();function2()">点我</button>
</div><script>function function1() {console.log('函数1');}function function2() {console.log('函数2');}</script></body>
</html>

结果：（两个函数按顺序执行）

JS：onxxx

优点

兼容性很好，所有浏览器都支持。
可写的代码比较多

缺点

同一个元素的同一种事件只能绑定一个函数（后面的函数会覆盖前边的函数）

用法

给事件绑定函数：

<script>var btn = document.getElementsByClassName('button');btn.onclick = function(){alert(0);}
</script>

清除事件的绑定：只需给该事件赋值为 null

<script>var btn = document.getElementsByClassName('button');btn.onclick = null;
</script>

实例

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>This is title</title>
</head><body><div><button id="btn">点我</button>
</div><script>let btn = document.getElementById('btn');btn.onclick = function () {console.log('函数1');};btn.onclick = function () {console.log('函数2');};
</script></body>
</html>

结果（只运行了最后一个函数）

JS：addEventListener

简介

说明

大部分浏览器支持addEventListener。只有IE8及之前的IE不支持，可用attachEvent替换。

优点

同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行

缺点

兼容性略差（旧版浏览器不支持）

addEventListener与attachEvent区别

项	addEventListener	attachEvent
兼容性	支持：谷歌、火狐、IE11 不支持：IE8	不支持：谷歌、火狐、IE11 支持：IE8
顺序	按事件绑定的先后顺序执行	随机
this指向	this是当前绑定事件的对象	this是window
参数个数	三个参数	两个参数
事件命名	没有on	有on

示例

添加事件监听：addEventListener；清除事件监听：removeEventListener。二者参数一致。

参数说明

target.addEventListener(type, listener [, options]);
target.addEventListener(type, listener [, useCapture]);

第一个参数：事件名称。比如：click，mouseover

第二个参数：作为事件处理程序的函数

第三个参数：options（可选）

具有以下属性的附加可选对象：
- once ：如果为 true ，那么会在被触发后自动删除监听器。
- capture ：事件处理的阶段，我们稍后将在冒泡和捕获一章中介绍。
  - 由于历史原因， options 也可以是 false/true ，它与 {capture: false/true} 相同。
- passive ：如果为 true ，那么处理程序将不会调用 preventDefault()

第三个参数：useCapture（可选）

true：在捕获阶段调用。
false：在冒泡阶段调用。
若不提供第三个参数，则useCpature为false。

代码

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>This is title</title>
</head><body><div><button id="btn">点我</button>
</div><script>let btn = document.getElementById('btn');btn.addEventListener("click", () => {console.log('函数1');})btn.addEventListener("click", () => {console.log('函数2');})</script></body>
</html>

结果：（两个函数按顺序执行）

事件大全

其他网址

事件参考 | MDN

其他网址

JS一个元素怎么绑定多个事件_BarryLee的博客-CSDN博客_绑定多个事件
JavaScript(1)---绑定事件、解除绑定事件 - 雨点的名字 - 博客园

JS--事件(Event)--使用相关推荐

js事件(Event)知识整理
鼠标事件鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemove 如果按下鼠标上的设备(左键,右键,滚轮--),则触发mousedow ...
js事件Event对象(自定义事件对象 CustomEvent)
文章目录一.参考二.Event 接口介绍 2.1 事件分类三. 创建过时Event不推荐 3.1 document.createEvent 3.1.1 语法`var event = docume ...
js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! !
面试率 90% 的JS事件循环Event Loop,看这篇就够了!! ! 事件循环(Event Loop)大家应该并不陌生,它是前端极其重要的基础知识.在平时的讨论或者面试中也是一个非常高频的话题. ...
JS事件循环 Event Loop
前言刚学前端的时候一直听别人说 JS 是单线程.单线程.单线程的,其实完整的应该是在浏览器环境下 JS 执行引擎是单线程的. 那么什么是线程?为什么JS是单线程的? 1. 进程和线程进程和线程的主 ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
Linux事件循环阻塞,深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多 ...
JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){resizeTo(640,480);//设置浏览器窗口尺寸moveTo( ...
JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body> ...

JS--事件(Event)--使用

简介