<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>This</title>
<style>
#container{
width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
}
</style>
</head>
<body>
<!--看下面代碼-->
</body>
</html>
1. 在 element 上綁定事件
此時 this 指向 全局變量
<!-- 在<body</body>里加入: -->
<div id="container" onclick="addCount()"></div>
<script>
var count = 0;
function addCount() {
container.innerHTML = count++;
console.log(this); //window
};
</script>
2. js 綁定 onclick 事件
此時的 this 指向 該元素
<!-- 在<body</body>里加入: -->
<div id="container"></div>
<script>
var count = 0;
var container = document.getElementById('container');
function addCount() {
container.innerHTML = count++;
console.log(this); //<div id="container"></div>
};
container.onclick = addCount;
//如果寫成 container.onclick = addCount(),則：addCount()函數只執行一次，且它this指向window,此時輸出爲window,就不爲<div id="container"></div>
</script>
3. js 使用 addEventListener 綁定事件
此時的 this 指向 該元素,
注意： 在IE瀏覽器中，使用爲 attachEvent(), this 指向全局變量
<!-- 在<body</body>里加入: -->
<div id="container"></div>
<script>
var count = 0;
var container = document.getElementById('container');
function addCount() {
container.innerHTML = count++;
console.log(this); //<div id="container"></div>
};
container.addEventListener('click', addCount);
//如果寫成 container.addEventListener('click', addCount());,則：addCount()函數只執行一次，且它this指向window,此時輸出爲window,就不爲<div id="container"></div>
</script>
4. jquery 的 3種綁定 click 事件
此時的 this 均指向該元素
<div id="container"></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
var count = 0;
function addCount() {
$('#container').text(count++);
console.log(this);
};
$('#container').bind('click', addCount)//<div id="container"></div>
$('#container').click(addCount)//<div id="container"></div>
$('#container').on('click',addCount)//<div id="container"></div>
</script>