js事件监听机制（一）

概念：

某些组件被执行了某些操作后，触发某些代码的执行。
​ 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
​ 事件源：组件。如： 按钮 文本输入框...
​ 监听器：代码。
​ 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件：

1、点击事件：

  • onclick：单击事件
  • ondblclick：双击事件

2、焦点事件

  • onblur：失去焦点
  • onfocus:元素获得焦点。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
<script>
//2.加载完成事件  onload
window.onload = function(){
    //1.失去焦点事件onblur
    document.getElementById("username").onblur = function(){
        alert("失去焦点了...");
    }
</script>
</head>
  
<body>
<!--表单提交-->
<input name="username" id="username">
</body>
</html>

3、加载事件：

onload：一张页面或一幅图像完成加载。

4、鼠标事件：

  • onmousedown 鼠标按钮被按下。

  • onmouseup 鼠标按键被松开。

  • onmousemove 鼠标被移动。

  • onmouseover 鼠标移到某元素之上。

  • onmouseout 鼠标从某元素移开。

//3.绑定鼠标移动到元素之上事件
 document.getElementById("username").onmouseover = function(){
     alert("鼠标来了....");
 }


//3.绑定鼠标点击事件,onmousedown	鼠标按钮被按下
 document.getElementById("username").onmousedown = function(event){
     // alert("鼠标点击了....");
      alert(event.button); // 0左键 1中键 2右键
 }

// 按下enter 提交表单
document.getElementById("username").onkeydown = function(event){
     if(event.keyCode == 13){
         alert("提交表单");
     }

 }

5、键盘事件：

  • onkeydown 某个键盘按键被按下。

  • onkeyup 某个键盘按键被松开。

  • onkeypress 某个键盘按键被按下并松开。

6、选择和改变

  • onchange 域的内容被改变。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
<script>
//省市区的三级联动
document.getElementById("city").onchange = function(event){
    alert("改变了...")
}
</script>
</head>

<body>
  <form action="#" id="form"  >
		<select id="city">
    	<option>--请选择--</option>
    	<option>北京</option>
    	<option>上海</option>
    	<option>西安</option>
		</select>
		<input type="submit" value="提交">
	</form>
</body>
</html>
  • onselect 文本被选中。

7、表单事件：

  • onsubmit 确认按钮被点击。

  • onreset 重置按钮被点击。

校验符合条件 的才可提交数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>

    <script>
    	function checkForm(){
        //如果是false不允许提交数据
            return true;
        }
    </script>

</head>
<body>
<!--表单提交-->
<form action="#" id="form" onclick="return  checkForm();" >
<input name="username" id="username">

<select id="city" name="city">
    <option>--请选择--</option>
    <option>北京</option>
    <option>上海</option>
    <option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
posted @ 2021-09-24 16:04  只要不兔的学习笔记  阅读(450)  评论(0)    收藏  举报