JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

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

复制代码 代码如下:

<input type="text" onblur="alert(this.value)"/>完全没有问题。

那么什么情况下不可以用?

fuction method()
{
  alert(this.value);
}
<input type="text" onblur="method()"/>

这个就不可以,因为method()是被响应函数调用的函数。

那么这种情况下怎么办?

方法一:

fuction method(btn)
{
  alert(btn.value);
}
<input type="text" onblur="method(this)"/>

没问题!

方法二:

fuction method()
{
  alert(window.event.srcElement.value);
}
<input type="text" onblur="method()"/>

没问题!window.event.srcElement取得触发事件的控件

我们在看一个稍微绕一点的例子

<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>
</head>
<body onload="InitEvent()">
  <input id="Text1" type="text" />
  <input id="Text2" type="text" />
  <input id="Text3" type="text" />
</body>
</html>

我们再来看看2者之间的区别和联系

this:

  下面先看一个例子:

 <html>
 <title>this与srcElement的区别</title>
 <head>
 <script type="text/javascipt>"
 function btnClick(){
  alert(this.value);
 }
 </script>
 </head>
 <body>
 <input type="button" value="单击" onclick="btnClick()"/>
 </body>
 </html>

 此时弹出的答案为“undefined”,说明在调用函数时不能使用this.属性来获取。再看下一个例子:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
   <title>无标题页</title>
   <script type="text/javascript">
   function btnClick(btn){
    alert(btn.value);
   }
   </script>
 </head>
 <body>
 <input type="button" onclick="btnClick(this)" value="单击" />
 
 </body>
 </html>

此时得出的答案为“单击”,此时为什么可以呢?从代码中可以看出,在onclick事件调用函数btnClick()时,将this当作参数传递给了函数。

综合以上:在函数调用时不能直接使用this.属性来获取,而必须将this当作参数传递。

 window.event.srcElement:

下面看一个例子:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
   <title>无标题页</title>
   <script type="text/javascript">
   function btnClick(){
    alert(window.event.srcElement.value);
   }
   </script>
 </head>
 <body>
 <input type="button" onclick="btnClick()" value="单击" />
 
 </body>
 </html>

此时得出的答案为“单击”,说明在调用函数时可以使用window.event.srcElement.属性来获取。

为什么this不能直接使用而window.event.srcElement可以直接使用呢?从单纯的字面上说this的意思是“当前”。在函数调用时,没有指定具体是哪一个控件,在函数中直接用this是不可以的。在第二段代码中就将this当成了参数传递,所以能得出正确的答案。

其实this和window.event.srcElement的使用区别是:如果要直接使用this.属性,此时的函数不能是被调用的而必须是响应函数,而window.event.srcElement则无此限制。

以上所述就是本文的全部内容了,希望大家能够喜欢。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
js需添加: 复制代码 代码如下: $("#div_bksq").bgiframe(); jsp需添加: 复制代码 代码如下: script type="text/javascript" src="resources/js/plugins/jquery/jquery.bgiframe.min.js"/script jsp代码: 复制代码 代码如下: !-- 添加、申请以及修改布控页面开始 -- div class="gjcx_pop" id="div_bksq"input type="text" id="t
本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法。分享给大家供大家参考。具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.or
自己封装的一个用HTML5+jQuery写的时钟表 代码: !DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"html xmlns="http://www.w3.org/1999/xhtml"headtitle超酷数码钟表/titlescript type="text/javascript" src="http://aj
1、数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素
JavaScript indexOf 方法 indexOf 方法用于计算某个指定的字符串在字符串中首次出现的位置,并返回该数值。其语法如下: 复制代码 代码如下: str_object.indexOf( search, start ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) search 必需。要检索的字符串 start 可选。指定开始检索的位置,如省略该参数,则将从字符串的首字符开始检索 提示:字符串是从 0 开始计数的。 indexOf 方法实例 复制代码 代码如下: s
比如20111102 下午闲着无聊,写了一个,代码没有经过优化, 只是凭着一股子无聊劲写出来的。 如果有哪位仁兄有兴趣把代码优化一下,感谢不尽 经过计算在公元2000年到3000年,一共有36个符合条件的世界完全对称日。 见到园子里有的博客,可以在下面加“运行”,直接执行Html代码,不知道怎么整的,可有人告知一下 复制代码 代码如下: !DOCTYPE HTML html head meta http-equiv="Content-Type" content="text/html; charset=utf
onclick中javascript的区别一般没用到都没注意,但出错时才有些郁闷,看文本章解释如下: 以前一直很随意,后来看.net里的linkbutton似乎是用在a href=#> 1.链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接); 2.假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。不信,你可以将 goGoogle 函数中的 return
方法一: var date = new Date(); date.setTime(date.getTime() + (x * 60 * 1000)); $.cookie('example', 'foo', { expires: date }); 方法二: script type="text/javascript"var expiresDate= new Date();expiresDate.setTime(expire.getTime() + (? * 60 * 1000)); //?替换成分钟数如果为6
复制代码 代码如下: $(function(){//脚本}) Jquery(function(){//脚本}) Jquery(document).ready(function(){//脚本}) 以上三个代码执行同一个动作,由于书写方便,所以Jquery比其他应用程序更受欢迎,但是当与其他js程序库一起使用的时候,特别是prototype.js同时使用时,不能使用$方法,因为他们也有该方法,可以用如下方法回避这种冲突: jQuery(function($){//脚本}) 他们都是当Dom加载完后执行的操作,

js操作textarea 常用方法总结 - 2015-05-31 10:05:23

在DOM里面操作textarea里面的字符,是比较麻烦的。 于是我有这个封装分享给大家,测试过IE6,8, firefox ,chrome, opera , safari。兼容没问题。 注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美。如果有高手也研究过,麻烦指点下。 复制代码 代码如下: var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @retur