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事件就介绍到这了。