如何将“this”绑定到单击侦听器并使用事件 - es6

Question

我有一个多步骤表单，有 4 个框架集。当我按下“下一步”按钮时，每个人都必须进入（当然）

我的 ES6 模块化代码包含如下内容：

class FormController {
  // 1. describe and initiate object
  constructor() {
    this.nextBtn = $(".next");
    this.next_fs;
    .... 

    this.events();
  }

  // EVENTS LISTENER
  events(){
    this.nextBtn.on("click", this.nextClicked.bind(this));
    // other listeners
  }

  nextClicked() {
    this.next_fs = $(this)
      .parent()
      .next(); // this is the next fieldset
    // some actions...
  }
// rest of the code
}

我的问题如下： 我需要在nextClicked 函数中绑定“this”，以便能够使用所有变量和方法，如this.next_fs、this.saveData() 等...

但是我还需要知道哪个按钮被点击了，我无法知道，因为this 不再是“这个按钮”，我不能传递一个变量（我们称之为'e'）来跟踪e .target.

我的代码有什么问题？我知道那是我没有看到的愚蠢的东西。

谢谢！

Answer 1

但我还需要知道点击了哪个按钮，我无法知道，因为“this”不再是“this button”，而且我无法传递变量（我们称之为'e'）来跟踪e .目标

浏览器的事件触发代码通过它。你只需要阅读它。

nextClicked(e) {

Answer 2

"...我无法传递变量（我们称之为'e'）来跟踪 e.target"

实际上，你不需要将它作为变量传递，因为即使你不传递e，你也可以在nextClicked中获取它，因为浏览器默认会这样做，所以它会作为参数传入 if您将函数声明为 nextClicked(e){...} 并保持绑定不变。

或者，你可以在this之后传参数，比如...bind(this, this.nextBtn)，那么nextCliked上的第一个参数就是按钮。

请看下面我提到的这两种可能性：

$(".buttons").on("click", this.nextClicked.bind(this))

function nextClicked(e){
  //here your context is the same as when you binded the function, but you have the event
  let target = e.target;
  console.log(target.id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1" class="buttons">click me 1</button>
<button id="btn-2" class="buttons">click me 2</button>

let nextButton = $("#btn-1")[0];
$(".buttons").on("click", this.nextClicked.bind(this, nextButton))

function nextClicked(nextBtn, e) {
  //here your context is the same as when you binded the function,
  //but you have the button AND the event
  console.log("NextButton Id: " + nextBtn.id);
  console.log("Clicked button Id: " + e.target.id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1" class="buttons">next</button>
<button id="btn-2" class="buttons">previous</button>

Answer 3

你在做

this.next_fs = $(this)

但是，之前您将其设置为 FormController 的实例

 this.nextBtn.on("click", this.nextClicked.bind(this));

所以你正在做的是

 this.next_fs = $( (FormController)this);

您希望 jQuery 使用类实例，而不是事件对象。

我强烈建议您不要在事件处理上下文中使用$(this)。 this 可以更改它的含义，正如您在示例中通过代码破坏所显示的那样。

始终使用event.target 或event.currentTarget。我更喜欢currentTarget，因为它指向绑定事件的元素，而不是该元素中更深层次的元素。

所以你的代码应该是

nextClicked(e) {
    this.next_fs = $(e.currentTarget)
      .parent()
      .next(); // this is the next fieldset
    // some actions...
  }