内容提纲
- 事件概念
- 事件机制
- 事件处理
- 案例练习
事件概念
事件种类
事件流
- 思考
- 如果某个元素、它的父元素、祖先元素同时绑定了单击事件，那么执行顺序如何？
- 页面中接受事件的顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="myDiv">ClickMe</div>
</body>
</html>
事件流
- 事件冒泡
- 事件捕获
- DOM事件流
事件冒泡
- IE的事件流叫做事件冒泡
- 事件从最具体的元素开始，逐级向上，最后到达文档(从小到大)
事件捕获
- netscape提出并支持的事件处理方式
- 事件从抽象元素开始，逐级具体，最后最具体元素(从大到小)
DOM事件流
- DOM级事件流包含三个阶段
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
事件流测试
事件流测试
事件处理
- HTML事件处理
- DOM0级事件处理
- DOM2级事件处理
- IE事件处理
- 跨浏览器事件处理程序
HTML事件处理
- HTML标签的事件属性调用
- JS里面声明函数
<a href="#baidu" value="这个是链接，你感觉如何" onclick="go();">HTML事件处理程序</a>
<script type="text/javascript">
function go () {
document.write("go");
alert(event.type);
//ie浏览器没有event.target
alert(event.target.getAttribute("value"));
alert(this);
}
</script>
DOM0级事件处理
<a id="link" href="#baidu" value="这个是链接，你感觉如何">DOM0级事件处理程序</a>
<script type="text/javascript">
var oLink=document.getElementById("link");
oLink.onclick=function(){
document.write("go");
alert(event.type);
alert(event.target.getAttribute("value"));
alert(this);
alert(this.getAttribute("value"));
}
//删除事件处理
oLink.onclick=null;
</script>
DOM2级事件处理
<a id="link" href="#baidu" value="这个是链接，你感觉如何">DOM2级事件处理程序</a>
<script type="text/javascript">
var oLink=document.getElementById("link");
oLink.addEventListener("click",clickHandler,true);
function clickHandler(){
document.write("go");
alert(event.type);
alert(event.target.getAttribute("value"));
alert(this);
alert(this.getAttribute("value"));
}
//删除事件处理
oLink.removeEventListener("click",clickHandler,true);
//IE9、chrom、firefox、opera等支持DOM2级
</script>
IE事件处理
<a id="link" href="#baidu" value="这个是链接，你感觉如何">IE事件处理程序</a>
<script type="text/javascript">
var oLink=document.getElementById("link");
oLink.attachEvent("onclick",clickHandler);
function clickHandler () {
document.write("go");
var event = event||window.event;
alert(this);
alert(event.type);
alert(event.srcElement.getAttribute("value"));
//object window
}
//删除事件处理
oLink.detachEvent("onclick",clickHandler);
</script>
跨浏览器事件处理
<a id="link" href="#baidu" value="这个是链接，你感觉如何">跨浏览器</a>
<script type="text/javascript">
var oLink=document.getElementById("link");
if (oLink.addEventListener) {
oLink.addEventListener("click",clickHandler,false);
} else if(oLink.attachEvent){
oLink.attachEvent("onclick",clickHandler);
}else{
oLink["onclick"]=clickHandler;
}
function clickHandler() {
document.write("go");
alert(event.type);
}
</script>
跨浏览器事件处理
<a id="link" href="#baidu" value="这个是链接，你感觉如何">跨浏览器</a>
<script type="text/javascript">
var oLink=document.getElementById("link");
if (oLink.addEventListener) {
oLink.addEventListener("click",clickHandler,false);
} else if(oLink.attachEvent){
oLink.attachEvent("onclick",clickHandler);
}else{
oLink["onclick"]=clickHandler;
}
function clickHandler() {
document.write("go");
alert(event.type);
}
</script>
跨浏览器事件处理-shim
定义个EventUtil对象
<a id="link" href="#baidu" value="这个是链接，你感觉如何">跨浏览器</a>
<script type="text/javascript">
var oLink=document.getElementById("link");
var EventUtil={
addHandler:function(element,type,handler){
if (element.addEventListener) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
} else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
};
function clickHandler() {
var event = event||window.event;
var ele = event.srcElement || event.target;
document.write("go");
alert(event.type);
alert(ele);
}
EventUtil.addHandler(oLink,"click",clickHandler);
//删除事件
//EventUtil.removeHandler(oLink,"click",clickHandler);
</script>