1. 程式人生 > >html-事件

html-事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 50px;
            height: 50px;
            background: #b864ff
; } </style> </head> <body> <div id="box"></div> <script> /* 所謂事件,是指 JavaScript 捕獲到使用者的操作,並做出正確的響應。 在事件函式裡面,有一個關鍵字this,代表當前觸發事件的這個元素 事件:使用者的操作 元素.事件 = 函式; 滑鼠事件: 左鍵單擊 onclick 左鍵雙擊 ondblclick 滑鼠移入 onmouseover/onmouseenter *** 滑鼠移出 onmouseout/onmouseleave ***
*/ var oBox = document.getElementById("box"); oBox.onclick = function () { alert("我被點選了"); }; oBox.onmouseenter = function () { console.log("我被滑鼠移入啦"); this.innerHTML = "<h1>1</h1>"; // oBox.innerHTML = "<h1>1</h1>";
}; oBox.onmouseleave = function () { console.log("我被滑鼠移出啦"); } </script> </body> </html>