dom啦17 焦点事件

原创

陈业贵的博客 2021-11-16 16:16:36 博主文章分类：JSDOM ©著作权

文章标签 数据 html javascript 获取焦点失去焦点 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者陈业贵的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<input type="text" name="" id="">
<script type="text/javascript">
let oInput = document.querySelector("input");
 // 1.监听input获取焦点
 oInput.onfocus=function()
 {
 	 console.log("获取到了焦点");
 }
 // 2.监听input失去焦点
 oInput.onblur=function()
 {
 	console.log("失去了焦点");
 }
 // 3.监听input内容改变
   oInput.onchange=function()
   {
   	console.log(this.value);
   }
       // 在IE9以下, 如果想时时的获取到用户修改之后的数据, 可以通过onpropertychange事件来实现
       oInput.oninput=function()    // oninput事件可以时时获取到用户修改之后的数据, 只要用户修改了数据就会调用(执行)

       {
       	   	console.log(this.value);

       }
</script>
</body>
</html>