JavaWeb学习笔记(17)__ 事件监听机制

最新推荐文章于 2022-05-27 23:06:37 发布

耿鬼不会笑

最新推荐文章于 2022-05-27 23:06:37 发布

阅读量188

点赞数

分类专栏： # JavaWeb开发基础文章标签： js javascript jquery css vue

本文链接：https://blog.csdn.net/A233666/article/details/105457380

版权

JavaWeb开发基础专栏收录该内容

23 篇文章 2 订阅

订阅专栏

事件监听机制

本文章基于黑马程序员视频教程《JavaWeb从入门到精通》进行整理，并由个人对部分内容进行补充说明。本文章仅用于个人学习/交流使用。

目录结构

- - 事件监听机制

1.基本概念

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


* 常见的事件：
	1. 点击事件：
		1. onclick：单击事件
		2. ondblclick：双击事件
	2. 焦点事件
		1. onblur：失去焦点 （光标）
		2. onfocus:元素获得焦点。

	3. 加载事件：
		1. onload：一张页面或一幅图像完成加载。

	4. 鼠标事件：
		1. onmousedown	鼠标按钮被按下。
			定义方法时，定义一个形参，接受event对象。
            event对象的button属性可以获取鼠标按钮键被点击了。
			左键是0，点滑轮是1，点右键是2
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。
		5. onmouseout	鼠标从某元素移开。
		
	5. 键盘事件：
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。

	6. 选择和改变
		1. onchange	域的内容被改变。
		2. onselect	文本被选中。

	7. 表单事件：
		1. onsubmit	确认按钮被点击。
			* 可以阻止表单的提交
            * 方法返回false则表单被阻止提交。
		2. onreset	重置按钮被点击。
		
<!--失去焦点，当鼠标从当前文本框移开，光标不在当前文本框显示时，触发事件，可用于当用户输入完用户名，检测用户名是否可用-->

2.绑定事件

* 如何绑定事件
	1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
		<img id="light" src="1.png" οnclick="fun();">

	2. 通过js获取元素对象，指定事件属性，设置一个函数
		<img id="light2" src="img/off.gif">
		<script>
			function fun2(){
				alert('---');
			}
			var light2 = document.getElementById("light2");//1.获取light2对象
			light2.onclick = fun2;//2.绑定事件
		</script>

3.事件演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
        //2.加载完成事件  onload
        window.onload = function(){
            //1.失去焦点事件
            document.getElementById("username").onblur = function(){
                alert("失去焦点了...");
            }
            //3.绑定鼠标移动到元素之上事件
            document.getElementById("username").onmouseover = function(){
                //alert("鼠标来了....");
            }
             //4.绑定鼠标点击事件
             document.getElementById("username").onmousedown = function(event){
                // alert("鼠标点击了....");
                 if(event.button==1){
                     alert("鼠标滑轮被点击了..")
                 }
             }
            //5.绑定键盘输入事件
            //键盘每输入一个字符，都会通过keyCode获取一个值(与ASCII类似)
              document.getElementById("username").onkeydown = function(event){
                  // alert("鼠标点击了....");
                  // alert(event.button);
                  //Enter键的keyCode是13.模拟按下Enter提交数据
                  if(event.keyCode == 13){
                      alert("提交表单");
                  }
              }
            //6,绑定下拉列表的改变事件
             document.getElementById("city").onchange = function(event){
                 alert("改变了...")
             }
            //7.绑定表单提交事件
            document.getElementById("form").onsubmit = function(){
                //校验用户名格式是否正确
                var flag = false;
                return flag;
            }
        }
    </script>
</head>
<body>
<form action="#" id="form" onclick="return  checkForm();">
    <input name="username" id="username">
    <select id="city">
        <option>--请选择--</option>
        <option>北京</option>
        <option>上海</option>
        <option>西安</option>
    </select>
    <input type="submit" value="提交">
</form>
</body>
</html>

耿鬼不会笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记(17)__ 事件监听机制

事件监听机制本文章基于黑马程序员视频教程《JavaWeb从入门到精通》进行整理，并由个人对部分内容进行补充说明。本文章仅用于个人学习/交流使用。目录结构事件监听机制1.基本概念2.绑定事件3.事件演示1.基本概念* 概念：某些组件被执行了某些操作后，触发某些代码的执行。 * 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了 * 事件源：组件。如：按钮文本输入框... *...
复制链接

扫一扫

专栏目录