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" οnfοcus="show(this)" οnblur="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>
blur事件</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 ElementById("bt");
//(2)单击onclick--绑定事件
bt.οnclick=function(){
//(3)触发的⾏为
bt.style.background = "red";
}
//(4)双击ondblclick
bt.οndblclick=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" οnkeydοwn="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 ⿏标按钮被 按下
onmouse up ⿏标按键被 松开
onmouse over ⿏标 移到某元素之 上
onmouseout ⿏标从某元素 移开
onmouse move ⿏标被移动 (了解)。
简单应⽤
<!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 = ElementsByTagName("li");
/
* 单击第⼀个 li */
oLis[0].onclick = function () {
this.style.backgroundColor = 'red';
}
/* ******************************************* */
/* 双击第⼆个 li */
oLis[1].ondblclick = function () {
lor = 'red';
}
/* ******************************************* */
/* ⿏标滑过第三个 li */
oLis[2].onmouseover = function () {
this.style.fontSize = "22px";
}
/* ⿏标离开第三个 li */
oLis[2].onmouseout = function () {
this.style.fontSize = "18px";
}
/* ******************************************* */
/* ⿏标按下第四个 li */
oLis[3].onmousedown = function () {
lor = 'red';
}
/* ⿏标抬起第四个 li */
oLis[3].onmouseup = function () {
lor = '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" οnsubmit="return ckeckAll()">
⽤户名：<input type="text" name="username" id="name" placeholder="请输⼊应户名" value="" οnfοcus="fs(this)" οnblur="checkusername()" /><span id="myspa <input type="password" name="password" id="password" placeholder="请输⼊密码" οnblur="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 = ElementById("name").value;
//(3)开始验证
var result = st(username);
//(4)⿏标离开时，根据验证的结果，在⽂本框后⾯，给予其相应的显⽰
//(5)获取myspan标签
var myspan = ElementById("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 ElementById("password").value;
//(3)校验
var st(password);
//(4)获取span标签
var ElementById("pd");
//(5)根据结果，给予不同的提⽰
if(result){
/
/正确
pd.style.cssText="background: green;color: black;";
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论