JavaScript事件类型（二)

不念不忘少年蓝@ 2022-07-21 05:44 165阅读 0赞

# 焦点事件： #

在HTML页面中，每个元素都会得到焦点和失去焦点，我们的焦点事件就会在这个时候触发，利用这些事件与document.hasFoucs()方法及document.activeElement属性配合。可以知晓用户在页面上的行踪。

## 主要焦点事件： ##

blur:在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它；

DOMFoucusIn:在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。只有Opera支持这个事件。DOM3级事件废弃了DOMFocusIn,选择了focusin。

DOMFocusOut:在元素失去焦点时触发。这个事件是HTML事件blur的通用版本，只有Opera支持化这个事件。

focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它；

focusin:在元素获得焦点时触发。

focusout:在元素失去焦点时触发。

下面列举几个最常用的焦点事件

## onblur ##

## 定义和用法 ##

onblur 事件会在对象失去焦点时发生,这个事件不会冒泡，所有浏览器都支持它。

### 语法 ###

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 参数</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> SomeJavaScriptCode</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 必需。规定该事件发生时执行的 JavaScript。</td> 
  </tr> 
 </tbody> 
</table>

### 支持该事件的 HTML 标签： ###

### 支持该事件的 JavaScript 对象： ###

button, checkbox, fileUpload, layer, frame, password, 
    radio, reset, submit, text, textarea, window

例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function upperCase()
    {
    var x=document.getElementById("fname").value
    	alert(x);
    }
    </script>
    </head>
    
    <body>
    
    输入您的姓名：
    <input type="text" id="fname" οnblur="upperCase()" />
    
    </body>
    </html>

## focus ##

## 定义和用法 ##

focus() 方法用于为 checkbox 赋予焦点。

### 语法 ###

checkboxObject.focus()

## 实例 ##

下面的例子设置或移开 checkbox 上的焦点：

<html>
    <head>
    <script type="text/javascript">
    function setFocus()
      {
      document.getElementById('check1').focus()
      }
    function loseFocus()
      {
      document.getElementById('check1').blur()
      }
    </script>
    </head>
    <body>
    
    <form>
    <input type="checkbox" id="check1" />
    <br />
    <input type="button" οnclick="setFocus()" value="Set focus" />
    <input type="button" οnclick="loseFocus()" value="Lose focus" />
    </form>
    
    </body>
    </html>