4.事件驱动编程

文章目录一.事件驱动编程二.事件绑定三.事件相关四.综合练习五.AJAX六.获取服务端的时间-后台七.检查账号是否存在八.用户登录操作九.二级联动HTML格式十.二级联动 XML格式十一.JSON数据格式十二.操作JSON的库十三.二级联动-JSON数据格式实现一.事件驱动编程事件驱动编程所谓事件驱动,简单地说就是你点什么按钮(即产生什么事件),电脑执行什么操作(即调用什么函数).当然事件不仅限于用户的操作. 当对象处于某种状态时,可以发出一个消息通知,然后对这个消息感兴趣的程序就可以执行。
摘要由CSDN通过智能技术生成

一.事件驱动编程

  1. 事件驱动编程

    • 所谓事件驱动,简单地说就是你点什么按钮(即产生什么事件),电脑执行什么操作(即调用什么函数).当然事件不仅限于用户的操作. 当对象处于某种状态时,可以发出一个消息通知,然后对这个消息感兴趣的程序就可以执行。
  2. 事件驱动编程中的几个核心对象

    • 事件源:谁发出事件通知,发出消息;也就是事件主体(通常指元素和标签);
    • 事件名称:发出什么样的通知的名称,比如鼠标到我头上了,我被别人点了一下;
    • 事件响应函数:谁对这个这个事件感兴趣,当这个事件发生时要执行什么样的操作;
    • 事件对象:一般来说,当事件发生时,会产生一个描述该事件的具体对象,包括具体的参数等一起发给响应函数,好让他们通过事件对象来了解事件更加详细的信息。

二.事件绑定

事件监听,也就是指对指定对象的指定事件指定响应处理处理函数;

  1. 第一种:
    在标签上使用onclick属性配置

    事件源: 点我呀这个button, 可以在调用响应函数中传入this获取
    事件名称:onclick
    响应函数:clickMe
    事件对象:可以在响应函数中传入event获取
    

    注意: 此方式无法重复绑定响应函数

  2. 第二种:
    在js代码中,使用 "元素.οnclick=响应函数"进行事件监听

  3. 第三种:
    使用方法来完成对元素的监听

    IE
        [Object].attachEvent(“name_of_event_handler”, fnHandler);
          name_of_event_handler : 事件名称: 注意:事件操作前,必须加"on"!!!
          fnHandler: 响应函数
          多次添加监听后,触发顺序: 先添加,后执行
                      
        [Object].detachEvent(“name_of_event_handler”, fnHandler);
            fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
            匿名函数,每次创建的都不同	
      W3C
        [Object].addEventListener(“name_of_event”, fnHandler);
             name_of_event: 事件名称:  直接使用事件(操作)名称 (没有  on)
             多次添加监听后,触发顺序: 先添加,先执行           
             fnHandler: 响应函数
    
        [Object].removeEventListener(“name_of_event”, fnHandler);
            fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
            匿名函数,每次创建的都不同
    
  4. 定义一个通用的添加事件的函数

function addListener(element,eventName,eventFn){
         if(element.attachEvent){
               element.attachEvent("on"+eventName,eventFn);
         }else{
               element.addEventListener(eventName,eventFn);
         }
}

事件对象中包括了事件源及事件的具体描述信息,一般包括事件源,鼠标事件或键盘事件的相关信息;在监听函数中有时候需要通过事件对象来获取更详细的事件信息,然后再进行处理

oDiv.onclick = function (oEvent) {
//参数oEvent即为事件对象
}

实例.
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- 用户触发按钮之后,js引擎自动创建event对象 -->
	<button onclick="onclickMe(this,event)" id="btn">方式1:点我呀</button><br>
	<button id="btn2">方式二.点我呀</button><br>
	<button id="btn3">方式三.点我呀</button><br>
</body>
</html>

index.js



//方式二:
window.onload=function (){
	//方式二,通过js代码方式指定事件
	var btn2 = document.getElementById("btn2");
	//事件源:btn2,在匿名的function中,打印的this就是事件源,没有srcEl这个参数
	//事件名称:onclick
	//相应函数:匿名funcion
	btn2.onclick=function(event){
		console.log(event);
		//console.log(srcEl);//不存在
		console.log(this);
		alert("我又被点了~~");
	};
	//方式2,事件无法重复绑定,如果重复绑定,后面的会覆盖前面的
	btn2.onclick=function(event){
		console.log(event);
		//console.log(srcEl);//不存在
		console.log(this);
		alert("我又又被点了~~");
	};
	
	//方式三:
	  
	/*//IE:
	var btn3= document.getElementById("btn3");
	//事件源:btn3
	//事件名称:attachEvent方法的第一个参数
	//响应函数:匿名函数function
	//事件对象:匿名function的第一个参数
	//参数1:事件名称
	//参数2:响应函数
	btn3.attachEvent("onclick",function(eventObject){
		alert("我怎又又被点击");
		console.log(eventObject);//event
		console.log(this);//window
	});
	//可以重复绑定,倒序执行
	btn3.attachEvent("onclick",function(eventObject){
		alert("我怎又又被点击");
		console.log(eventObject);//event
		console.log(this);//window
	});*/
	
	
	/*//W3C
	var btn3= document.getElementById("btn3");
	//方式三:
	//事件源:btn3,匿名function 内部this
	//事件名称:addEventListener方法的第一个参数
	//响应函数:function
	//事件对象:匿名function第一个参数
	//参数1:事件名称 点击事件(onclick)
	btn3.addEventListener("click",function(eventObject){
		alert("我怎又又被点击");
		console.log(this);//window
		console.log(eventObject);//
	});
	//可以重复绑定,顺序执行
	btn3.addEventListener("click",function(eventObject){
		alert("我怎又又被点击");
		console.log(this);//
		console.log(eventObject);//
	});*/
	
	
	//通用事件绑定
	addEvent(btn3,"click",function(){
		alert("我怎又又又被点击");
	});
};

//设计一个方法:统一事件的绑定,既可以绑定IE,又可以实现W3C绑定
/**
 * 
 * @param srcEl: 事件源
 * @param eventType: 事件名称,IE拼接on
 * @param fnHandler: 统一处理函数
 * @returns
 */

function addEvent(srcEl,eventType,fnHandler){
	//attachEvent 方法是IE方法,如果有值就是IE浏览器,反之就是W3C
	if(srcEl.attachEvent){//IE
		srcEl.attachEvent("on"+eventType,fnHandler);
	}else{//W3C
		srcEl.addEventListener(eventType,fnHandler);
	}
}


//方式1:在onclick属性设置事件
//事件源: 点我呀这个button,可以在相应函数中传入this获取
//时间名称:onclick 点击事件
//事件处理函数: onclickMe
//事件对象:可以在相应函数中传入event获取
function onclickMe(srcEl,event){
	//根据id获取事件源
	console.log(document.getElementById("btn"));
	//根据this获取事件源
	console.log(srcEl);
	console.log(this);
	console.log(event);
	//函数中自带的参数对象,用来包装调用者传入的参数
	console.log(arguments);
	alert("你真点啊!");
}

三.事件相关

image

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
<img alt="" src="01.gif" id="myImg">
</body>
</html>

index.js

window.onload=function(){
	var imgEl = document.getElementById("myImg");
	
	addEvent(imgEl,"mouseout",function(){
		imgEl.src="01.gif";
	});
	addEvent(imgEl,"mouseover",function(){
		imgEl.src="02.gif";
	});
	
	addEvent(imgEl,"click",function(){
		imgEl.src="03.gif";
	});
	
};

//设计一个方法:统一事件的绑定,既可以绑定IE,又可以实现W3C绑定
/**
 * 
 * @param srcEl: 事件源
 * @param eventType: 事件名称,IE拼接on
 * @param fnHandler: 统一处理函数
 * @returns
 */

function addEvent(srcEl,eventType,fnHandler){
	//attachEvent 方法是IE方法,如果有值就是IE浏览器,反之就是W3C
	if(srcEl.attachEvent){//IE
		srcEl.attachEvent("on"+eventType,fnHandler);
	}else{//W3C
		srcEl.addEventListener(eventType,fnHandler);
	}
}

四.综合练习

多选框的选择
checkbox.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
<script type="text/javascript"  src="checkbox.js" ></script>
</head>
<body>
	请选择你的爱好:<br/>
	<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>
	<div>
		<input type="checkbox" name="hobby"/>JAVA&nbsp;
		<input type="checkbox" name="hobby"/>打篮球&nbsp;
		<input type="checkbox" name="hobby"/>上网&nbsp;
		<input type="checkbox" name="hobby"/>撩妹&nbsp;
	</div>
	
	<div>
		<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>
		<input type="button" onclick="checkAll(false)" value="全不选"/>
		<input type="button" onclick="checkUnAll()" value="反选"/>
	</div>
</body>
</html>

checkbox.js

//全选/全不选
function checkAll(value){
	//1.获取全部hobby
	var hobbys = document.getElementsByName("hobby");
	//2.遍历所有
	for(var i = 0;i < hobbys.length; i++ ){
		hobbys[i].checked=value;
	}
};
//反选
function checkUnAll(){
	//1.获取全部hobby
	var hobbys = document.getElementsByName("hobby");
	for(var i = 0;i < hobbys.length; i++){
		hobbys[i].checked=!hobbys[i].checked;
	}
};
//全选/全不选
//srcEl 页面传进来的事件源
function checkChange(srcEl){
	//1: 获取上面id为checkAll多选框 状态
	//2:获取所有要勾选多选框
	//3:遍历这些多选框,改变他们的值
	
	//为true是表示全选,为false时为全不选
	checkAll(srcEl.checked);
};

select移动

select.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<m
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
单片机事件驱动编程是一种基于事件响应的编程方式,它通过对外部事件的捕获和处理来控制单片机的行为。相比于传统的顺序执行方式,事件驱动编程更加灵活高效。 在单片机事件驱动编程中,需要定义一些事件,例如按键输入、定时器溢出等等。当事件发生时,单片机会立即响应并执行相应的事件处理程序。这种方式使得单片机的处理能力得到充分利用,能够在不同的事件间自由切换执行,提高了处理效率。 在实际的编程过程中,可以通过编写中断服务程序来处理事件。中断是一种特殊的程序执行方式,当产生中断信号时,CPU会立即转去执行相应的中断服务程序,完成对事件的响应和处理。通过合理使用中断,可以实现多个事件的并行处理,不会因为一个事件的处理而阻塞其他事件的响应。 单片机事件驱动编程PDF可以提供一些相关的知识和案例,帮助我们理解和掌握事件驱动编程的基本原理和方法。其中可能包括事件的定义与触发方式、中断的优先级和处理方法、事件处理程序的编写等内容。通过学习这些知识,我们可以更好地利用单片机的资源,提高程序的响应速度和效率。 总之,单片机事件驱动编程是一种高效灵活的编程方式,通过对外部事件的捕获和处理,可以更好地控制单片机的行为。学习单片机事件驱动编程需要掌握一些基本原理和方法,而单片机事件驱动编程PDF可以提供一些相关知识和案例,帮助我们更好地理解和应用这一编程方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值