投稿
  1. 小新网首页
  2. 百科知识

js获取焦点和失去焦点事件

书影 • • 百科知识

事件

简述事件

  • 事件起始于IE3，作为一种分担服务器运算负载的一种手段。用于键盘、鼠标等工具对于网页的交互！事件对于不同浏览器来说，有不同的标准，尤其是IE、Chrome两大巨头浏览器上，虽然现如今Chrome已经占据大部分市场，但是对于IE8及以上的兼容也是个不小的问题。

事件类型

  • UI事件：用户与页面上的元素交互时触发；
  • 焦点事件：当元素获取失去焦点是触发；
  • 鼠标事件：当鼠标执行点击、移入移出或悬停等事件是触发；
  • 滚轮事件：当鼠标、触摸板或其他设备滚动时触发滚动条事件；
  • 文本事件：在文本框内输入文字时触发；
  • 键盘事件：当键盘按下、抬起或点击时触发；
  • 变动事件：当问文档结构发生变化时触发。

UI事件

  • load事件
  • 当页面完全加载后再window上面触发，当所有框架都加载完成时，在框架集上面触发，当图片都加载完成时在img标签上面触发，或者当嵌入的内容加载完成时在object上触发。
  • unload事件
  • 和load事件恰好相反，除img标签外，其他的框架和嵌入内容卸载完毕后在对应的级别上触发。
  • abort事件
  • 在用户停止下载过程时，如果嵌入的内容没有加载完毕，在object元素上线触发。
  • error事件
  • 当js发生语法错误时在window上触发，当发生加载图像无法成功时在img标签上触发，当嵌入的内容无法加载时在object元素上触发，或当一个或多个框架无法加载完成时在框架集上面触发。
  • select事件
  • 当用户选择文本框内的文字时触发（input或textarea）。
  • resize事件
  • 当窗口或者框架的大小变化时在window或框架上面触发。
  • scroll事件
  • 当用户滚动带有滚动条的元素中的内容时，在该元素上面触发。body上就是网页自带的滚动条。

对于文档嵌入内容不是很清楚的同学可以去看一下HTML5权威指南的第15章节内容。

焦点事件

  • blur事件、focusout
  • 输入框失去焦点事件，css有相同伪类选择器，但是不够灵活！
  • focusin事件、focus
  • 输入框获取焦点是触发，同样，css有相同的伪类事件。输入框如果使用 click同样能获取焦点，但是有点牛头马嘴的意思。
  • focus和blur事件不支持冒泡，如果不想文档事件冒泡则使用这两个事件更好，不用屏蔽事件流。

鼠标与滚轮事件

  • mousedown、mouseup事件
  • 鼠标左键按下、抬起事件，相继触发这两个事件后还会触发click事件。
  • click事件、dbclick事件
  • 鼠标单击、双击事件
  • mouseleave、mouseout事件
  • 都是鼠标脱离当前区域触发，不同的是mouseleave不冒泡。
  • mouseenter、mouseover事件
  • 鼠标进入、悬停在当前区域时触发，mouseenter事件不冒泡。
  • mousemove事件
  • 当鼠标在当前区域移动时重复触发！
  • mousewheel事件
  • 滚轮事件在鼠标中间滚动时触发，同时包含一个wheelData属性，它是120的整数倍数，滚轮向上滚动一个单位时wheelDate+120，向下滚动时-120,。

本文来自作者:书影，不代表小新网立场！

转载请注明：https://www.xiaoxinys.cn/308121.html

赞 (0)
书影书影注册用户
0
上一篇 2022-12-18 11:26:00
下一篇 2022-12-18 11:28:00

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。