<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件监听</title>
</head>
<body>
<!-- 结构 -->
<p onclick="alert(this.innerHTML)">DOM0</p>
<p id="dom1">DOM1</p>
<p id="page">DOM2</p>
</body>
<script>
// 获取元素
var dom1=document.getElementById('dom1');
// DOM1级事件的添加方法
dom1.onclick=function(){
alert(this.id);//dom1
}
/*
事件绑定的三种对象
1.DOM事件，将事件添加到DOM元素对象上
2.window事件，将事件添加到window对象上
3.其他事件，将事件添加到ajax中的事件
添加事件的三种方式
1.DOM0级事件，在标签元素上直接添加事件
2.DOM1级事件，为某个元素对象添加事件
3.DOM2级事件，为某个元素对象添加事件
参数1：事件名称，例如click，mouseover
参数2：事件的方法，例如匿名函数/有名函数
参数3：事件流，有两个值，分别是true和false，
*/
var page=document.getElementById('page');
// DOM2级事件，IE9以下版本不支持
// 添加事件监听者 注意:第一个一定是字符串而且没有on
// page.addEventListener("click",function(){
// alert(this.innerHTML);
// },false);
// page.addEventListener("click",function(){
// this.innerHTML="DOM4";
// },false);
// //移出事件监听者 注意:事件不会被移出，因为参数2不一致
// page.removeEventListener("click",function(){
// // 匿名函数虽然长的一样，但本质上是有区别的，所以不能这样移出
// alert(this.id);
// },false);
// 绑定有名函数事件
// var handler=function(){
// alert(this.id);
// }
// DOM1&DOM2的区别 前者只能添加一个方法，而后者可以添加多个
// var handler2=function(){
// alert(this.innerHTML);
// }
// 添加事件
// page.addEventListener("click",handler,false);
// page.addEventListener("mouseover",handler2,false);
// 移出事件
// page.removeEventListener("click",handler,false);
// page.removeEventListener("mouseover",handler2,false);
/*
DOM2级事件方法：可以为某个对象添加不同的事件名称以及不同的方法
*/
/*
事件流===>事件冒泡/事件捕获
1.IE认为事件触发是由最具体的元素，逐层向外到不具体元素，则称为事件冒泡
2.Netscape网景认为事件触发是由最外层(最不具体的元素)逐层向内层最具体的元素，则称为事件捕获
true代表事件捕获
false代表事件冒泡
为了最大限度的兼容各大浏览器，多数情况下使用的都是事件冒泡
非特殊情况，不建议使用事件捕获，所以监听者的第三个参数始终是false。
*/
// IE事件添加 有两个参数 事件名称(有 on)和事件方法
// page.attachEvent("onclick",function(){
// alert(this.innerHTML);
// });
// // IE事件移出
// apge.detachEvent("onclick",function(){
// alert(this.id);
// });
/*
注意:在IE中使用attachEvent(),事件处理会在全局作用域中执行,所以this将会指向window.
IE中事件的执行顺序,在正常浏览器中的执行顺序是先添加先执行,IE则是相反.
IE移出事件和标准浏览器的移出方式一样方法不一样
IE移出事件使用datachEvent();参数要和添加的参数一致;
*/
// 跨浏览器事件的处理方法(兼容写法)
var eventUtil={
addHandler:function(element,type,handler){
// 判断监听方法
if (element.addEventListener) {
// 标准浏览器
element.addEventListener(type,handler,false);
}else if (element.attachEvent) {
// IE浏览器
element.attachEvent("on"+type,handler);
}else{
// 其他情况
element["on"+type]=handler;
}
},
removeHandler=function(element,type,handler){
if (element.removeEventListenere) {
// 标准浏览器
element.removeEventListener(type,handler,false);
}else if (element.detachEvent) {
// IE浏览器
element.detachEvent("on"+type,handler);
}else{
// 其他情况
element["on"+type]=null;
}
}
};
var handler=function(){
alert(this.innerHTML);
}
// 添加事件
eventUtil.addHandler(page,"click",handler);
eventUtil.removeHandler(page,"click",handler);
</script>
</html>
网友评论