首页 > 编程知识 正文

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

时间:2023-05-05 18:13:53 阅读:282522 作者:2232

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事件节流、防抖、事件委托

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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。