开篇寄语：
有些人看起来整天面带笑容，并不是因为他们事事顺利，只是他们比你敢于面对问题、善于遗忘不幸、勇于拥抱欣喜。
人最大的对手，往往不是别人，而是自己的懒惰。别指望撞大运，运气不可能永远在你身上，任何时候都要靠 本事吃饭。
也许这每天的两句话不能改变你当下的情况，但至少被你看见过，就是最美好的事。
从今天开始就要对JavaScript做进一步的学习了。
一、JavaScript事件模型
事件是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。
事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
1、理解
作用
-
验证用户输入的数据。
-
增加页面的动感效果。
-
增强用户的体验度。
事件中几个名词
事件源：谁触发的事件
事件名：触发了什么事件
事件监听：谁管这个事情，谁监视？
事件处理：发生了怎么办
比如
闯红灯
事件源：车；事件名：闯红灯；监听：摄像头、交警；处理：扣分罚款 。
点击按钮
事件源：按钮；事件名：点击；监听：浏览器窗口；处理：执行函数。
当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load等都是事件名称，对应具体的执行代码处理，响应某个事件的函数。
<!-- onload浏览器加载时就执行的事件 -->
<body οnlοad="loadWindow();">
<script type="text/javascript">
function loadWindow() {
alert("加载窗体");
}
</script>
</body>
2、事件类型
JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。
Window事件属性: 针对 window 对象触发的事件（应用到 <body> 标签）
Form事件: 由 HTML表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）
Keyboard 事件: 键盘事件
Mouse 事件: 由鼠标或类似用户动作触发的事件
Media 事件: 由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如<audio>、<embed>、<img>、<object> 以及<video>）
3、常用事件
onload：当页面或图像加载完后立即触发
onclick：鼠标点击某个对象
onblur：元素失去焦点
onfocus：元素获得焦点
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>常用事件</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
background: gray;
margin-top: 100px;
}
</style>
</head>
<body οnlοad="loadFunc();">
<button type="button" οnclick="clickFunc();">点击事件</button><br/>
用户名：<input id="user_id" type="text" οnblur="blurFunc();" οnfοcus="focusFunc();" οnkeydοwn="keydownFunc();" οnkeyup="keyupFunc();" />
<span id="user_span"></span>
<br />
爱好：
<select οnchange="changeFunc();">
<option>---请选择---</option>
<option>篮球</option>
<option>足球</option>
<option>乒乓球</option>
</select>
<div οnclick="clickFunc();" οnmοuseοver="moverFunc();" οnmοuseοut="moutFunc();">我是一个div</div>
<script type="text/javascript">
function loadFunc() {
alert('浏览器加载时调用指定函数执行的代码');
}
// onload：当页面或图像加载完后立即触发
/*
window.onload = function() {
alert('浏览器加载时调用指定函数执行的代码');
}
*/
// onclick：鼠标点击某个对象
function clickFunc() {
alert('点击事件触发的效果');
}
// onblur：元素失去焦点
function blurFunc() {
document.getElementById('user_span').innerHTML = '用户名不能为空';
}
// onfocus：元素获得焦点
function focusFunc() {
document.getElementById('user_span').innerHTML = '用户名为4~10个字符';
}
// onkeydown：某个键盘的键被按下
function keydownFunc() {
// m是77
if(77 == event.keyCode) {
document.getElementById('user_span').innerHTML = '不要骂人，消息无效';
}
}
// onkeyup：某个键盘的键被松开
function keyupFunc() {
console.log(event.keyCode);
if(77 == event.keyCode) {
document.getElementById('user_id').value = '';
}
}
// onchange：用户改变域的内容
function changeFunc() {
document.getElementById('user_span').innerHTML = '爱好已改变';
}
// onmouseover：鼠标移动到某个元素上
function moverFunc() {
document.getElementById('user_span').innerHTML = '鼠标已移动至div';
}
// onmouseout：鼠标从某个元素上离开
function moutFunc() {
document.getElementById('user_span').innerHTML = '';
}
</script>
</body>
</html>
4、事件处理程序
事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick，为事件指定处理程序的方式有好几种。
HTML事件处理程序
某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码：
<input type="button" value="Press me" οnclick="alert('thanks');" />
这样做有一些缺点，例如耦合度过高，还可能存在时差问题（当用户点击按钮时，处理函数还未加载到，此时处理函数是单独写的一段js代码），而且在不同的浏览器上可能会有不同的效果。
DOM事件处理程序
通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性通常全都小写，例如onclick，然后将这种属性的值设为一个函数，就可以指定事件处理程序了。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM事件处理程序</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
background: gray;
margin-top: 100px;
}
</style>
</head>
<body>
<button id="myBtn">按钮</button>
<span id="user_span"></span>
<div id="dv">我是一个div</div>
<script type="text/javascript">
var btn = document.getElementById('myBtn');
btn.onclick = function() {
alert('you click a button');
}
// onclick：鼠标点击某个对象
function clickFunc() {
alert('点击事件触发的效果');
}
// onmouseover：鼠标移动到某个元素上
function moverFunc() {
document.getElementById('user_span').innerHTML = '鼠标已移动至div';
}
// onmouseout：鼠标从某个元素上离开
function moutFunc() {
document.getElementById('user_span').innerHTML = '';
}
// DOM方式处理 解耦
var dv = document.getElementById('dv');
dv.onclick = clickFunc;
dv.onmouseover = moverFunc;
dv.onmouseout = moutFunc;
</script>
</body>
</html>
也可以通过DOM删除指定的事件处理程序，只要将属性值设为null即可：
btn.onclick = null; dv.onclick = null; dv.onmouseover = null; dv.onmouseout = null;
下一篇是学习JavaScript必然会遇到的DOM，我们不见不散。
扫一扫
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
