📌  相关文章
📜  HTML | DOM onfocusin 事件(1)

📅  最后修改于: 2023-12-03 15:31:12.365000             🧑  作者: Mango

HTML | DOM onfocusin 事件

在HTML DOM中，onfocusin事件会在元素即将获得焦点时触发。在此事件处理程序中，可以添加一些功能来处理元素获得焦点时的响应。

语法
object.onfocusin = function(){myScript};

或者

object.addEventListener("focusin", myScript);
参数
  • function()：必需。待执行的函数。
示例
<!DOCTYPE html>
<html>
<head>
	<title>onfocusin 事件示例</title>
	<script>
		function myFunction() {
			document.getElementById("demo").style.backgroundColor = "yellow";
		}
	</script>
</head>
<body>
	<h1 onfocusin="myFunction()" tabindex="0">点我一下</h1>
	<div id="demo">我是一个div元素</div>
</body>
</html>

效果如下：

onfocusin示例效果图

在此示例中，当元素获得焦点时，会触发onfocusin事件，执行myFunction()函数，将demo元素的背景颜色更改为黄色。

说明
  • onfocusin事件是从父元素到子元素冒泡的，所以可以将onfocusin事件添加到一个父元素上以捕获子元素的事件。
  • 当元素获得焦点时，同时也会触发onfocus事件。
  • 在IE浏览器中使用onfocusin事件，并将focusin事件添加到父元素中，这对于某些Web开发任务可能特别有用。
更多阅读