事件的绑定和解绑
//绑定事件
document.onclick=function () {
alert(1);
}
//解除事件
document.onclick=null;
这是最常用的为对象绑定事件的方法。但是只能给一个对象绑定一个相同时间，想绑定第二个会覆盖。在Js中提供了一些方法让我们可以给一个对象进行多次绑定。
/**obj. addEventListener("click",fun(){},false)
* 添加事件
* 不兼容IE678;
* 事件名称不带on
* 第二个是事件函数
* 事件捕获。默认false
*obj.removeEventListener("click",fn2)；
* 事件解绑
*/
document.addEventListener("click",fn1);
document.addEventListener("click",fn2);
document.removeEventListener("click",fn2);
// 解绑前，弹出1，弹出2；
//解绑后，弹出1。
function fn1() {
alert(1)
}
function fn2() {
alert(2)
}
/*obj.attachEvent("onclick",fun{})
* 兼容IE678
* 只接收俩参数
* 第一个是事件名称，是带on的事件名字
* 第二个是事件函数。
*
*obj.detachEvent("onclick",fn)
* 事件解绑
* fn可以使匿名函数，但需和绑定的匿名函数完全一致，包括空格
*
**/
document.attachEvent("onclick",function () {
alert(1)
});
document.attachEvent("onclick",fn);
document.detachEvent("onclick",fn);
//解绑前，弹出2，弹出1
//解绑后，弹出1
function fn() {
alert(2)
}
我们可以发现attachEvent方法和addEventListener的执行顺序是相反的。
下面提供一种兼容写法，仅供参考
//添加事件
function addEvent(obj,eName,eFn) {
if(obj.attachEvent){ //判断支不支持attacgevent方法，如果支持就是ie678
obj.attachEvent("on"+eName,eFn) //兼容IE678
}else{
obj.addEventListener(eName,eFn)//兼容标准浏览器
}
}
//移除事件
function removeEvent(obj,eName,eFn) {
if(obj.attachEvent){ //判断支不支持attacgevent方法，如果支持就是ie678
obj.detachEvent("on"+eName,eFn) //兼容IE678
}else{
obj.removeEventListener(eName,eFn)//兼容标准浏览器
}
}
但是这并不能解决执行顺序不同的问题，不过在使用中影响不大。
事件捕获
在上面我们提到addEventListener方法的第三个参数为事件捕获，默认为false。现在我们来了解一下事件捕获。
<div id="box1">1
<div id="box2">2
<div>
<div id="box3">3</div>
</div>
</div>
</div>
<script>
/*
* 事件捕获
* 事件在传递的时候会有一个触发的顺序
* false:从里到外，true：从外到内
* 同时属性为true的事件会先于false执行
* 只有在标准浏览器下才有这个概念
*
* */
box1.addEventListener("click",fn1，false)
box2.addEventListener("click",fn2，false)
box3.addEventListener("click",fn3，false)
function fn1() {
console.log(1)
}
function fn2() {
console.log(2)
}
function fn3() {
console.log(3)
}
//点击box3
// 3 2 1
// 若都设置为true 1 2 3
</script>
事件冒泡
我们在讲事件捕获的时候可以发现一件很有趣事情就是，我只是点击了最里面的盒子，但是包裹该盒子的大盒子的事件也被触发了，这就是事件冒泡了。
那这是为什么呢？仔细想想不难发现，虽然我们点击的是一个小盒子。但是因为小盒子在大盒子内，点击小盒子的同时，我们也点击了大盒子。所以会触发大盒子的事件。
但是很多时候我们并不希望如此，所以我们有必要来清除事件冒泡。
<div id="box1">1
<div id="box2">2
<div>
<div id="box3">3</div>
</div>
</div>
</div>
<script>
/*
* 事件冒泡
* 事件会从自己身上往上传递
*
* 阻止冒泡
* e.cancelBubble = true；
* 事件源
*
* */
box1.onclick=function (e) {
e=e||window.event;
e.cancelBubble = true;
console.log(1)
}
box2.onclick=function (e) {
e=e||window.event;
e.cancelBubble = true;
console.log(1)
}
box3.onclick=function (e) {
e=e||window.event;
e.cancelBubble = true;
console.log(3)
}
//点击box3 3
//点击box2 2
//点击box1 1
</script>
清除默认事件
js中带有一些默认事件。例如我们对文本进行操作时，默认存在选中事件。在必要的时候我们可以去掉我们不想要的默认事件。
/*
* e.preventDefault()
* 清除默认事件
* 不兼容IE678
* e.returnValue=false;
* 只支持IE678
* return false
* 也可以清除默认事件
* obj.事件=function (e) {
* e = e||window.event;
* e.returnValue = false;
* //e.preventDefault();
* //return false;
* }
* //根据实际情况选择
* */
网友评论