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


Posted in Javascript onMay 25, 2015

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

<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则无此限制。

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

Javascript 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现表格行上移下移和置顶的方法
May 22 #Javascript
jquery控制表单输入框显示默认值的方法
May 22 #Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 #Javascript
JavaScript检测鼠标移动方向的方法
May 22 #Javascript
jQuery实现强制cookie过期方法汇总
May 22 #Javascript
jQuery判断指定id的对象是否存在的方法
May 22 #Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 #Javascript
You might like
PHP编码转换
2012/11/05 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
统计系教授推荐信
2014/02/28 职场文书
一年级班主任感言
2014/03/08 职场文书
党员公开承诺书范文
2014/03/25 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
安全责任书怎么写
2014/07/28 职场文书
大学运动会通讯稿
2015/07/18 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
python必学知识之文件操作(建议收藏)
2021/05/30 Python
MySQL空间数据存储及函数
2021/09/25 MySQL