JavaScript 事件監聽

QixunQiu發表於2024-11-03
JavaScript事件

一 事件繫結

點選檢視程式碼 
1.透過 HTML標籤中的事件屬性進行繫結
 <input type="button" onclick='on()’>
function on(){
 alert("我被點了");
 }
2.透過 DOM 元素屬性繫結
<input type="button" id="btn">
document.getElementById("btn").onclick = function (){
 alert("我被點了");
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="點我" onclick="on()"> <br>
<input type="button" value="再點我" id="btn">
<script>
    function on(){
        alert("我被點了");
    }
    document.getElementById("btn").onclick = function (){
        alert("我被點了");
    }
</script>
</body>
</html>
二 常見事件
點選檢視程式碼 
onclick      滑鼠單擊事件
onblur       元素失去焦點
onfocus      元素獲得焦點
onload       某個頁面或影像被完成載入
onsubmit     當表單提交時觸發該事件
onmouseover  滑鼠被移到某元素之上
onmouseout   滑鼠從某元素移開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="register" action="#" >
    <input type="text" name="username" />
    <input type="submit" value="提交">
</form>
<script>
    document.getElementById("register").onsubmit = function (){
        //onsubmit 返回true，則表單會被提交，返回false，則表單不提交
        return true;
    }
</script>
</body>
</html>

相關文章