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

2023年6月10日下午2:15 • JavaScript

JS中的this关键字

什么是this?

在JavaScript中，this是一个特殊的关键字，它在函数内部起着重要的作用，表明当前代码执行的上下文。当代码执行时，this的值会根据代码的上下文而动态的改变。

this指向的值

this关键字指向的是当前代码的“拥有者”或“执行者”，它的值会因为当前代码所在的位置而变化。下面是几个示例：

this指向window对象

当在全局作用域内使用this关键字时，它会指向window对象。

console.log(this === window); // true

this指向函数所属的对象

当一个函数是某个对象的方法时，this关键字会指向这个对象

let obj = {
    name: 'tom',
    sayName: function() {
        console.log(this.name);
    }
};
obj.sayName(); // 输出 tom

this指向函数本身

当使用函数的bind、apply或call方法时，this关键字会指向函数本身

function add(a, b) {
    console.log(this === add); // true
    return a + b;
}
let result = add.call(add, 1, 2); // 输出3

this指向构造函数的实例

使用new关键字调用构造函数时，this会指向构造函数的实例

function Person(name) {
    this.name = name;
    this.sayName = function() {
        console.log(this.name);
    }
}
let person = new Person('tom');
person.sayName(); // 输出tom

window.event.srcelement详解

what is window.event.srcelement?

在JavaScript中，window是全局对象，在浏览器中，window对象代表着浏览器的一个窗口或一个框架。而当我们在窗口中点击一个链接或鼠标单击一些按钮时，一个事件会被触发并被传递到window对象。

在事件处理函数中，可以使用window.event来获得当前事件对象。事件对象提供了一些用于操作事件的属性和方法，在此我们介绍其中的一个常用属性window.event.srcelement。

如何获取window.event.srcelement的值

通过window.event对象我们可以获得当前事件发生的具体位置，可以是一个HTML元素，也可以是页面中的某个区域。window.event.srcelement指的就是当前事件所在的HTML元素。

下面是一个示例，一个html页面中有一个button按钮，当按钮被单击时，会触发click事件，我们可以通过加入事件监听器的方式来获取事件对象，并使用window.event.srcelement来获取HTML元素。

<html>
<head>
    <title>测试window.event.srcelement属性</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function showMessage() {
            let el = window.event.srcElement;
            alert("当前点击的元素标签名为：" + el.tagName);
        }
        let btn = document.getElementById("myBtn");
        btn.onclick = showMessage;
    </script>
</head>
<body>
    <button id="myBtn">点击我</button>
</body>
</html>

当我们运行上面的代码，并单击button按钮时，弹出一个对话框，提示当前点击的元素标签名为 button。

总结

在JavaScript中，this和window.event.srcelement是两个常用的关键字/属性。this用于获取当前代码的执行者，window.event.srcelement用于获取当前事件所在的HTML元素。通过熟悉和灵活应用这两个关键字/属性，可以方便地编写出高效、优美的JavaScript代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中的THIS和WINDOW.EVENT.SRCELEMENT详解 - Python技术站