div元素获取焦点触发focus事件

快乐打工仔 分类:实例代码

div元素获取焦点触发focus事件属于前端实例代码,有关更多实例代码大家可以查看

通常情况下表单元素获取焦点后就可以触发focus事件,这一点在各个浏览器都是没有任何问题。

但很多元素无法获取焦点,比如div元素,就算是为它注册focus事件处理函数,也是无法触发此事件。

下面通过代码实例介绍一下如何让div触发focus事件。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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属性值的元素对象。

div元素获取焦点触发focus事件,这样的场景在实际项目中还是用的比较多的,关于div元素获取焦点触发focus事件就介绍到这了。

回复

我来回复
  • 暂无回复内容