MST
星途 面试题库

面试题：JavaScript中如何在函数内绑定事件处理函数并获取正确的this指向

在JavaScript中，假设有一个按钮元素，其id为'btn'。请编写一个函数`handleClick`，并将其绑定为按钮的点击事件处理函数。在`handleClick`函数内部，你需要正确获取按钮元素本身（即this指向按钮元素），并在控制台输出按钮的文本内容。请用ES5和ES6两种方式实现。
26.8万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试

ES5方式

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>ES5方式绑定点击事件</title>
</head>

<body>
  <button id="btn">点击我</button>
  <script>
    function handleClick() {
      console.log(this.textContent);
    }
    var btn = document.getElementById('btn');
    btn.addEventListener('click', handleClick.bind(btn));
  </script>
</body>

</html>

ES6方式

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>ES6方式绑定点击事件</title>
</head>

<body>
  <button id="btn">点击我</button>
  <script>
    const handleClick = function () {
      console.log(this.textContent);
    }.bind(document.getElementById('btn'));
    document.getElementById('btn').addEventListener('click', handleClick);
  </script>
</body>

</html>

在ES6方式中，也可以使用箭头函数结合addEventListener，不过需要注意箭头函数没有自己的this，这里使用const btn = document.getElementById('btn');提前获取按钮元素，在箭头函数中使用btn.textContent来获取文本内容。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>ES6箭头函数方式绑定点击事件</title>
</head>

<body>
  <button id="btn">点击我</button>
  <script>
    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
      console.log(btn.textContent);
    });
  </script>
</body>

</html>