Javascript中target事件属性，事件的目标节点的获取。
window.event.srcElement与window.event.target 都是指向触发事件的元素，它是什么就有什么样的属性
srcElement是事件初始化目标html元素对象引用，因为事件通过元素层次冒泡，可以在任意一层进行处理，
有了元素的引用，就可以读写改元素的属性。
IE浏览器支持window.event.srcElement ， 而firefox支持window.event.target；
我们先看一个简单的例子：
<input type="text" οnblur="alert(this.value)"/>完全没有问题，能弹出框内容是text文本框里的文本内容。
fuction method(){
alert(this.value);}
<input type="text" οnblur="method()"/>这个就不可以，弹出框的内容是undefined，因为method()是被响应函数调用的函数。
也就是说，当描述某个事件时，直接想要获得该事件目标元素的value值是不行的，
这时候就需要先获取目标元素，再提取之中的value值。
可以做如下改动：
方法一：先使用this指向触发该onblur事件的目标元素，再提取之中的value值，代码如下
function method(this){alert(this.value);}
方法二：先通过window.event.srcElement（IE浏览器支持）或者window.event.target（FireFox浏览器支持）先指向触发该onblur事件的目标元素，再提 取之中的value值，代码如下
function method(){alert(window.event.srcElement.value);}
<input type="text" οnblur="method()"/>
下面再看一个复杂点的例子
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
function InitEvent() {
var inputs = document.getElementsByTagName_r("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onblur = OnblurEvent;
}
}
function OnblurEvent() {
// OnblurEvent是onblur的响应函数，而不是被响应函数调用的函数
// 所以可以用this来获取发生事件的对象
if (this.value.length > 0) {
this.style.backgroundColor = "white";
}
else {
this.style.backgroundColor = "red";
}
}
</script>
<body οnlοad="InitEvent()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
</body>
</html>
执行后，可以看到若在文本框内键入文本内容，失去焦点时文本框背景颜色为白色不变，但若文本框内没有文本内容就失去焦点，则背景颜色变为红色。
转载于:https://www.cnblogs.com/xiangxiao/p/4714833.html
Javascript中target事件属性，事件的目标节点的获取。相关推荐
- JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
- 在 JavaScript 中访问对象属性的 3 种方法
您可以通过 3 种方式访问 JavaScript 中对象的属性: 点属性访问器:object.property 方括号属性访问:object['property'] 对象解构:const { prop ...
- 删除javaScript中对象的属性
删除javaScript中对象的属性 语法 delete 对象.属性;
- javascript中mouseover和mouseout事件详解
原文链接:http://blog.sina.com.cn/s/blog_468530a60101awlw.html 与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 ...
- JavaScript中的Event（事件）详解
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 事件句柄 (Event ...
- JavaScript中的点击事件
1.自动触发一个元素的点击事件 $('#btn').click(); 2.为某个元素添加点击事件:推荐使用第一种 第一种方式:使用JQuery,为其绑定点击事件 <body><p&g ...
- JavaScript中window对象属性，时间等的总结
Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY.FRAMESET或 FRAME元素时,都会自动建立window对象的实例. ...
- JavaScript 中对象的属性类型
对象的属性类型 JavaScript 中的对象的属性包括数据属性和访问器属性,在 JavaScript 引擎的内部实现中定义了用于描述属性(property)的特性(attribute).规范中将特性 ...
- html中的js作用,javascript中的innerHTML属性有什么作用
innerHTML在javaScript中具有双向功能,一是可以从指定的元素对象中获取内容,二是可以把自定义内容插入到指定的元素对象中去. 定义和用法 innerHTML属性用于设置或返回指定标签之间 ...
- JavaScript中实现私有属性的写类方式（2）
上一篇写了个工具函数$class,这篇再完善以下.实现以下功能 1,继承 2,子类继承父类时,不继承父类的私有属性 /*** @param {String} className* @param {St ...
最新文章
- 20175310 《Java程序设计》第11周学习总结
- C语言实现常用数据结构——队列
- android画廊效果的轮播图,轮播图（3d画廊效果）
- Python中的迭代遍历 for in
- SQLite VC环境搭建
- 你知道你常用的dos和linux命令吗？
- Java多线程的4种实现方式
- play框架配置 拦截器_如何使用Play框架为https配置SSL证书
- fcpx插件:Beautiful Slideshow - 时尚简洁图片幻灯片开场
- 史上首个人脸识别禁令出台，警察用来抓罪犯也不行！旧金山可真行
- python怎么读write_python中write方法是如何使用？
- JavaScript JSON 对象使用详解、JSON. parse()、JSON. stringify()
- matlab 特征选择算法,特征选择、特征提取matlab算法实现(模式识别)
- Python-Telnet连接工具类
- 关于输入法图标消失 只能输入英文 win10 语言选项 键盘那里显示 输入法仅桌面的解决办法
- Android手机号码归属地查询
- 漂亮的LightBox图片画廊插件开发
- c语言出现错误c1083,DES 算法,出现异常：fatal error C1083: Cannot open include file: 'des_encode.h'...
- 速成PPTC（自恢复保险丝）选型
- 开源ios街机模拟器