JS事件添加的兼容性问题
事件是javascript和HTML交互基础,任何文档或浏览器窗口发生的交互,都要通过绑定事件方法进行交互.
DOM0级,DOM2级,IE事件处理
DOM0级事件
- DOM0级事件是直接为HTML元素添加事件处理属性,例如为input添加点击事件
可以
<input id="b1" type="button" onclick="alert('hello')" value="点击">
或者
<input id="b1" type="button" value="点击">
<script>
document.getElementById("b1").onclick = function() {
alert("hello world");
}
</script>
若想清除事件则设置event为空
!注意:DOM0级事件是可以被覆盖的,因为他被当作一个方法处理,对这个方法的重新赋值是会覆盖的
DOM2级事件
DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。
DOM2级事件处理
<div id="ggpar">
<div id="gpar">
<div id="par">
<input id="b1" type="button" name="in1" value="点击">
</div>
</div>
</div>
<script type="text/javascript">
var b1 = document.getElementById('b1');
var par = document.getElementById('par');
var gpar = document.getElementById('gpar');
var ggpar = document.getElementById('ggpar');
ggpar.addEventListener("click",function(event) {
alert("ggdiv");
},false)
gpar.addEventListener("click",function(event) {
alert("gdiv");
},true)
par.addEventListener("click",function(event) {
alert("div");
},false)
b1.addEventListener("click",function(event) {
alert("input");
},true)
</script>
<div id="ggpar">
<div id="gpar">
<div id="par">
<input id="b1" type="button" name="in1" value="点击">
</div>
</div>
</div>
<script type="text/javascript">
var b1 = document.getElementById('b1');
var par = document.getElementById('par');
var gpar = document.getElementById('gpar');
var ggpar = document.getElementById('ggpar');
ggpar.addEventListener("click",function(event) {
alert("ggdiv");
},true)
gpar.addEventListener("click",function(event) {
alert("gdiv");
},false)
par.addEventListener("click",function(event) {
alert("div");
},true)
b1.addEventListener("click",function(event) {
alert("input");
},false)
</script>
DOM2级事件的注册监听函数有三个参数,第一个为string类型的参数代表监听的事件类型(没有on前缀),第二个function类型表示事件触发执行的函数,第三个boolean类型的参数useCapture表示是否采用捕获方式(从外层元素向内层元素传递,捕获方式刚好相反)传递事件,默认为false,事件句柄在冒泡阶段执行.
由上述例子及对这例子的一些改动可知,事件监听机制会对所有注册事件执行两次轮询,第一次由外向内,第二次由内向外,第一次轮询(捕获阶段)依次触发第三个参数useCapture为true的事件,第二次轮询(冒泡阶段)依次触发第三个参数为false的事件
DOM2级事件的监听注销函数
obj.removeEventListener(eventName,functionName,useCapture)
!注意第三个参数的意思:事件可以分别注册捕获阶段和冒泡阶段,并且二者互不干扰(因为轮询两次)
DOM2级事件中的event对象
<div>
<input id="b1" type="button" name="in1" value="点击">
<a id="b2" href="http://www.baidu.com">百度一下</a>
<div>
<script type="text/javascript">
var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');
b2.addEventListener("click",function(event) {
// 阻止该元素在浏览器默认行为,例如a链接跳转,submit表单提交
event.preventDefault();
this.style.color = "red";
})
b1.addEventListener("click",function(event) {
// 发生事件类型
console.log(event.type);
// 发生事件的节点
console.log(event.target);
// 正在处理事件的节点
console.log(event.currentTarget);
// 阻止事件传递(捕获和冒泡)
// event.stopPropagation();
// 相对于浏览器窗口的x,y坐标
console.log(event.clientX);
console.log(event.clientY);
// 相对于屏幕的x,y坐标
console.log(event.screenX);
console.log(event.screenY);
},true)
</script>
IE事件
事件处理
<input id="b1" type="button" value="点击">
<script>
var b1 = document.getElementById("b1");
var func = function() {
alert("IE");
}
// 注意此处有"on"前缀
b1.attachEvent("onclick",func);
// 删除事件
// b1.detachEvent("onclick",func);
</script>
IE事件模型没有capturing阶段所以调用attachEvent相当于调用addEvetnListener且第三个参数为false
IE中的Event对象
Event对象不是传递给事件监听函数,而是通过window对象的event属性访问Event对象.
IE Event对象常用属性
type:兼容DOM的type属性
srcElement:
兼容DOM的target属性
clientX, clientY:兼容DOM的clientX, clientY属性
cancelBubble:
布尔值,设为true同调用stopPropagation()
returnValue:
布尔值,设为false同调用preventDefault()
简单的事件兼容性编程:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的通用事件侦听函数</title>
</head>
<script type="text/javascript">
window.onload = function() {
var test1 = function() {
console.log("test1");
}
var test2 = function() {
console.log("test2");
}
var addEvent = function(elem,event,fn) {
if(elem.addEventListener) {
elem.addEventListener(event,fn);
} else if(elem.attachEvent) {
elem.attachEvent('on' + e,fn);
} else {
elem["on" + event] = fn;
}
}
var removeEvent = function(elem,event,fn) {
if(elem.addEventListener) {
elem.removeEventListener(event,fn);
} else if(elem.detachEvent) {
elem.detachEvent("on" + event,fn);
} else {
elem["on" + event] = null;
}
}
var fn1 = function() {
console.log("hello");
}
var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');
b1.style.cssText = "width: 100px;height: 100px;background-color: aqua";
b2.style.cssText = "width: 100px;height: 100px;background-color: orange";
addEvent(b1,"click",fn1);
addEvent(b2,"click",fn1);
// 移除b2事件,但b1添加的事件未被移除
removeEvent(b2,"click",fn1);
}
</script>
<body>
<div id="b1">
</div>
<div id="b2">
</div>
</body>
</html>