事件冒泡 : 当一个元素接收到事件的时候,会把它接收到的所有传播给它的父级。一直到顶层window。这种现象称之为事件冒泡机制。出去的事件触发。
阻止冒泡 : 当前要阻止冒泡的事件函数中,调用 event.cancelBubble = true;
事件捕获 : ie下是没有的,在绑定事件中,标准下是有的。进来的事件触发。
 
给对象绑定函数的形式
1.给一个对象绑定一个事件处理函数:
obj.onclick = fn;
 

2.给一个对象的同一个事件绑定多个不同的函数:

ie : obj.attachEvent(事件名称,事件函数)
1.没有捕获
2.事件名称有on
3.事件函数执行的顺序 :标准ie --> 正序,非标准ie ---> 倒序
4.this 指向 window
 
标准 : obj.addEventListener(事件名称,事件函数,是否捕获)
1.有捕获
2.事件名称没有on
3.事件函数执行的顺序 :正序
4.this 指向触发该事件的对象
 
取消事件绑定:
第一种事件绑定形式的取消:
obj.onclick = null;
第二种:
ie : obj.detachEvent(事件名称,事件函数)
标准 : obj.removeEventListener(事件名称,事件函数,是否捕获)
 
是否捕获:默认是false     false : 冒泡     true : 捕获
 
call 函数下的一个方法,call方法的第一个参数可以改变函数执行过程中的内部this的指向。
call 方法的第二个参数开始就是原来函数的参数列表。
 
 
 
 
事件捕获示例代码:
 <!DOCTYPE html>
<html lang="en">
<head>
<title>事件捕获</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function(){
function fn1(){
alert(this);
alert(1);
}
function fn2(){
alert(this);
alert(2);
}
/*
document.onclick = fn1;
document.onclick = fn2; //后面的覆盖前面的
*/ //ie写法
//document.attachEvent('onclick',fn1);
//document.attachEvent('onclick',fn2); //标准写法
//document.addEventListener('click',fn1,false);
//document.addEventListener('click',fn2,false); //兼容写法
function bind(obj, evname, fn){
if(obj.addEventListener){
obj.addEventListener(evname, fn, false);
}else{
obj.attachEvent('on' + evname, function(){
fn.call(obj);
});
}
}
bind(document,'click',fn1);
bind(document,'click',fn2);
} </script>
</head>
<body>
<div> </div>
</body>
</html>

call示例代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>call</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function(){
function fn1(){
alert(this);
} function fn2(a,b){
alert(this);
alert(a+b);
} //fn1(); //window
//fn1.call(); //弹出window,此时就等同于fn1()
//fn1.call(1); //弹出1,call的第一个参数为this的指向
//fn2.call(1,4,10); //依次弹出1,14,如果函数有参数时,则第一个为this的指向,后面为函数带的参数
fn2.call(null,4,10); //依次弹出window,14,第一个参数为null表示不改变this指向。
} </script>
</head>
<body>
<div> </div>
</body>
</html>
05-28 10:49