js 点击事件回调函数传参

点击事件回调函数传参

使用匿名函数

function testFun(event, str) {
	console.log(str);
}

var test = document.getElementById('test');
test.addEventListener('click', function(event) {
	testFun(event, 'this is a test');
});

上面的例子给元素绑定点击事件函数的时候，使用了匿名函数，在匿名函数里面再调用testFun函数，这样可以方便给testFun函数传入参数，但这个方法看起来是那么的傻，最致命的是无法给元素解绑点击事件处理函数，实为下策！

使用bind方法

function testFun(str, event) {
	console.log(str);
	console.log(event.target === this);
}

var test = document.getElementById('test');
test.addEventListener('click', testFun.bind(test, 'this is a test'));

上面的例子中，使用bind方法来给testFun函数指定this值和参数，这样也能达到给回调函数传入参数的效果，看起来会更优雅一点。但值得注意的是回调函数的最后的一个参数才是event对象。同时，这个方法依然无法解绑事件处理函数，且在IE9以下不被支持。

JQuery方法

function testFun(event, str) {
	console.log(event.data.str);
	$(this).unbind('click', testFun);
}

$('#test').click({str: 'this is a test'}, testFun);

上面是使用jQuery的方法，注意，如果click事件不用传入第一个参数，那么就会当成一个模拟click事件。此方法将click第一个参数当成了event对象的一个data属性，在事件处理函数中就能够使用到传入参数，最主要的是可以通过jQuery本身的unbind方法解绑事件处理函数。