window.event.srcElement与window.event.target 都是指向触发事件的元素，它是什么就有什么样的属性

srcElement是事件初始化目标html元素对象引用，因为事件通过元素层次冒泡，可以在任意一层进行处理，

有了元素的引用，就可以读写改元素的属性。

IE浏览器支持window.event.srcElement ， 而firefox支持window.event.target；

  我们先看一个简单的例子：

<input type="text" onblur="alert(this.value)"/>完全没有问题，能弹出框内容是text文本框里的文本内容。

   fuction method(){

       alert(this.value);}

<input type="text" onblur="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" onblur="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 onload="InitEvent()">

<input id="Text1" type="text" />

    <input id="Text2" type="text" />

    <input id="Text3" type="text" />
</body>
</html>

执行后，可以看到若在文本框内键入文本内容，失去焦点时文本框背景颜色为白色不变，但若文本框内没有文本内容就失去焦点，则背景颜色变为红色。

  

Javascript中target事件属性，事件的目标节点的获取。的更多相关文章

  1. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  2. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  3. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  4. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  5. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  6. javascript 中 arguments.callee属性

    javascript 中 arguments.callee属性 可以在函数内部,指向的是这个函数(或者叫做“类”)本身. 相当于PHP 中的 self 关键字. The arguments.calle ...

  7. JavaScript中对象的属性

    在JavaScript中,属性决定了一个对象的状态,本文详细的研究了它们是如何工作的. 属性类型 JavaScript中有三种不同类型的属性:命名数据属性(named data properties) ...

  8. JavaScript中Number常用属性和方法

    title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...

  9. JavaScript 中的延迟加载属性模式

    传统上,开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性.对于在构造函数中随时可用的小块数据来说,这不是问题.但是,如果在实例中可用之前需要计算某些数据,您可能不想预先支付该费 ...

  10. javascript中的cookie,以及事件解析

    Cookie: 它的意思是在本地的客户端的磁盘上以很小的文件形式保存数据,Cookie的处理原则上需要在服务器环境下运行,目前Chrome不可以在客户端操作Cookie,其他浏览器均可以,   Coo ...

随机推荐

  1. Synchronized 和 ReentrantLock （Lock ）的区别

    原始构成 Synchronized 是关键字,属于JVM层面,底层是通过 monitorenter 和 monitorexit 完成,依赖于 monitor 对象来完成.由于 wait/notify ...

  2. 错误：Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.

    Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. The ...

  3. Qt编程基础入门之二

    QMainWindow 菜单栏 菜单栏 最多有一个 //菜单栏创建,一个 QMenuBar *menu = new QMenuBar(this); // this->setMenuBar(men ...

  4. Coursera课程笔记----计算导论与C语言基础----Week 4

    感性认识计算机程序(Week 4) 引入 编程序 = 给计算机设计好运行步骤 程序 = 人们用来告诉计算机应该做什么的东西 问题➡️该告诉计算机什么?用什么形式告诉? 如果要创造一门"程序设 ...

  5. IO 模型知多少 | 代码篇

    引言 之前的一篇介绍IO 模型的文章IO 模型知多少 | 理论篇 比较偏理论,很多同学反应不是很好理解.这一篇咱们换一个角度,从代码角度来分析一下. socket 编程基础 开始之前,我们先来梳理一下 ...

  6. 如何得知某期刊是否被EI收錄？

    转载:http://tul.blog.ntu.edu.tw/archives/4627 若因投稿或評鑑需要,欲得知某期刊是否被 EI 收錄,其實就是確認該期刊是否包含在 EV 平台中的 COMPEND ...

  7. java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized的报错问题

    url的问题 这个是根据使用的数据库版本不同而出现的错误,mysql8.0以上版本在使用URL时如果使用的语句是 url=jdbc:mysql://localhost:3306/book 是会报错的, ...

  8. like模糊查询是否走索引

    1.模糊查询 后通配 走索引 前通配 走全表 2.where条件用in或or 不会走索引索引的本质是平衡b+数,是为了方便查询的平衡多路查找树 B-Tree相比,B+Tree有以下不同点: 每个节点的 ...

  9. css3 文字处理

    text-overflow:ellipsis;超出的文字显示...前提是该盒子必须有overflow:hidden;属性 text-shadow 文字阴影 direction:控制文字方向,值有dow ...

  10. 我的linux学习日记day2

    RPM  软件包管理器 目的:降低软件安装难度原理 :将软件源代码加上一套安装规则打包到一起,用户只需要运行RPM systemctl start 服务名称 开启服务systemctl stop 服务 ...