js学习笔记26----事件冒泡,事件捕获

2021-06-17 14:05

阅读:555

标签:add   script   代码   pre   document   alert   js学习笔记   现象   doctype   

事件冒泡 : 当一个元素接收到事件的时候,会把它接收到的所有传播给它的父级。一直到顶层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>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>

 

 

js学习笔记26----事件冒泡,事件捕获

标签:add   script   代码   pre   document   alert   js学习笔记   现象   doctype   

原文地址:http://www.cnblogs.com/sese/p/7266010.html


评论


亲,登录后才可以留言!