1、Js原生的事件綁定方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件綁定與入參</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div" style=" width: 80px;height: 80px;background-color: red;"></div>
</body>
<script>
var div = document.getElementById("div");
div.addEventListener('click', function () {
alert("1");
}, false);
div.addEventListener('click', function () {
alert("2");
}, false);
</script>
</html>
觸發事件後依次彈出：1 和 2
2、jQuery事件綁定方式
$("#div").bind("click", function () {
alert("1");
});
$("#div").bind("click", function () {
alert("2");
});
觸發事件後依次彈出：1 和 2
3、關於事件的重複綁定
var param1 = 1;
$("#div").bind("click", function () {
alert(param1);
});
var param2 = 2;
$("#div").bind("click", function () {
alert(param2);
});
觸發事件後依次彈出：1 和 2
4、回調函數的入參引用：入參不同名
if (1 < 2) {
var param1 = 1;
$("#div").bind("click", function () {
alert(param1);
});
}
if (2 < 3) {
var param2 = 2;
$("#div").bind("click", function () {
alert(param2);
});
}
觸發事件後依次彈出：1 和 2
5、回調函數的入參引用：入參同名
if (1 < 2) {
var param = 1;
$("#div").bind("click", function () {
alert(param);
});
}
if (2 < 3) {
var param = 2;
$("#div").bind("click", function () {
alert(param);
});
}
觸發事件後依次彈出：2 和 2
發生了什麼？
6、循環綁定中的回調入參
與同名入參回調一致
for (var i = 0; i < 2; i++) {
$("#div").bind("click", function () {
alert(i);
});
}
觸發事件後依次彈出：2 和 2
原因？var 型變量作用域不是函數就是全局，回調函數引用的變量作用域爲全局，所以 click 事件觸發時入參始終爲 2
7、解決回調入參同名問題方案一
var array = [0, 1];
$("#div").bind("click", function () {
alert(array[0]);
});
$("#div").bind("click", function () {
alert(array[1]);
});
觸發事件後依次彈出：0 和 1
8、解決回調入參同名問題方案二
for (var i = 0; i < 2; i++) {
var fun =
" $('#div').bind('click', function () { " +
" alert('" + i + "'); " +
" }); ";
eval(fun);
}
觸發事件後依次彈出：0 和 1
9、解決回調入參同名問題方案三：最佳
for (let i = 0; i < 2; i++) {
$('#div').bind('click', function () {
alert(i);
});
}
觸發事件後依次彈出：0 和 1
let 關鍵字是 ES6 新特性，解決
Let definenation are not supported by current JavaScript version
類似錯誤，訪問 鏈接
10、解決回調入參同名問題方案四
//TODO 閉包