JavaScript学习3（事件）

最新推荐文章于 2024-01-01 14:44:19 发布

herryone123

最新推荐文章于 2024-01-01 14:44:19 发布

阅读量395

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/kenjianqi1647/article/details/105118660

版权

Web前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

一、事件基础

1、事件与事件驱动

事件：当网页或网页中的元素发生某些动作时，浏览器就会产生一个事件。

事件驱动：事件驱动是Javascript中事件处理的一种方法，通过事件驱动可以调用Javascript中的函数或方法。

Javascript常用的事件有五种:鼠标事件、键盘事件、表单事件、编辑事件、页面事件。

2、事件调用的方法

事件调用的方式有两种：在script标签中调用、在元素中调用。

（1）在script标签中调用

调用语法：

<script type="text/javascript">
		obj.事件名=function()
		{
			
		};
	</script>

obj是一个DOM对象，即元素节点。

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function()
			{
				alert("触发按钮事件");
			};
		};
	</script>
</head>

<body>
	<input id="btn" type="button" value="按钮"/>
	
</body>

（2）在元素中调用事件

在元素中调用事件是指在HTML属性中来调用事件。即不需要getElementById（）等方法获得想要的元素，而是在元素属性中直接调用。

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">

			function alertMes()
			{
				alert("触发按钮事件");
			};

	</script>
</head>

<body>
	<input id="btn" type="button" onclick="alertMes()" value="按钮" />
	
</body>

3、鼠标事件

常见的鼠标事件如下：

（1）鼠标单击事件

鼠标单击事件不仅可以用于按钮元素，还可以用于其他元素。

（2）鼠标移入和移出事件

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var oP=document.getElementById("content");
			oP.onmouseover=function()//鼠标移入事件
			{
				this.style.color="red";
			}
			oP.onmouseout=function()//鼠标移出事件
			{
				this.style.color="blue";
			}
		}
	</script>
</head>

<body>
	<p id="content">鼠标移入移出测试</p>
</body>

4、键盘事件

键盘事件共有两种：键盘按下和键盘松开

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var oTxt=document.getElementById("txt");
			var oNum=document.getElementById("num");
			oTxt.onkeyup=function() //键盘按下事件
			{
				var str=oTxt.value;//获取文本框的内容
				oNum.innerHTML=str.length;//统计文本框的内容长度并显示在界面中
			}
			
		};
	</script>
</head>

<body>
	<input id="txt" type="text"/>
	<div>字符串长度为：  <span id="num">0</span></div>
</body>

5、表单事件

常用的表单事件有三种：

onfocus和onblur
onselect
onchange

（1）onfocus和onblur

当用户准备在文本框中输入内容时，它会获得光标，触发onfocus事件。当文本框失去光标时，就会触发onblur事件。具有获得焦点和失去焦点的元素有以下两种：

表单元素，如单选框、复选框、单行文本框等
超链接

应用举例：

鼠标点击文本框显示空，离开文本框显示‘’百度一下你就知道‘’。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var oSearch=document.getElementById("search");//获取元素对象
			oSearch.onfocus=function()//获取焦点
			{

				     this.value="";
			}
			oSearch.onblur=function()//失去焦点
			{
				this.value="百度一下，你就知道";
			}
		};
	</script>
</head>

<body>
	<input id="search" type="text" value="百度一下，你就知道"/>
	<input id="oBtn" type="button" value="搜索"/>
 	
</body>

（2）onselect

当选择“单行文本”或“多行文本”时触发onselect事件。

（3）onchange

onchange事件用于“具有多个选项的表单元素”。如：单选框、复选框和下拉菜单等。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var oRadio=document.getElementsByName("pl");//获取元素对象
			var oP=document.getElementById("content");
			for(var i=0;i<oRadio.length;i++)
				{
					oRadio[i].onchange=function()
					{
						if(this.checked)
							{
								oP.innerHTML=this.value;
							}
					};
				}
		};
	</script>
</head>

<body>
	<div>
		<label><input type="radio" name="pl" value="HTML"/>HTML</label>
		<label><input type="radio" name="pl" value="CSS"/>CSS</label>
		<label><input type="radio" name="pl" value="JavaScript"/>JavaScript</label>
	</div>
	<p id="content"></p>

选项下拉表：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var oList=document.getElementById("pl");
			var oP=document.getElementById("content");
			oList.onchange=function()
			{
				oP.innerHTML=this.options[this.selectedIndex].value;
			}
								
				
		};
	</script>
</head>

<body>
	<select id="pl">
		<option value="HTML">HTML</option>
		<option value="CSS">CSS</option>
		<option value="JavaScript">JavaScript</option>
	</select>
	<p id="content"></p>
 	
</body>

6、编辑事件

（1）oncopy

该事件可以来防止页面内容被复制。

document.body.oncopy=function()
{
   return false;
}

（2）onselectstart

该事件可以防止页面内容被选取

document.body.onselectstart=function()
{
   return false;
}

（3）oncontexmenu

该事件用来禁止鼠标右键。

document.oncontextmenu=function()
{
   return false;
}

7、页面事件

（1）onload

表示文档加载完成后再执行的一个事件。

window.onload = function()
{ 
  
}

（2）onbeforeunload

表示离开页面之前触发的一个事件。

window.onbeforeunload = function()
{

}

二、事件进阶

1、事件监听器

在Javascript中，给元素添加一个事件，有事件处理器和事件监听器两种方式。

（1）事件处理器

事件处理器通过操作HTML属性的方式来实现。该方式的缺点是无法为一个元素添加多个相同的事件。

var oBtn=document.getElementById("btn");
oBtn.onclick=function()
{
}

（2）事件监听器

使用addEventListener()方法为一个元素添加事件。

obj.addEventListener(type,fn,false)

obj是一个DOM对象；

type是一个字符串，指事件类型，不需要加on；

fn是指一个函数名或匿名函数名；

false表示在事件冒泡阶段调用。

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var oBtn=document.getElementById("btn");
			oBtn.addEventListener("click",alertMes,false);
			function alertMes()
			{
				alert("测试时间监听器");
			}
		};
	</script>
</head>

<body>
	<input id="btn" type="button" value="按钮"/>
 	
</body>

使用匿名函数的方式：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var oBtn=document.getElementById("btn");
			oBtn.addEventListener("click",function(){
				alert("事件监听器测试")
			},false)
		};
	</script>
</head>

<body>
	<input id="btn" type="button" value="按钮"/>
 	
</body>

解绑事件

通过removeEventListener()方法为元素解绑某个事件。

obj.removeEventListener(type,fn,false);

2、this

事件操作中，哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

herryone123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习3（事件）

一、事件基础1、事件与事件驱动事件：当网页或网页中的元素发生某些动作时，浏览器就会产生一个事件。事件驱动：事件驱动是Javascript中事件处理的一种方法，通过事件驱动可以调用Javascript中的函数或方法。Javascript常用的事件有五种:鼠标事件、键盘事件、表单事件、编辑事件、页面事件。2、事件调用的方法事件调用的方式有两种：在script标签中调用、在元素中...
复制链接

扫一扫