js学习笔记26----事件冒泡,事件捕获
2021-06-17 14:05
标签:add script 代码 pre document alert js学习笔记 现象 doctype 2.给一个对象的同一个事件绑定多个不同的函数: call示例代码: js学习笔记26----事件冒泡,事件捕获 标签:add script 代码 pre document alert js学习笔记 现象 doctype 原文地址:http://www.cnblogs.com/sese/p/7266010.html 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>
1 DOCTYPE html>
2 html lang="en">
3 head>
4 title>calltitle>
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>