JS事件，绑定事件，处理事件（7.20）
JavaScript事件处理：
过程：浏览器捕捉用户动作、浏览器调用事件处理函数、JavaScript事件处理函数、浏览器将结果呈现给用户
一、JavaScript绑定事件的3种方法
1.直接绑定
2.在JavaScript代码中绑定
3.绑定事件监听函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绑定事件方法</title>
</head>
<script type="text/javascript">
window.onload=function(){
//我也是直接绑定的
function fun2(){
alert("我也是直接绑定的");
}
//我是在js代码中绑定的
document.getElementById('btn3').onclick=function(){
alert("我是在js代码中绑定的")
}
/* 未完成通过事件监听函数addEventListenr()函数绑定通过事件监听函数attachEvent()函数绑定
但要注意浏览器兼容问题*/
</script>
<body>
<button type="button" id="btn1" onclick="alert('我是直接绑定的')">直接绑定1</button>
<button type="button" id="btn2" onclick="fun2()">直接绑定2</button>
<button type="button" id="btn3">在JavaScript代码中绑定</button>
<button type="button" id="btn4">绑定事件监听函数</button>
</body>
</html>
(1)elementObject.addEventListener(event,functionName,useCapture)
| elementObject | DOM元素 |
| event | 事件，但不加on，如click，mouseover,mouseout |
| functionName | 函数名，不加“()” |
| useCapture | 是否使用捕获true/false,一般用false，true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。 |
(2)elementObject.attachEvent(event,functionName)
| elementObject | DOM元素 |
| event | 事件，要加on，如onclick，onmouseover,onmouseout |
| functionName | 函数名，不加“()” |
浏览器兼容：
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。
其中在【在JavaScript代码中绑定】
document.getElementById('btn3').onclick=function(){
alert("我是在js代码中绑定的")
}
时出现了问题：bangdingshijianfangf.html:8 Uncaught TypeError: Cannot set property 'onclick' of null
原因：因为我的JS文件引入的顺序比标签加载的早
解决方法：
1. 因为我的JS文件引入的顺序比标签加载的早，so,把js文件的引入放到了body下就可以解决
2.添加window.onload=function(){}这样页面加载完触发事件
event对象
表示当前事件，他的属性和方法表示事件当前状态、
event的获取
在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性。为了达到浏览器兼容的经典写法：
elementObject.OnXXX=function(e){
var eve = e || window.event; // 使用 || 运算取得event对象
}
事件流：表示的是从页面中接受事件的顺序（IE8及以下不支持DOM事件流）
IE的事件流叫做事件冒泡，从嵌套最深的节点想外传播
netscape communicator的时间流叫做事件捕获，和事件冒泡相反，最外层的节点先接受到事件，最具体的节点最后接受。
事件处理程序/事件侦听器：处理事件的函数
分为HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序
HTML事件处理程序
<button type="button" id="btn1" onclick="alert('我是直接绑定的')">直接绑定1</button>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绑定事件方法</title>
</head>
<script type="text/javascript">
function fun2(){
alert("我也是直接绑定的");
}
</script>
<body>
<button type="button" id="btn2" onclick="fun2()">直接绑定2</button>
</body>
</html>
有以下问题：
1.点击button没有任何反应，因为js引入前页面还未解析完。
2.因为html和js存在耦合，所以在后期修改时很麻烦。
3.会出现一个问题,存在一个时间差，当用户在html元素一出现在页面上就去触发相应的事件时，事件的处理程序可能还不具备执行条件（比如说调用的函数还木有被解析），就会引发错误.
DOM0级事件处理程序
var btn=document.getElementById('btn3'); btn.onclick=function(){ alert("我是在js代码中绑定的") }
出现的问题上面说过
DOM2级事件处理程序
定义了两个方法addEventListener()和removeEventListener(),可以添加两个事件处理程序
//过事件监听函数addEventListenr()函数绑定 var mn=document.getElementById('btn4'); mn.addEventListener("click",function(){ alert("aaaaaaa"); },false);
mn.removeEventListener("click",function(){
alert("aaaaaaa");
},false);//注：这样是无效的！
//以下可以成功移除
var mn=document.getElementById('btn4');
function fun4(){
alert("快点成功移除我！")
}
mn.addEventListener("click",fun4,false);
var mn=document.getElementById('btn4');
mn.removeEventListener("click",fun4,false);
IE事件处理程序
由于IE8及更低版本只支持事件冒泡，所以通过attachEvent添加的事件处理程序都会被添加到冒泡阶段
问题，chrome出错：27 Uncaught TypeError: bd.attachEvent is not a function
源码：
var bd=document.getElementById('btn5'); bd.attachEvent("onclick",function(){ alert("bbbbb"); });
