JavaScript 【事件】焦点事件

日光海岸 發表於 2020-6-17 22:12:00

以下大部分为学习《JavaScript 高级程序设计》(第 3 版) 所做笔记。
目录：
1. 了解焦点事件
2. blur 事件
3. focus 事件
 
了解焦点事件
Q: 焦点事件什么时候触发？
A: 当元素获得或失去焦点时触发。
Q: 焦点事件的用处？
A: 利用焦点事件并与 document.hasFocus() 方法及 document.activeElement 属性配合，可以知晓用户在页面上的行踪。
Q: 焦点事件有哪些?
A: blur DOMFocusIn DomFocusOut focus focusin focusout
 
 浏览器支持  
blur: 所有浏览器都支持
DOMFocusIn: 只有 Opera 支持
DomfocusOut: 只有 Opera 支持
focus: 所有浏览器都支持
focusin: 支持的浏览器：IE5.5+、Safari5.1+、Opera11.5+、Chrome
focusout: 支持的浏览器：IE5.5+、Safari5.1+、Opera11.5+、Chrome
 
IE 的 focusin 和 focusout 与 Opera 的 DOMFocusIn 和 DOMFocusout 发生重叠， IE 的方式最终被 DOM3 级事件采纳为标准方式。
 
不冒泡的事件：blur focus
 ( 即使 blur 跟 focus 不冒泡，也可以在捕获阶段侦听它们。)
 
在失去焦点的元素上触发, 事件目标是失去焦点的元素的事件: focusout blur DomFocusOut
在获得焦点的元素上触发, 事件目标是获得焦点的元素的事件: focusin focus DomfocusIn
 
当焦点从页面的一个元素移动到另一个元素，会依次触发下列事件：focusout focusin blur DOMFocusOut focus DOMFocusIn
 
  检测浏览器是否支持事件  

<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:false;">console.log( "onblur" in window ); //输出：true
console.log( "乱打的" in window ); //输出：false
</pre>
</div>
  true: 浏览器支持
false: 浏览器不支持
 
blur
下例实现：在文本框中输入英文，文本框时失去焦点之后触发 blur 事件，文本框内容小写变大写
方式1：通过 JS 来指定事件处理程序
<div class="cnblogs_Highlighter">
<pre class="brush:html;collapse:true;;gutter:true;"><!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="EventUtil.js"></script>
<script>
//跨浏览器对象 EventUtil
//为 window 指定 load 事件处理程序
//确保往 DOM 中添加新元素之前页面已经加载完毕，如果在页面加载完毕之前操作 document.body 会出错
EventUtil.addHandler(window, "load", function(event){
var event = EventUtil.getEvent();
//创建一个 input 元素
var input1 = document.createElement("input");
//设置 input1 的 type
input1.type = "text";
//为 input1 指定 blur 事件，元素失去焦点之后触发 blur 事件文本框内文本内容小写变大写
EventUtil.addHandler(input1, "blur", function(){
this.value = this.value.toUpperCase();
});
//添加节点 input1
document.body.appendChild(input1);
});
</script>
</body>
</html>
</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617215731202-1265225448.png">
（代码中的 EventUtil 对象：https://www.cnblogs.com/xiaoxuStudy/p/13131725.html#three ）
页面表现：
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617215939319-1643782697.png">
在文本框内输入一个单词
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617220124711-156875250.png">
点击框外，文本框失去焦点后，触发了 blur 事件，文本框内容小写变大写
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617220231290-656256685.png">
方式2：为 <input> 元素添加一个 onblur 特性
<div class="cnblogs_Highlighter">
<pre class="brush:html;collapse:true;;gutter:true;"><!DOCTYPE html>
<html>
<body>
<script>
function fn(){
var x = document.getElementById("word");
x.value = x.value.toUpperCase();
}
</script>
输入一个单词：
<input type="text" id="word" onblur="fn()">
</body>
</html>
</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617203548254-567990253.png">
页面表现同上。
 
focus 
下例实现：文本框获得焦点时触发 focus 事件，修改文本框背景颜色为黄色
方式1：通过 JS 来指定事件处理程序
<div class="cnblogs_Highlighter">
<pre class="brush:html;collapse:true;;gutter:true;"><!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="EventUtil.js"></script>
<script>
//跨浏览器对象 EventUtil
//为 window 指定 load 事件处理程序
//确保往 DOM 中添加新元素之前页面已经加载完毕，如果在页面加载完毕之前操作 document.body 会出错
EventUtil.addHandler(window, "load", function(event){
var event = EventUtil.getEvent();
//创建一个 input 元素
var input1 = document.createElement("input");
//设置 input1 的 type
input1.type = "text";
//为 input1 指定 focus 事件，元素获得焦点之后触发 focus 事件文本框背景颜色变为黄色
EventUtil.addHandler(input1, "focus", function(){
this.style.background = "yellow";
});
//添加节点 input1
document.body.appendChild(input1);
});
</script>
</body>
</html>
</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617214602218-836908193.png">
页面表现：
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617213104109-593646029.png">
点击文本框内，input 元素获得焦点后文本框背景颜色变为黄色。
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617213210800-955827546.png">
方式2：为 <input> 元素添加一个 onfocus 特性
<div class="cnblogs_Highlighter">
<pre class="brush:html;collapse:true;;gutter:true;"><!DOCTYPE html>
<html>
<body>
<script>
function fn(x){
x.style.background = "yellow";
}
</script>
<input type="text" onfocus="fn(this)">
</body>
</html>
</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1779827/202006/1779827-20200617214837106-415316462.png">
页面表现同上。
  
来源：https://www.cnblogs.com/xiaoxuStudy/p/13154595.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript 【事件】焦点事件