JS事件汇总,addEventListener添加事件监听

JS事件汇总

JavaScript 事件
JS事件汇总
- 鼠标事件
- 键盘事件
- 表单事件
- 读取事件
- - onload与onpageshow事件区别
- 其它事件
addEventListener()添加事件监听

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。

JS事件汇总

鼠标事件

事件	触发
onclick	点击时
ondblclick	双击时
onmousedown	按下左键释放之前
onmouseup	在页面元素上移动鼠标
onmouseout	指针移出元素范围
onmouseover	第一次移入指定元素范围
onmouseup	释放按下的左键时发生
ondrag	元素被拖动时
ondragstart	在拖动操作开端运行
ondragend	拖动操作末端运行
ondragenter	当元素元素已被拖动到有效拖放区域时
ondragleave	当元素离开有效拖放目标时运行
ondragover	当元素在有效拖放目标上正在被拖动时

键盘事件

事件	触发
onkeypress	用户按下一键未释放时
onkeydown	单击键盘时
onkeyup	键盘按下再放开时发生

表单事件

事件	触发
onsubmit	用户提交表单时发生
onchange	在域的内容改变时发生
onreset	表单数据被重置时发生
onselect	用户从文本框中选择文本时发生
onfocus	获得焦点时
onblur	失去焦点时触发

读取事件

事件	触发
onabort	用户停止浏览器继续下载图像时触发
onerror	当浏览器载入网页或图像发生错误时
onload	通常用于 body元素，在页面完全载入后触发(包括图片、css文件等等。)
onresize	窗口或框架被调整大小时发生。
onunload	用户离开页面时发生

onload与onpageshow事件区别

onpageshow 事件在用户浏览网页时触发。
onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即onload 事件在页面从浏览器缓存中读取时不触发。

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false
onpageshow事件

其它事件

事件	触发
onscroll	在元素滚动条在滚动时触发

addEventListener()添加事件监听

addEventListener(event, function, useCapture)

参数event必填，表示监听的事件，例如 click, touchstart 等，不加前缀on的事件。
参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数
参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。

这里function参数传的是匿名函数,没办法用removeEventListener解除监听

window.addEventListener('resize', function() {console.log('resize')
}, false)

这里function参数传的不是匿名函数,可以用removeEventListener解除监听

function resizeFn(e) {console.log('resize')console.log(e)
}
window.addEventListener('resize', resizeFn, false)
// 解除上面绑定的事件监听
window.removeEventListener('resize', resizeFn, false)

JS冒泡、捕获、默认事件那些事
js事件节流、防抖、事件委托

谢谢你阅读到了最后
期待你,点赞、评论、交流

JS事件汇总,addEventListener添加事件监听相关推荐

【iOS-Cocos2d游戏开发之五】【1】多触点与触屏事件详解（单一监听、事件分发）...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/450.html ...
4、oracle使用网络管理工具—Net Manager添加本地监听程序
4.oracle使用网络管理工具-Net Manager添加本地监听程序 Net Manager 具有和Net Configuration Assistant 相似的功能.Net Configurat ...
js实现button标签转为click监听事件
公司通过海思板子做了一个纯html页面,登录用户数据通过sqlite3存储,所以登录按钮通过button标签实现的,现在要通过键盘回车登录操作,所以需要将button按钮转click事件操作 1,登录 ...
html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...
angular.js使用路由时,子控制器监听不到父级$boardcast的事件
2019独角兽企业重金招聘Python工程师标准>>> 环境:angular.js+sastruts+apache-tomcat angular.js中当使用路由时,控制器之间通信使 ...
钉钉中添加回调监听事件
此类是HttpRequest.java -------------------------------------------------------------------------------- ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
vue点击创建input内容_vue.js怎么给input添加事件
vue.js给input添加事件的方法:1.使用[v-on]指令可以添加事件监听,代码为[v-on:eventName="fn"]:2.使用回调函数的参数[$event]来当前触发 ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...

JS事件汇总,addEventListener添加事件监听

JS事件汇总

JavaScript 事件

JS事件汇总

鼠标事件

键盘事件

表单事件

读取事件

onload与onpageshow事件区别

其它事件

addEventListener()添加事件监听

JS事件汇总,addEventListener添加事件监听相关推荐

最新文章

热门文章