JS事件处理函数

JS 事件处理函数的杂记

首先这是个非常傻X的错误

缘由：之前总是喜欢将事件处理函数写在html里面，偶尔会使用js来绑定一个临时生成的匿名回调函数,后来为了规范和代码的清晰，统一将事件处理函数放在了一个初始化事件的函数中，采用jQuery的.click()函数，具体写法大概就是jq("selector").click(someFunc())然后就出了个当时比较蛋疼的错误: 绑定函数之后就被触发了，当时一直搞不懂咋回事儿，后来突然发现传给click函数事件处理函数的时候，后面多写了个括号，直接就调用了一次. …

总之，无论如何时刻谨记，传入回调函数的，是一个函数的引用，带上括号的话就变成把函数调用一遍，然后返回值传入回调函数了

有的同学就问了:

我还带参数呢, 我就是想这么写咋办?

jq('.selector').click(myFunc('param'))

好办, 我们之前不是说过匿名回调函数吗, 把你要带参数调用的函数包在一个匿名函数里面就好了:

jq('.selector').click(()=> myFunc('param'))

(以上为es6语法，箭头函数)

不过这么做其实有点暴力，js 对 function 类型还提供了一个 bind 函数：

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called

所以我们现在的写法可以改成：

jq('.selector').click(myFunc.bind(null, 'param', 'param2'))
// 这里 bind 函数的第一个参数是函数执行上下文，这个参数的值，就
// 等于函数执行时的 this 值，如果没有上下文相关的操作，null 即可

◉ End.

---

参考资料:

MDN - bind()

如博文有叙述不妥以及不准确的地方, 望各位看客不吝赐教, 感谢.