## 當鼠標放到頁面上移動時，盒子跟隨鼠標移動 ``` <style> div{ width: 100px; height: 100px; background-color: #f0f; position: absolute; left:0; top:0; } </style> <h2>鼠標綁定小盒子</h2> <div id="div"></div> <script> // 邏輯：1.先獲取鼠標的X、Y坐標 // 2.給div進行位置賦值 left 、 top let div = document.getElementById('div'); document.onmousemove = function(e){ let event = e || window.event; // console.log(event); div.style.left = event.clientX-div.clientWidth/2+'px'; div.style.top = event.clientY-div.clientHeight/2+'px'; } </script> ``` 鼠標移動觸發，打印的event：