JavaScript学习笔记10: 事件绑定&监听

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>