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事件节流、防抖、事件委托
谢谢你阅读到了最后
期待你,点赞、评论、交流
