JS(五)事件编程

一、概念

1.1 简单介绍

        JavaScript 与 HTML 之间的交互是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码(并不一定发生,必须触发了事件才能发生)。这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合。

1.2 几个概念的理解

事件:点击/鼠标操作/键盘操作等等---发生的一个(动作)行为

事件源:产生事件的地方(元素,事件发生在谁身上)---绑定事件规定事件发生的位置

注册监听将监听器绑定到事件源上,监听(等待状态)事件的触发(发生)

监听器:当触发事件时,可能会产生一个事件对象(内置),该事件对象会封装好该事件的信息,传递给事件处理程序

事件处理程序响应用户事件的代码(处理函数),呈现效果

二、事件编程操作分析(逻辑)

           ①确定事件(发生的动作)并为其绑定一个函数

           ②书写绑定的函数

           ③处理数据,得到此动作的效果

三、JS中事件的种类

    2.1  焦点事件

        简单理解:比如打开一个应用程序,里面有一个文本框,当你用鼠标点击这个文本框的时候,这个文本框就是获得了焦点,你会发现文本框里会有光标闪动,这是你可以对文本框进行操作,输入字符串什么的, 也就是触发了onfocus事件,当然并不一定是用鼠标点击文本框,使用tab键可以将焦点转移。

    常用的两个焦点事件

onfocus 元素获得焦点

onblur   元素失去焦点

    需求1:点击文本框(准备输入内容),则文本框默认的值消失,同时文本框背景发生变化,离开文本框时,背景再次发生变化

        <body>
		<span>
			用户名:<input type="text" name="username" id="name" placeholder="请输入用户名" value="a" onfocus="show(this)" onblur="show1(this)"/>
		</span>
		
		<script type="text/javascript">
			function show(obj){
				//(1)点击输入框,触发焦点事件,this表示谁调用此函数,this就是谁,这里是ipuut标签,即事件对象。
				//(2)给此标签增加样式
				obj.style.cssText="background:yellow";
				//(3)同时里面的表单中默认内容清除(设置)
				obj.value="";
			}	
			//(2)失去焦点,触发焦点事件
			function show1(obj){
				obj.style.cssText="background: pink";
			}
		</script>
	</body>

说明:此种方式直接将事件写在标签里面

placeholder:是html5新增的input的一个熟悉,主要是让表单体验更加智能,相当于value属性,但是他有一个好处就是当我们

聚焦输入文本的时候我们在placeholder="默认值"的文本就会自动清空,不过浏览器的兼容性不太好。

注意:如果vale和placeholder共存,且都是非空串,则会显示value值,如果value是空串,则会自动显示placeholder值

    2.2  点击事件

onclick      当用户点击某个对象时调用的事件句柄 

   ondblclick 当用户双击某个对象时调用的事件句柄 

<body>
		<button id="bt">按钮</button>
		
		<script type="text/javascript">
		  	//绑定事件的方式2:用代码绑定
		  	
		  	//(1)获取标签对象
		  	var bt=document.getElementById("bt");
		  	//(2)单击onclick--绑定事件
		  	bt.onclick=function(){
		  	//(3)触发的行为
		  		bt.style.background = "red";
		  	}
		  	//(4)双击ondblclick
		  	bt.ondblclick=function(){
		  		bt.style.background="green";
		  	}
		  	document.write("haha");
		  	console.log("下一个执行了没有");
		</script>
</body>
注意:方式2,只有事件触发的时候才会去执行,并且不影响下面的代码的执行(错误理解:会阻塞)

    2.3 键盘事件

       引入:平时我们在玩游戏的时候,会通过键盘去控制方向,利用组合键去放大招等,那么天就来简单实现以下它的机制。

      用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。

onkeydown 某个键盘按键被按下
onkeyup      某个键盘按键被松开

onkeypress  某个键盘按键被按下并松开

模拟:通过键盘来控制方法

<body>
		<input type="text" id="in2" onkeydown="keydown(event)"/>
		
		<script type="text/javascript">
			//(1)参数对象e是一个事件对象,由浏览器创建
			
			//(2)解决浏览器兼容的问题
		  	var e = event || window.event ;
		  	function keydown(e) { 
		  	//(3)当触发事件的时候,会通过ASNII码表(键盘上每一个字符都有一个对应的ASCII码),去识别,做出对应的回应
			if(e.keyCode == 65) {
				alert("向左走");
			}
		}
		</script>
</body>

相关链接:点击打开链接

    2.4 鼠标事件

onmousedown 鼠标按钮被按下 
onmouseup      鼠标按键被松开 
onmouseover   鼠标移到某元素之 
onmouseout    鼠标从某元素移开 

onmousemove 鼠标被移动 (了解)。

简单应用

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>JS常用鼠标事件</title>  
    <style>  
        li{font-size: 18px;line-height: 35px;}  
        li:hover{cursor:pointer;}  
    </style>  
</head>  
<body>  
    <ol>  
        <li>单击我变色!</li>  
        <li>双击有惊喜!</li>  
        <li>鼠标滑过字体变大,鼠标离开字体变小!</li>  
        <li>鼠标按下文字为红色,鼠标抬起文字为绿色,鼠标移动打印“鼠标在 li 中移动了...”!</li>  
    </ol>  
  
    <script >  
        // 获取 li 标签  
        var oLis = document.getElementsByTagName("li");  
        /* 单击第一个 li */  
        oLis[0].onclick = function () {  
            this.style.backgroundColor = 'red';  
        }  
        /* ******************************************* */  
        /* 双击第二个 li */  
        oLis[1].ondblclick = function () {  
            this.style.color = 'red';  
        }  
        /* ******************************************* */  
        /* 鼠标滑过第三个 li */  
        oLis[2].onmouseover = function () {  
            this.style.fontSize = "22px";  
        }  
        /* 鼠标离开第三个 li */  
        oLis[2].onmouseout = function () {  
            this.style.fontSize = "18px";  
        }  
        /* ******************************************* */  
        /* 鼠标按下第四个 li */  
        oLis[3].onmousedown = function () {  
            this.style.color = 'red';  
        }  
        /* 鼠标抬起第四个 li */  
        oLis[3].onmouseup = function () {  
            this.style.color = 'green';  
        }  
        /* 鼠标在第四个 li 上移动 */  
        oLis[3].onmousemove = function () {  
            console.log('鼠标在 li 中移动了...');  
     
        }  
    </script>  
</body>  
</html>  			

相关链接:点击打开链接

    2.5 表单事件

onsubmit 确认按钮被点击

onreset    重置按钮被点击 

应用:用户注册的验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册信息</title>

	</head>

	<body>
		<form action="" method="get" onsubmit="return ckeckAll()">
			用户名:<input type="text" name="username" id="name" placeholder="请输入应户名" value="" onfocus="fs(this)" onblur="checkusername()" /><span id="myspan"></span><br /> 密   码:
			<input type="password" name="password" id="password" placeholder="请输入密码" onblur="checkpd()"/><span id="pd"></span><br /> 性   别:
			<input type="radio" name="agender" value="男" id="na" /><label for="na">男</label>
			<input type="radio" name="agender" value="女" id="nv" checked="checked" /><label for="nv">女</label><br /> 爱   好:
			<input type="checkbox" name="hoboby" value="run" />跑步
			<input type="checkbox" name="hoboby" value="music" />听音乐
			<input type="checkbox" name="hoboby" value="book" />看书<br />
			<input type="submit" value="注册" />
		</form>
	</body>
	<script type="text/javascript">
		//(1)获取焦点时,改变表框的样式
		function fs(obj) {
			obj.style.cssText = "color:yellow;background:black"; //复合动态设计样式(不通过id获取标签对象)
			obj.value="";//每次获取焦点都会自动消除
		}
		//(2)失去焦点时,对表单中输入的用户名进行校验
		function checkusername() {
			//(1)定义验证的规则--正则表达式(针对字符串的)
			var regex = /^[a-z]{6,16}$/i; //注意其中几个符号的含义(i--忽略)
			//(2)获取表单中填写的用户名(字符串的形式)
			var username = document.getElementById("name").value;
			//(3)开始验证
			var result = regex.test(username);
			//(4)鼠标离开时,根据验证的结果,在文本框后面,给予其相应的显示
			//(5)获取myspan标签
			var myspan = document.getElementById("myspan");
			if (result) {
				//注意:此处也能动态的创建标签
				//格式正确,绿色背景,字体黄色
  			    myspan.style.cssText="background: green;color: black;";
				myspan.innerHTML="用户名格式正确,请继续!";
			} else {
				//醒目的提醒(红色显示)
				myspan.style.cssText="background: black;color: red;";
				myspan.innerHTML = "用户名格式不正确,请重新输入";
			}
			return result;
		}
		//(3)密码验证
		function checkpd(){
			//(1)定义规则
			var regex=/^[0-9]{6,16}$/;
			//(2)获取用户的输入值
			var password=document.getElementById("password").value;
			//(3)校验
			var result=regex.test(password);
			//(4)获取span标签
			var pd=document.getElementById("pd");
			//(5)根据结果,给予不同的提示
			if(result){
				//正确
				pd.style.cssText="background: green;color: black;";
				pd.innerHTML="密码格式正确!"
			}else{
				pd.style.cssText="background: black;color: red;";
				pd.innerHTML = "密码的格式不正确";
			}
			return result;
		}
		//(4)提交表单时的验证(两者都正确才能提交)
		function ckeckAll(){
			console.log("haha");
			return checkusername()&&checkpd();
			
		}
		
	</script>

</html>

分析:

第一步:HTML搭建基本框架搭(表单)

细节优化:为了用户体验(点击单选框和复选框的文字时,也会被选中,这里只设置了单选框。

第二步:根据需求,动态的设置CSS样式以及绑定事件(也可以动态的添加标签)。

焦点事件:一旦点击文本框,就获取焦点,此时背景成粉色的,离开后背景成绿色的

最后的按钮:一点击要让其变大(有种哪种感觉)---设置CSS样式

第三步:更高要求(校验是否符合规则)

注意:焦点事件中触发函数时,本身并没有返回值,必须要return;而在script调用函数时有返回值则会返回值。

相关链接:点击打开链接(label标签),

  2.6   加载与卸载事件(了解)

onload      一张页面或一幅图像完成加载(先加载完页面) 
onunload  用户退出页面,不支持 IE支持

 2.7   其他事件

    针对表单
(1)onchange  域的内容被改变(比如下拉框)

(2)onselect    文本被选中

应用:卖饮料,根据顾客的选择,显示相应的价格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>卖饮料</title>
	</head>
	<body>
		<select size="1" onchange="change()" id="ss">
		<option value="1" selected="selected">可口</option>
		<option value="2">百事</option>
		<option value="3">非常</option>
		</select>
		<p>价格:<label id="aa">3</label>元</p>
	</body>
</html>
<script>
	function change() {
		var s = document.getElementById("ss").value;
		var a = document.getElementById("aa");
		if (s == "1") {
			a.innerText = "3"
		} else if (s == "2") {
			a.innerText = "4"
		} else {
			a.innerText = "5"
		}
	}
</script>

</html>

说明:一旦下拉框的内容发生变化,就会显示相应的内容。

相关链接:点击打开链接点击打开链接点击打开链接

未完待续。。。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页