div元素獲取焦點觸發focus事件

admin發表於2017-12-04
事件

通常情況下表單元素獲取焦點後就可以觸發focus事件，這一點在各個瀏覽器都是沒有任何問題。

但很多元素無法獲取焦點，比如div元素，就算是為它註冊focus事件處理函式，也是無法觸發此事件。

下面通過程式碼例項介紹一下如何讓div觸發focus事件。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  padding:10px;
  width:100px;
  height:100px;
  background-color:#CCC;
}
</style>
<script type="text/javascript">
var hasAttr=function(el,name){
  var attr=el.getAttributeNode && el.getAttributeNode(name);
  return attr ? attr.specified : false
}
 
var addEvent=function(obj,type,callback){
  if(obj.addEventListener){
    obj.addEventListener(type,callback,false);
  } 
  else if(obj.attachEvent){
    obj.attachEvent("on" + type,callback);
  }
}
 
var done=function(el,fn){
  if(!hasAttr(el,"tabindex")){
    el.tabIndex=-1;
  }
  addEvent(el,"focus",function(e){
    fn.call(el,(e || window.event));
  });
}
 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  done(odiv,function(e){
    var oshow=document.getElementById("show");
     oshow.innerHTML=e.type;
  });
}
</script>
</head>
<body>
<div id="show"></div>
<div id="thediv">螞蟻部落</div>
</body>
</html>

上面的程式碼實現了我們的要求，會觸發focus事件，下面就介紹一下它的實現過程。

一.實現原理:

在預設狀態下，通常只有表單元素才會支援focus和blur事件，對於其他的元素沒有效果，但是隻要將此元素設定一個tabindex屬性就可以使用上述兩個事件了，上面的效果就是根據此道理來實現的。

二.程式碼註釋:

（1）.var hasAttr=function(el,name){}，此函式可以判斷指定的元素是否具有指定名稱的屬性節點，el引數是元素物件，name引數是屬性節點的名稱。

（2）.var attr=el.getAttributeNode && el.getAttributeNode(name)，如果瀏覽器支援getAttributeNode，那麼就會返回指定名稱的屬性節點物件。

（3）.return attr ? attr.specified : false，如果獲取指定屬性節點，那麼就返回true，否則返回false。

（4）.var addEvent=function(obj,type,callback){},此函式可以為指定的元素註冊指定型別的事件處理函式。

（5）.if(obj.addEventListener){obj.addEventListener(type,callback,false);}，註冊事件處理函式，標準瀏覽器的措施。

（6）.else if(obj.attachEvent){obj.attachEvent("on" + type,callback);}，為了相容IE8和IE8以下瀏覽器。

（7）.var done=function(el,fn){}，為指定元素註冊事件處理函式，第一個引數是元素物件，第二個引數是事件處理函式。

（8）.if(!hasAttr(el,"tabindex")){el.tabIndex=-1;}，如果原來元素上沒有tabindex屬性，就將tabIndex屬性值設定為-1，之所以這樣是為了防止影響之前tabIndex屬性的設定，關於為什麼tabIndex要設定為-1可以參閱相關閱讀。

（9）.addEvent(el,"focus",function(e){fn.call(el,(e || window.event));})，註冊事件處理函式，這裡註冊事件處理函式並沒有直接註冊fn，是因為為了實現事件處理函式中的this都能夠指向當前物件，attachEvent()方式註冊事件處理函式在IE6-IE8中，this是指向widow的，所以這裡做了一下相容，事件物件也做了相容。

（10）.window.onload=function(){}，文件內容完全載入完畢再去執行相應的程式碼。

（11）.var odiv=document.getElementById("thediv")，獲取指定id屬性值的元素物件。

相關文章