JavaScript常用事件

---

事件

1.事件分类

(1)鼠标事件

1. Onclick:点击事件
2. Ondbclick：双击事件
3. Onmouseover：鼠标悬停事件
4. Onmouseout：鼠标移出事件
5. Onmousedown：鼠标按下
6. Onmouseup：鼠标弹起
7. Onmousemove：鼠标移动

(2)HTML事件

1. Onload：浏览器完成页面的加载
2. Onsubmit：表单验证
3. Onfoucs：聚焦事件
4. Onchange：HTML元素改变
5. Onblur：失去焦点

(3)键盘事件

1. Onkeydown:键盘按下
2. Onkeyup:键盘弹起
3. Onkeypress:键盘按下并弹起

2.具体实现

1.鼠标常用事件

<style>
    div.over h5{
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: antiquewhite;
        line-height: 200px;
        font-size: 10px;
    }
</style>
<!-- 鼠标事件 -->
        <!-- 单击事件 -->
        <button onclick="demo01()">单击我</button><br><br>
        <!-- 双击事件 -->
        <button ondblclick="demo02()">双击我</button><br><br>
        <!-- 鼠标悬停事件、移出事件 -->
         <div class="over" onmouseover="demo03()" onmouseout="demo04()">
            <h5>请移动到上面来</h5>
        </div>
   <script>
	    function demo01(){
	        alert("触发鼠标单击事件")
	    }
	    function demo02(){
	        alert("触发鼠标双击事件")
	    }
	    function demo03(){
	        alert("触发鼠标悬停事件")
	    }
	    function demo04(){
	        alert("触发鼠标移出事件")
	    }
    </script>

2.HTML常用事件

	  <!-- HTML事件 -->
      <!-- 页面加载 -->
   <div id="load" onload="demo05()">
        <h5>首先加载的页面</h5>
    </div>
    <!-- 表单验证事件 -->
    <form action="#" onsubmit="return demo06()">
        <!-- 聚焦事件、失焦事件 -->
       请输入名称 <input type="text" id="username" onfocus="demo07(this)" onblur="demo08(this)"><br><br>
       请输入密码 <input type="password" id="pwd"><br><br>
       <input type="submit">
    </form>    
	<script>
	    function demo05(){
	        console.log("首先加载的页面")
	    }
	     // 登录验证
	     function demo06() {
	        // 获取到节点
	        var username = document.getElementById("username");
	        var pwd = document.getElementById("pwd");
	        if (username.value == "") {
	            alert("账号不能为空");
	            return false;
	        }
	        if (pwd.value == "") {
	            alert("密码不能为空");
	            return false;
	        }
	    }
	    // 聚焦
	    function demo07(it){
	        if(it.value){
	            document.getElementById("username").innerHTML=it.value;
	        }else{
	            document.getElementById("username").innerHTML="请输入您的昵称";
	        }
	    }
	    // 失焦
	    function demo08(it){
	        if(it.value){
	            document.getElementById("username").innerHTML=it.value;
	        }else{
	            document.getElementById("username").innerHTML="昵称不能为空";
	        }
	    }
    </script>

3.键盘常用事件

		<!-- 键盘按下事件 -->
        <h5 onkeydown="demo10()">请按回车键提交</h5>
        <!-- 键盘弹起事件 -->
        <h5 onkeydown="demo11()">弹起键盘出发事件</h5>
	<script>  
        function demo10(){
        	alert("触发键盘按下事件")
    	}
    	function demo10(){
        	alert("触发键盘弹起事件")
  		}
	</script>

总结

事件就是一种“触发-响应”机制，有三部分组成：事件源、事件类型、事件处理程序也就是所谓的函数。就是触发某一事件时所执行函数中的内容。