事件冒泡 ： 当一个元素接收到事件的时候，会把它接收到的所有传播给它的父级。一直到顶层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 指向触发该事件的对象
是否捕获：默认是false false ： 冒泡 true ： 捕获
call 函数下的一个方法，call方法的第一个参数可以改变函数执行过程中的内部this的指向。
call 方法的第二个参数开始就是原来函数的参数列表。
事件捕获示例代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>事件捕获</title>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <script>
8 window.onload = function(){
9 function fn1(){
10 alert(this);
11 alert(1);
12 }
13 function fn2(){
14 alert(this);
15 alert(2);
16 }
17 /*
18 document.onclick = fn1;
19 document.onclick = fn2; //后面的覆盖前面的
20 */
21
22 //ie写法
23 //document.attachEvent(‘onclick‘,‘fn1‘);
24 //document.attachEvent(‘onclick‘,‘fn2‘);
25
26 //标准写法
27 //document.addEventListener(‘click‘,‘fn1‘,false);
28 //document.addEventListener(‘click‘,‘fn2‘,false);
29
30 //兼容写法
31 function bind(obj, evname, fn){
32 if(obj.addEventListener){
33 obj.addEventListener(evname, fn, false);
34 }else{
35 obj.attachEvent(‘on‘ + evname, function(){
36 fn.call(obj);
37 });
38 }
39 }
40 bind(document,‘click‘,fn1);
41 bind(document,‘click‘,fn2);
42 }
43
44 </script>
45 </head>
46 <body>
47 <div>
48
49 </div>
50 </body>
51 </html>
call示例代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>call</title>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <script>
8 window.onload = function(){
9 function fn1(){
10 alert(this);
11 }
12
13 function fn2(a,b){
14 alert(this);
15 alert(a+b);
16 }
17
18 //fn1(); //window
19 //fn1.call(); //弹出window,此时就等同于fn1()
20 //fn1.call(1); //弹出1，call的第一个参数为this的指向
21 //fn2.call(1,4,10); //依次弹出1，14，如果函数有参数时，则第一个为this的指向，后面为函数带的参数
22 fn2.call(null,4,10); //依次弹出window，14，第一个参数为null表示不改变this指向。
23 }
24
25
26 </script>
27 </head>
28 <body>
29 <div>
30
31 </div>
32 </body>
33 </html>
时间： 2024-08-06 16:04:23