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. RSA host key has changed

  2. 【Kafka】实时看板案例

    目录 项目需求 项目模型 实现步骤 项目需求 快速计算双十一当天的订单量和销售金额 项目模型 实现步骤 一.创建topic bin/kafka-topics.sh --create --topic i ...

  3. centos7启动httpd服务失败：Job for httpd.service failed because the control process exited with error code.

    centos7启动httpd命令有两个可以用 service httpd start    systemctl start httpd.service 如果出现如下报错 Job for httpd.s ...

  4. SVN 分支代码合并到主线

    SVN 分支代码合并到主线 步骤一安装TortoiseSVN 客户端,在本地 checkout主线代码 步骤二:创建branches分支 步骤三.branches修改提交代码 步骤四:分支代码合并到主 ...

  5. JDBC09 CLOB文本大对象

    CLOB(Character Large Object) -用于储存大量的文本数据 BLOB(Binary Large Object) -用于存储大量的二进制数据 -大字段有些特殊,不同数据处理的方式 ...

  6. [csu/coj 1619] 递归

    题意:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1619 思路:由于式子具有递归的性质,考虑递归解,中间结果会超64位int,需用大数.另外自己 ...

  7. python --整理数据结构（列表）

    该整理来源于:https://www.runoob.com/python3/python3-data-structure.html 列表 python中列表是可变的,这是它区别于字符串和元组的最重要的 ...

  8. Spring处理@Configuration的分析

    Spring处理@Configuration的分析 声明:本文若有任何纰漏.错误,还请不吝指出! 序言 @Configuration注解在SpringBoot中作用很大,且不说SpringBoot中的 ...

  9. Codeforces1183C(C题）Computer Game

    Vova is playing a computer game. There are in total nn turns in the game and Vova really wants to pl ...

  10. Linux下几个与磁盘空间和文件尺寸相关的命令

    大家好,我是良许. 硬盘是计算机非常重要的一个部件,不管是代码,还是 UI .声音.文档,抑或是没人时偷偷看的小视频,都需要保存在硬盘里. 对于很多 Linux 服务器,会进行很多的编译操作.而编译操 ...