网页设计实战之JavaScript(9) -- 事件
1、事件的概念：
JavaScript可以让用户与页面交互，创建动态页面，网页中的每一个元素都可以产生触发某些事件，让系统调用用户定义JavaScript函数。事件就是可以被JavaScript侦测到的一种行为或动作。
2、事件流：
事件流是事件产生时，系统在分析处理事件时调用哪一级元素的响应函数的流程。
事件流分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。
3、使用返回值改变HTML元素的默认行为：
HTML元素都有其自己的默认行为，例如：超链接、提交按钮等。通过在绑定事件中加上"return false"来阻止它的默认行为。
4、事件监听方法：
（1）、绑定HTML元素属性a：
<scrpit>
fucntion check(el)
{
alert("click me");
}
</script>
<div id="aa" value="clickMe" onclick="check(this)">test click</div>
特点：
在HTML中指定事件处理程序时，存在一定的时差，用户可能在页面一出现就触发相应的事件，但是事件处理程序尚不具备执行的条件，容易出错。
事件处理程序的作用域链在不同的浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异，很可能在访问非限定对象时出错。
HTML与JavaScript代码的紧密耦合。如果要更换事件处理程序就需要改动两个地方：JavaScript和HTML。
（2）、绑定HTML元素属性b：
把处理事件函数，写HMTL里面。
<div id="test" onclick = "this.innerHTML+= 'test';"></div>
特点：
只能写一些简单的处理。
（3）DOM0级事件处理程序(绑定DOM对象属性)：
- 绑定：
document.getElementById(“xxx”).οnclick=事件函数; - 解绑定:
document.getElementById(“xxx”).οnclick=null;
<script>
var btn = document.getElementById('button1');
btn.onclick = function () {
alert('Clicked');
}
</script>
<button id="button1" value="test" > </button>
特点：
DOM0级事件解决了html和js代码强耦合的问题。可以动态绑定事件。
（4）DOM2级事件处理程序：
DOM2级事件处理程序定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener和removeEventListener。所有DOM节点都包含这两个方法，并且他们接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值如果为true，表示在捕获阶段执行事件处理程序，如果为false，表示在冒泡阶段调用事件处理程序。
<div id="aa" style="width: 100px;">2222</div>
<script>
var onclick=function(e){
alert('click');
}
var a=document.getElementById("button1");
// 绑定
a.addEventListener("click",onclick,false);
// 解绑定
a.removeEventListener("click",onclick,false);
</script>
<button id="button1" value="test" > </button>
（5）IE8中的DOM2级事件处理程序：
<div id="aa" style="width: 100px;">2222</div>
<script>
var onclick=function(e){
alert('click');
}
var a=document.getElementById("button1");
// 绑定
a.attachEvent("onclick",onclick);
// 解绑定
a.detachEvent("click",onclick);
</script>
<button id="button1" value="test" > </button>
5、标准事件流：
(1) 、冒泡事件（从内至外）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标准事件流(冒泡事件)</title>
<script type="text/javascript">
function show(sText){
var oDiv=document.getElementById("display");
oDiv.innerHTML+=sText;
}
</script>
</head>
<body onclick="show('body
')">
<div onclick="show('div
')">
<p onclick="show('p
')">click me</p>
</div>
<div id="display"></div>
</body>
</html>
点击后的运行结果：
p
div
body
(2)、 冒泡事件和捕获事件的比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标准事件流(捕获事件和冒泡事件)</title>
<!--IE不支持-->
<script type="text/javascript">
function show(sText){
var oDiv=document.getElementById("display");
oDiv.innerHTML+=sText;
}
window.onload=function(){//捕获事件，即由外到内
var myBody=document.getElementById("myBody");
var myDiv=document.getElementById("myDiv");
var myP=document.getElementById("myP");
myBody.addEventListener("click", function(){show('body
');}, true);//若为false则是冒泡事件
myDiv.addEventListener("click", function(){show('div
');}, true);
myP.addEventListener("click", function(){show('p
');}, true);
}
</script>
</head>
<body id="myBody">
<div id="myDiv">
<p id="myP">click me</p>
</div>
<div id="display"></div>
</body>
</html>
修改addEventListener函数的第三个参数，true 和false， 可以看到冒泡事件和捕获事件的区别。
6、在事件函数中访问事件对象：
事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。
IE中的事件对象是一个隐式可用的全局对象：event，它是window对象的一个属性。
//IE中得到事件对象
op.οnclick=function(){
var oEvent=window.event;
}
在标准DOM浏览器检测发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入。
//标准DOM中得到事件对象
op.οnclick=function(oEvent){
//作为参数传进来
}
7、常用的事件：
| 事件 | 描述 |
|---|---|
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
| onunload | 用户退出页面 |