Js常见的事件分类

最新推荐文章于 2024-04-25 20:29:33 发布

糊糊67

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量742

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43249530/article/details/96120552

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

事件编程三要素

（1）事件源：html标签
（2）编写事件监听器：定义一个函数，针对这个标签设置一些特定的事件
（3）注册/绑定事件监听器：使用html标签特定属性和定义的函数进行绑定，就是将当前函数和事件进行绑定

常见事件分类

单击、双击点击事件

＜script＞
//1.单击点击事件onclick
function testClick(){
	alert("触发了单击点击事件") ;
}
//2.双击点击事件ondbclick
function testDbClick(){
	alert("触发了双击点击事件") ;
}
＜／script＞
＜body＞
<input type="button" value="单击点击" onclick="testClick()" /><br />
<input type="button" value="双击点击" ondblclick="testDbClick()" />
＜／body＞

onfocus:获取焦点事件
onblur:失去焦点事件

//３.获得焦点事件
function testFocus(){
	//通过id属性值获取当前input标签对象
	var input = document.getElementById("username") ;
	//设置他的value属性，变为空的，默认值清空
	input.value = "" ;
}
//４.失去焦点事件
function testBlur(){
	//获取input标签对象
	var username = document.getElementById("username") ;
	//获取用户名的内容
	username = username.value ;
	
	//获取id="user_span"的span标签对象
	var span = document.getElementById("user_span") ;
	//如果输入的用户名不是"eric",表示用户名可用
	if(username == "eric"){
		//设置span的innerHTML属性
		span.innerHTML  = "当前用户名被占用".fontcolor("red") ;
	}else{
		span.innerHTML  = "恭喜,用户名可用".fontcolor("greenyellow") ;
	}
}
<!--
	和焦点相关的事件
获取焦点: onfoucs   应用场景:文本输入框中获取焦点将默认值清空；placeholder是一个默认值是ｈ５提供的，当写上用户名的时候就消失了
失去焦点: onblur    应用场景:原生js表单验证，不借助框架
-->
用户名:<input type="text" onblur="testBlur()" onfocus="testFocus()" id="username" value="请输入用户名"/>

<!--获取到span标签，能够动态显示,设置他的innerHTML，获得他的文本内容-->
<span id="user_span"></span>

select
onchange事件:选项卡发生变化场景:省市联动

//５.选项卡发生变化，省市联动
function testChange(){
	//第二种方式:定义二位数组   ［｛｝，｛｝，｛｝］
	//第三种方式:Jquery,each():Jquery的遍历
	//通过id="province"获取省份所在的select标签对象
	var province = document.getElementById("province");
	//同时获取内容
　//alert(province.value) ;测试能否获取内容
	province = province.value ;
	
	//获取id="city"的select标签对象
	var city = document.getElementById("city") ;
	//选项卡变化,应该清楚city的innerHTML属性，变为空字符串
	city.innerHTML ="" ;
	
	//需要判断当省份所在的select选中的内容
	if(province =="陕西省"){
		//定义一个数组
		var arr  = ["西安市","咸阳市","宝鸡市","渭南市"]   ;
		//遍历城市
		for(var i  = 0 ; i < arr.length ; i++){
			/*<option value="西安市">西安市</option>*/
			//设置city所在的标签对象的innerHTML属性
			city.innerHTML +="<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
		}
	}
	
	if(province =="山西省"){
		//定义一个数组
		var arr  = ["太原市","大同市","运城市","晋中市"]   ;
		//遍历城市
		for(var i  = 0 ; i < arr.length ; i++){
			//设置city所在的标签对象的innerHTML属性
			city.innerHTML +="<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
		}
	}
	
	if(province =="广东省"){
		//定义一个数组
		var arr  = ["深圳市","惠州市","东莞市","广州市"]   ;
		//遍历城市
		for(var i  = 0 ; i < arr.length ; i++){
			//设置city所在的标签对象的innerHTML属性
			city.innerHTML +="<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
		}
	}
}
<!--
	下拉菜单:select    
			onchange事件 :选项卡是否发生变化的事件
			场景:省市联动
-->
body体内
<select  id="province" onchange="testChange()" >
	<option value="请选择">--请选择--</option>
	<option value="陕西省">陕西省</option>
	<option value="山西省">山西省</option>
	<option value="广东省">广东省</option>
</select>
<select id="city"></select>

４.鼠标经过事件:onmouseover
　鼠标移除事件:onmouseout

<style>
		div{		
			width: 200px;
			height: 200px;
			border: 1px solid #000;／／实线
		  }
</style>
＜script＞
//６.鼠标经过事件
function testMouserOver(){
	alert("触发了鼠标经过事件") ;
}
//７.鼠标移除事件
function testMouserOut(){
	alert("触发了鼠标移除事件") ;
｝
＜／script＞
<div onmouseover="testMouserOver()"　 onmouseout="testMouserOut()"></div>

５.onload:页面载入事件：一般在body指定这个属性:body中所有内容加载完毕之后触发方法，放置出现元素对象是"null"， body中内容(不管有多少个标签),将body中的加载完毕之后触发这个方法

//网页时钟
<script>
function init(){
//	alert("页面载入事件") ;
//触发一个定时器window.setInterval("newDate()",1000) ;
}
</script>
<body onload="init()"></body>

糊糊67

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js常见的事件分类

事件编程（1）事件源：html标签（2）编写事件监听器；定义一个函数（3）注册/绑定事件监听器：使用html标签特定属性和定义的函数进行绑定常见事件分类onclick:单击点击事件obdbclick:双击点击事件onkeyup:按键抬起事件onfocus:获取焦点事件onblur:失去焦点事件onchange事件:选项卡发生变化场景:省市联动onload:页面载入事件：一...
复制链接

扫一扫

专栏目录