event.currentTarget和document.activeElement用法

2016-02-19 23:36 7 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程，今天给大家分享event.currentTarget和document.activeElement用法教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发】

firefox 的 event.currentTarget 和 ie 的 document.activeElement 这两个完全含义不一致的对象却被捆绑在一起做成了浏览器兼容代码。大家在的时候都会发现 document.activeElement || event.currentTarget 的用法。

其实这样的用法是错误的，因为这两个属性的意义都不一样。

Identifies the current target for the event, as the event traverses the DOM.

识别当前事件触发的dom

Gets the object that has the focus when the parent document has focus.

获得当前focus的对象

例子

script type="text/javascript"
var show = function (e) {
alert(e.currentTarget？"获取到了 currentTarget":"获取到了 document.activeElement")
alert((e.currentTarget || document.activeElement).tagName);
};
/scriptBR 案例1: br/BR a href="#"img src="http://www.google.cn/images/nav_Logo3.png" border="0" alt="" onclick="show(event)"//a br/ br/BR 案例2: br/BR a href="#" onclick="show(event)"img src="http://www.google.cn/images/nav_Logo3.png" border="0" alt=""//a br/P/P
P 这两个案例,在ie和firefox下试验一下。/P

最后测试补充：后来测试了一下 document.activeElement 的支持程度，发现四大浏览器safari除外, ie firefox opera都提供了这个对象的支持。但是有点需要注意的，上面的例子中 opera 会把图片作为可以 focus的对象。导致document.activeElement的结果不一致...

来源:http://www.tulaoshi.com/n/20160219/1630218.html

上一篇： SPAN和DIV,Class与ID的区别汇总
下一篇： CSS制作政府公文的代码

看过《event.currentTarget和document.activeElement用法》的人还看了以下文章更多>>

event.currentTarget和document.activeElement用法 02-19
event.currentTarget和document.activeElement 02-19
document.createElement()用法及注意事项 02-20
css教程:css和document 02-19
document 和 document.all 分别什么时候用 02-19
JavaScript的document和window对象详解 02-19
js关于document和window对象 02-19
javascript currentTarget对象介绍 02-19
$(window).load(function(){})和$(document).ready(function(){}) 02-19
js的event详解 02-19

框架:document.compatMode

标签： Web开发

今天在看框架的时候无意间看到了document.compatMode，经过一番资料查找，终于搞懂了。文档模式在开发中貌似很少用到，最常见的是就是在获取页面宽高的时候，比如文档宽高，可见区域宽高等。 IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mo...

innerHTML和innerText的用法

标签： Web开发

用法： div id="test" span style="color:red"test1/span test2 /div 在JS中可以使用： test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值也就是span style="color:red"test1/span test2 。 test.innerText: 从起始位置到终止位...

冬凌草的价值和用法

标签：中医保健中医养生中草药

冬凌草是一种疗效显著的中药材，主要用于消炎止痛和活血抗癌的目的。但是很多人对于冬凌草并不是很了解，今天就由图老师小编为大家详细的介绍一下冬凌草的相关知识，一定会让大家收获很多的哦。目录 1.冬凌草的基本介绍 2.冬凌草的功效和作用 3.冬凌草的药用价值 4.冬凌草的临床应用 5.孕妇能吃冬凌草吗 6.冬凌...

document.open() 与 document.write()的区别

标签： Web开发

document.open() 打开一个新的空白文档，在IE下，open有两个默认参数，相当于document.open("text/html",'"")，第二个参数只有一个值可选：replace，如果启用了该值，则新建的文档会覆盖当前页面的文档（相当于清空了原文档里的所有元素，且不能后退即，浏览器的后退按钮不可用）；看一个例子： SCRIPT LANGUAGE="JavaScrip...

Javascript初学者实例教程(2):event对象和事件

标签： Web开发

上一篇介绍了Javascript初学者实例教程(1):简单交互实例二、本实例主要介绍了event对象和事件的简单应用。 html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" titlemouse/title script language="javascript" function catchEvent() { var event...

查看更多精彩>>