如何将 'this' 绑定到点击侦听器并使用事件 - es6

Question

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

我的 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 不再是 "this button"，而且我无法传递变量（我们称它为 'e') 追踪 e.target.

我的代码怎么了？我知道这是我没有看到的愚蠢行为。

谢谢！

Answer 1

But I also need to know which button has been clicked, and I cannot know that because "this" is no more "this button", and I cannot pass a variable (let's call it 'e') to trace the e.target

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

nextClicked(e) {

Answer 2

"...and I cannot pass a variable (let's call it 'e') to trace the e.target"

实际上，你不需要将它作为变量传递，因为即使你不传递 e 你也可以在 nextClicked 中获取它，因为浏览器默认这样做，所以如果您将函数声明为 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 使用 class 实例，而不是事件对象。

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

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

所以你的代码应该是

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

如何将 'this' 绑定到点击侦听器并使用事件 - es6

How to bind 'this' to click listener and use the event - es6

javascript

event-listener

ecmascript-6

es6-class