常见的JS事件汇总（简洁易懂）

1. js事件

1.1 onclick 点击事件

1.2 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）

1.3 onunload 用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）

1.4 onchange 内容变化事件（常结合对输入字段的验证来使用）

1.5 onmouseover 鼠标移动到HTML元素上方的事件

1.6 onmouseout 鼠标移出HTML元素上方的事件

1.7 onmousedown 鼠标按下的时候触发的事件

1.8 onmouseup 鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）

1.9 onfocus 元素获取焦点事件

1.10 onblur 元素失去焦点事件

1.11 onabort 图像的加载失败

1.12 ondblclick 双击事件

1.13 onerror 当加载图像和文档时发生错误

1.14 onkeydown 键盘按键被按下发生的事件

1.15 onkeyup 键盘按键被松开发生的事件

1.16 onkeypress 键盘按键按下并松开发生的事件

1.17 onmousemove 鼠标移动

1.18 onresize 窗口或者框架被重新调整大小

1.19 onselect 文本被选中

1.20 onreset 重置按钮被点击

1.21 onsubmit 提交按钮被点击

(阻止事件冒泡：ie使用 e.cancleBubble = true、e.stopPropagation()；取消默认事件： e.preventDefault()，IE则是使用e.returnValue = false )
在JavaScript中，有三种常用的绑定事件的方法：

在DOM元素中直接绑定；
在JavaScript代码中绑定；
绑定事件监听函数。

如下：
一. 在DOM元素中直接绑定

这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
onXXX="JavaScript Code"

二. 在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
// 事件处理代码
}

三. 绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数说明
elementObject DOM对象（即DOM元素）。
eventName 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle 事件句柄函数，即用来处理事件的函数。
useCapture Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);
参数说明
elementObject DOM对象（即DOM元素）。
eventName 事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle 事件句柄函数，即用来处理事件的函数。

常见的JS事件汇总（简洁易懂）相关推荐

JS事件汇总,addEventListener添加事件监听
JS事件汇总 JavaScript 事件 JS事件汇总鼠标事件键盘事件表单事件读取事件 onload与onpageshow事件区别其它事件 addEventListener()添加事件监听 ...
七天学会Node.js（汇总）
七天学会Node.js(汇总) 文章目录七天学会Node.js(汇总) 1. NodeJS基础什么是NodeJS 有啥用处如何安装安装程序编译安装如何运行权限问题模块 require ...
全网最全面的 Node.js 资源汇总推荐，4W Star！
作者@前哨君|地址@https://github.com/jobbole/awesome-nodejs-cn由于微信不支持外链,可文末 "阅读原文" 或打开 Github 地址查看 ...
Github 4 万 Star！最全面的 Node.js 资源汇总推荐
点击"程序员成长指北",选择"星标????" 让一部分开发者看到未来作者@前哨君|地址@https://github.com/jobbole/awesome- ...
常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重页面适配笔记本缩放
css属性就是要用的多用的熟知道的多就像一本工具书除了基础原理剩下的就是知识面了极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...
如何构建自定义 Node.js 事件发射器
事件是具有软件或硬件意义的动作. 它们是由于用户活动(例如鼠标单击或击键)或直接来自系统(例如错误或通知)而发出的. JavaScript 语言使我们能够通过在事件处理程序中运行代码来响应事件. 由于 ...
最全面的 Node.js 资源汇总推荐
作者@前哨君|地址@https://github.com/jobbole/awesome-nodejs-cn [导读]:Node.js 是一个开源.跨平台的,用于编写服务器和命令行的 JavaScri ...
JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...

常见的JS事件汇总（简洁易懂）

常见的JS事件汇总（简洁易懂）相关推荐

最新文章

热门文章