標籤:
1.兩種方式綁定, this 不同的指向
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> li{width: 100px; height:150px;float:left; margin-right:30px; background: #f1f1f1;position: relative; z-index: 1;} div{width: 80px; height:200px; background:red; position: absolute; top:75px;left:10px;display: none} </style></head><body><ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li></ul><script> window.onload = function(){ var aLi = document.getElementsByTagName(‘li‘) for(var i = 0; i < aLi.length; i++){ aLi[i].onmouseover = function(){ var _this = this; showDiv(_this); } aLi[i].onmouseout = hideDiv; } } function showDiv(_this){ _this.getElementsByTagName(‘div‘)[0].style.display = ‘block‘; } function hideDiv(){ this.getElementsByTagName(‘div‘)[0].style.display = ‘none‘; }</script></body></html>
js - 02課 4 淺談this -3