<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2 onmousedown = "f1(this)">事件中的this</h2>
<script type="text/javascript">
var h2 = document.getElementsByTagName('h2')[0];
//HTML方式綁定
function f1(obj){
console.log(obj);
}
f1( this );
/*
//DOM 0級綁定方式
h2.onclick = function(){
console.log(this);
}
//DOM 2級方式
h2.addEventListener('mouseover',function(){
console.log(this);
});
*/
</script>
</body>
</html>
溫故而知新,可以為師矣。 博客:www.ouyangke.com
Ini dalam JavaScript tidak ada kaitan dengan di mana fungsi itu ditakrifkan, tetapi dengan siapa yang memanggilnya.
h2 terikat pada acara, jadi ini menunjukkan elemen ini Anda boleh memahaminya sebagai
var dom = document.getElementsByTagName('h2')
dom.onmousedown = function(){
f1(this)
}
Bekas adalah bersamaan dengan `Sila masukkan kod
var h2 = document.querySelectorAll("h2")[0];
function fn(){
console.log(this);
}
h2.onmousedown = fn;
window.fn();
Ini menunjuk ke objek yang memanggilnya Pembolehubah dan fungsi yang anda tentukan dalam persekitaran global lalai kepada sifat dan kaedah objek tetingkap, jadi apabila anda melaksanakan fn() dalam persekitaran global, ini menghala ke tetingkap
.Kedua-dua ini bukan perkara yang sama.
<h2 onmousedown="f1(this)"></h2>
h2.onmouseover=f1()
h2.addEventListern(f1)
Ketiga-tiga kaedah ini semuanya mengikat fungsi panggil balik bernama f1 kepada h2 apabila peristiwa alih tetikus berlaku Fungsi panggil balik terikat peristiwa menghala ke elemen DOM itu sendiri.
dalam soalan anda//HTML方式綁定
function f1(obj){
console.log(obj);
}
f1( this );
Program ini berjalan di bawah skop tetingkap, jadi ini secara semula jadi menghala ke tetingkap. Kod ini tiada kaitan dengan h2 (tidak terikat).