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("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>

 

正如红色注释解说,上面可以用this获得当前触发事件的input。

目录
相关文章
|
1月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
1月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
8天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
36 3
|
23天前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
4天前
|
JavaScript 前端开发
JS中如何使用this方法
JS中如何使用this方法
|
1月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
20 1
|
1月前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
13 2
|
1月前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
|
1月前
|
前端开发 JavaScript
JavaScript:this-关键字,2024中级前端开发面试解答
JavaScript:this-关键字,2024中级前端开发面试解答