一、概念
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>
</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.οnclick=function(){
//(3)触发的行为
bt.style.background = "red";
}
//(4)双击ondblclick
bt.οndblclick=function(){
bt.style.background="green";
}
document.write("haha");
console.log("下一个执行了没有");
</script>
</body>2.3 键盘事件
引入：平时我们在玩游戏的时候，会通过键盘去控制方向，利用组合键去放大招等，那么天就来简单实现以下它的机制。
用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。
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 鼠标从某元素 移开
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" οnsubmit="return ckeckAll()">
用户名：<input type="text" name="username" id="name" placeholder="请输入应户名" value="" οnfοcus="fs(this)" οnblur="checkusername()" /><span id="myspan"></span><br /> 密 码：
<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 = 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" οnchange="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>说明：一旦下拉框的内容发生变化，就会显示相应的内容。
未完待续。。。
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
