基于js中this和event 的区别(详解)

当我们在JavaScript中使用this和event时，可能会产生混淆。在JavaScript中，this指的是函数的上下文，而event指的是触发事件的对象。在本文中，将详细讲解在JavaScript中使用this和event的区别。

1. this

在JavaScript中，this指的是当前函数的上下文。在函数中使用this时，它将指向调用函数的对象。如果函数是作为对象的方法调用的，那么this指向该对象。如果函数是在全局环境中调用的，那么this指向全局对象（在浏览器中是window对象）。

例如，考虑以下代码片段：

var person = {
  name: 'John',
  age: 30,
  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // 输出 'John'

在这个例子中，sayName函数是一个对象的方法，我们通过person对象调用该方法。因此，当我们在sayName函数中使用this时，它指的是person对象。因此，输出结果是'John'。

现在考虑以下代码片段：

function printName() {
  console.log(this.name);
}

var person1 = {
  name: 'Jane',
  age: 25,
  printName: printName
};

var person2 = {
  name: 'Mike',
  age: 35,
  printName: printName
};

person1.printName(); // 输出 'Jane'
person2.printName(); // 输出 'Mike'

在这个例子中，我们定义了一个printName函数，然后将它作为person1和person2对象的一个方法。当我们通过person1对象和person2对象调用该方法时，this将指向person1和person2对象，输出结果是'Jane'和'Mike'。

2. event

在JavaScript中，当一个事件被触发时，浏览器会传递一个event对象作为参数，该对象包含与事件相关的信息。例如，如果用户单击按钮，那么event对象将包含有关该单击事件的详细信息，例如鼠标位置、单击次数等等。

我们可以通过在事件处理程序函数中使用event对象来访问这些信息。例如，考虑以下代码片段：

function handleClick(event) {
  console.log('鼠标位置：' + event.clientX + ',' + event.clientY);
}

var button = document.querySelector('button');

button.addEventListener('click', handleClick);

在这个例子中，我们定义了一个handleClick函数来处理按钮的单击事件。我们在addEventListener方法中将这个函数注册为按钮的单击事件处理程序。当该事件被触发时，浏览器将创建一个event对象，并将其传递给handleClick函数。我们在函数中使用event对象来记录鼠标位置，输出结果类似于'鼠标位置：100,200'。

另一个示例：

function handleKeyPress(event) {
  if (event.key == 'Enter') {
    console.log('Enter键被按下了');
  }
}

var input = document.querySelector('input');

input.addEventListener('keypress', handleKeyPress);

在这个示例中，我们定义了一个handleKeyPress函数来处理输入框的keypress事件。我们在addEventListener方法中将这个函数注册为输入框的事件处理程序。当该事件被触发时，浏览器将创建一个event对象并将其传递给handleKeyPress函数。我们在函数中使用event对象来检测按下的是不是Enter键，如果是，输出结果是'Enter键被按下了'。

综上所述，this和event都是在JavaScript中经常使用的概念。深入了解它们的区别和用法对于编写高质量的JavaScript代码非常重要。