JavaScript學習筆記10: 事件繫結&監聽

HIK4RU44發表於2024-03-20
JavaScript筆記事件

JS事件監聽

繫結事件

為表單項input繫結onclick事件, 當按鈕被點選時觸發on函式

<form> 
    <input type="button" id="btn1" value="事件繫結" onclick="on()">  
</form>

on函式

<script>
    function on(){
        alert("按鈕1被點選了...");
   }
</script>

表單項繫結事件方式2

<form> 
    <input type="button" id="btn2" value="事件繫結2">    
</form>

<script>
    document.getElementById("btn2").onclick = function(){
        alert("按鈕2被點選!");
    }
</script> }

onmouseover, 滑鼠移入事件

onmouseout, 滑鼠移出事件

<form> 
    <img src="img/1.png" id="pic" width = "50%" onmouseover="p1()" onmouseout="p2()">
</form>

onfocus 獲取焦點

onblur 失去焦點

當滑鼠點選text框時獲取焦點, 點選其他位置時失去焦點

(不可以用focus和blur關鍵字做函式名)

<form>        
    使用者名稱:<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
</form>

<script>
    function ffn(){//獲取焦點
        console.log("獲取焦點");
    }
    function bfn(){//不能把函式名字定義為blur或focus, 關鍵字不能起作用...
        console.log("失去焦點");
    }
    function kfn(){
        console.log("按鍵按下");
    }
</script>

onsubmit 監聽提交事件

<form action="" onsubmit="subfn()"> 
    <input type="submit" value="提交">
</form> </form>

<script>
    function subfn(){
        alert("表單已提交!");
    }
</script>

相關文章