JavaScript 事件

最新推荐文章于 2023-08-04 08:52:24 发布

真香号

最新推荐文章于 2023-08-04 08:52:24 发布

阅读量163

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/zhanshixiang/article/details/90520205

JS 专栏收录该内容

17 篇文章

订阅专栏

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在，事件通常可以修饰多种对象。

一、为对象添加事件的 2 种方式

1、在 HTML 元素中添加对象的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
	<script>
		function overtest(){
			
			alert("已经移动到图片上方");
		}
		
	</script>
	</head>
	<body>
		<img src="../../img/1.jpg"  width="200" height="300" onmouseover="overtest()"/>
	</body>
</html>

2、在 JS 代码中为元素添加事件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>事件</title>
		<script>
			/**
			 * 总结：优先使用第二种，将 js 代码与 HTML 元素代码分离开，更加方便统一管理维护。
			    问题：HTML 元素添加事件， 与 JS 添加事件是否可以完全等价？
			     在实际开发中，如果传参数，使用 HTML 元素绑定事件，如果不传参数，使用 JS 绑定
		  	   事件。
			 * 
			*/
			function overtest() {
				alert("鼠标已经移动到图片上方")
			}
			window.onload = function() {
				document.getElementById("myimg").onmouseover = overtest;
			}
		</script>
	</head>

	<body>

		<img src="../../img/1.jpg" width="300" height="400" id="myimg" />
	</body>

</html>

效果同上。

总结：优先使用第二种，将 js 代码与 HTML 元素代码分离开，更加方便统一管理维护。

问题：HTML 元素添加事件，与 JS 添加事件是否可以完全等价？
在实际开发中，如果传参数，使用 HTML 元素绑定事件，如果不传参数，使用 JS 绑定
事件。传参数也可以使用与 JS 绑定事件【使用匿名函数】。示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML事件绑定与JS绑定</title>
		 <meta http-equiv="content-type" content="text/html; charset=gbk">
		<script>
			/**
			 * 在实际开发中，如果传参数，使用 HTML 元素绑定事件，如果不传参数，使用 JS 绑定
                        事件。传参数也可以使用与 JS 绑定事件【使用匿名函数】。示例代码如下：
			 * 
			 */
			function clicktest(o){
               alert(o);
                           }
             window.onload = function(){
                  document.getElementById("mybutton").onclick = function(){
                clicktest('次奥');
                }
          }
			
			
			
		</script>
	</head>
	<body>
		 <input type="button" id="mybutton" value="点击我！">
         <input type="button" value="别碰我！" onclick = "clicktest('次奥')"/>
	</body>
</html>

3、鼠标移动事件

Mousemove：鼠标移动时触发事件鼠标跟随效果

Mouseover：鼠标从元素外，移动元素之上，信息提示、字体变色

Mouseout：鼠标从元素上，移出元素范围，和 mouseover 一起使用

4、鼠标点击事件（左键相关事件）

click 鼠标单击事件

dbclick 鼠标双击事件

mousedown/mouseup 鼠标按下、按键弹起 click = mousedown + mouseup;

oncontextmenu 鼠标右键菜单事件（不是浏览器兼容事件）

5、聚焦离焦事件

<!DOCTYPE html>
<html>

</head>

用户名：<input type="text" id="username"/><br />
</body>

</html>

onblur

元素失去焦点。

focus 聚焦页面焦点定位到目标元素

blur 离焦页面焦点由目标元素移开

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>聚焦离焦</title>
		<script>
			window.onload=function(){
							//页面加载以后，在输入框加入默认值，并以灰色显示
							document.getElementById("username").value="请输入用户名";
							document.getElementById("username").style.color="gray";
							
							//聚焦事件
							document.getElementById("username").onfocus=function(){
								document.getElementById("username").value="";
								document.getElementById("username").style.color="black";
							}
							
							//离焦事件
							document.getElementById("username").onblur=function(){
						    var name= document.getElementById("username").value;
							if(name==""){
								document.getElementById("username").value="请输入用户名";
								document.getElementById("username").style.color="gray";
							}
							}
							
						}
			
		</script>

	</head>

	<body  >

		用户名：<input type="text" id="username"/><br />
	</body>

</html>

鼠标点击聚焦以后，提示问题就消失了。

默认事件的阻止和传播阻止.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>默认事件的阻止和传播阻止</title>
		<script type="text/javascript">
		//阻止默认事件发生
		function confirmDel(e){
			var isConfirm=window.confirm("确认删除吗？");
		  if(!isConfirm){//用户选择了取消
             //阻止默认事件
             if(e&&e.preventDefault){
             	//火狐
             	e.preventDefault();
             }else{
             	//IE
             	window.event.returnValue=false;
             	
             }
		  }else{
		  	alert("删除成功");
		  	e.preventDefault();
		  }
			
		}
		//阻止事件冒泡
		function aclick(e){
			alert("a");
			if (e&& e.stopPropagation) {
				//火狐浏览器
				e.stopPropagation();
				//alert("b");
			} else{
				//IE浏览器
				window.event.cancelBubble=true;
				//alert("c");
			}
		}
		
		
		function divclick(){
			
			alert("div");
		}
		</script>
		
	</head>
	<body>
	<h1>默认事件</h1>
	<!--删除时询问用户是否删除，然后再跳转-->
	<a href="del?id=1" onclick="confirmDel(event);">这是一个超链接</a>
	<h1>事件传播</h1>
	<!--事件冒泡传播-->
	<div onclick="divclick();"> <a href="#" onclick="aclick(event);">这个链接会触发两个事件执行</a> </div>
	</body>
</html>