本章学习目标：
不同的浏览器有不同实现事件流的方法。
一、取得id = div1的元素节点。
var div1 = document.getElementById("div1");
//设置元素节点的onclick属性
div1.onclick = function(){alert("div1 被点了");}
或
function divClick(){alert(‘点中’);}
div1.onclick=divClick;
注意：
1、绑定事件处理程序时，后面不能加括号
2.必须确保在元素之后设置事件处理程序。
3.可在window.onload中指定处理程序。
二、在事件属性中指定
<div id="div1" onclick="alert("div1 被点了.");" ></div>
一、IE浏览器
var div1 = document.getElementById("div1");
//添加事件处理程序
div1.attachEvent("onclick",click1);//("事件处理程序的名称",函数)
//删除事件处理程序
div1.detachEvent("onclick",click1);
function click1(){
alert("div1 is click...");
}
提示：可以在一个事件上添加多个事件处理函数。
二、DOM
var div1 = document.getElementById("div1");
//添加事件处理程序,true:捕获阶段; false:冒泡阶段
div1.addEventListener("click",click1,false);//("事件名称",函数,冒泡或捕获阶段)
//删除事件处理程序
div1.removeEventListener("click",click1,false);
function click1(){
alert("div1 is click...");
}
提示：删除事件处理程序时，阶段要相同。
传统事件处理程序是在冒泡阶段添加的。
兼容性问题的解决
function myaddEvent(obj,event,fn){//对象 ,事件,函数,
if(document.all){
obj.attachEvent('on'+event,fn);
}else{
obj.addEventListener(event,fn);//第三个参数默认为false（冒泡）
}
}
表单验证例子...
超链接例子。
<a href="a.html" onclick="return confirm('要跳转吗？')">a.html</a>
注意：是根据返回结果是true或false来确定是否执行默认行为。
IE 得到事件对象；
div1.onclick = function(){
var e = window.event;
}
DOM得到事件对象
div1.onclick = function(ev){
var e = ev;
}
兼容性问题：
div1.onclick = function(ev){
var e = windo.event||ev;
}
event属性和方法
IE DOM
| 获取事件源 |
e.srcElement |
e.target |
| 获取字符码 |
e.keyCode |
e.charCode |
| 阻止默认行为 |
e.returnValue=false |
e.preventDefault() |
| 中止冒泡传播 |
e.cancelBubble=true |
e.stopPropagation() |
div1.onclick = function(e){
var ev = window.event||e;//获取事件对象
var srcObj = ev.srcElement||ev.target;
}
