事件

最新推荐文章于 2025-02-26 15:05:44 发布

转载最新推荐文章于 2025-02-26 15:05:44 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhswater/p/11167368.html

一题目：

1.编写一个通用的事件监听函数

解答：请往下继续看

2.描述事件冒泡流程

a:dom树形结构网上冒

b:一层一层的触发事件

c:阻止冒泡

3.对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

解答：使用代理。代理的优点：1.代码简洁。2.减少浏览器内存占用

二知识点：

1.通用事件绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10 <div>
11     <input type="button" value="点击" id="btn1">
12     <div id="div1"></div>
13     <input type="button" value="点击" id="btn2">
14     <div id="div2"></div>
15     <a href="https://www.baidu.com/" id="link1">我是超链接</a>
16 </div>
17 </body>
18 <script>
19 var btn1 = document.getElementById('btn1')
20 var div1 = document.getElementById('div1')
21 btn1.addEventListener('click', function(event){
22     div1.innerHTML='按钮点击了'
23 })
24 
25 function bindEvent(elem, type ,fn){
26     elem.addEventListener(type,fn)
27 }
28 var btn2 = document.getElementById('btn2')
29 var div2 = document.getElementById('div2')
30 
31 bindEvent(btn2,'click',function(){
32     div2.innerHTML='按钮2点击了'
33 })
34 
35 var link1 = document.getElementById('link1')
36 bindEvent(link1,'click',function(e){
37     e.preventDefault();  // 阻止默认行为
38     console.log(112233)
39 })
40 
41 </script>
42 </html>

----注意注意注意

完善通用事件绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10 <div id="div1">
11     <p id="p1">激活</p>
12     <p id="p2">取消1</p>
13     <p id="p3">取消2</p>
14     <p id="p4">取消3</p>
15 </div>
16 <p id="p5">取消4</p>
17 </body>
18 <script>
19 var div1 = document.getElementById('div1')
20 var p5 = document.getElementById('p5')
21 
22 function bindEvent(elem, type, selector ,fn){
23     if(fn==null){
24         fn = selector
25         selector = null
26     }
27     elem.addEventListener(type,function(e){
28         var target
29         if(selector){
30             // 代理
31             target = e.target
32             if(target.matches(selector)){
33                 fn.call(target,e)
34             }
35         }
36         else{
37             // 不是代理
38             fn(e)
39         }
40     })
41 }
42 
43 bindEvent(p5,'click',function(e){
44 console.log(p5.innerHTML)
45 })
46 
47 </script>
48 </html>

2.事件冒泡

 1 1 <!DOCTYPE html>
 2  2 <html lang="en">
 3  3 <head>
 4  4     <meta charset="UTF-8">
 5  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7  7     <title>Document</title>
 8  8 </head>
 9  9 <body>
10 10 <div id="div1">
11 11     <p id="p1">激活</p>
12 12     <p id="p2">取消</p>
13 13     <p id="p3">取消</p>
14 14     <p id="p4">取消</p>
15 15 </div>
16 16 <div id="div2">
17 17     <p id="p5">取消</p>
18 18     <p id="p6">取消</p>
19 19 </div>
20 20 </body>
21 21 <script>
22 22 var p1 = document.getElementById('p1')
23 23 var body = document.body
24 24 
25 25 function bindEvent(elem, type ,fn){
26 26     elem.addEventListener(type,fn)
27 27 }
28 28 
29 29 bindEvent(p1,'click',function(e){
30 30     e.stopPropagation();  // 阻止冒泡行为
31 31     console.log('激活')
32 32 })
33 33 
34 34 bindEvent(body,'click',function(e){
35 35     console.log('取消')
36 36 })
37 37 </script>
38 38 </html>

3.代理

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10 <div id="div1">
11     <p id="p1">激活</p>
12     <p id="p2">取消1</p>
13     <p id="p3">取消2</p>
14     <p id="p4">取消3</p>
15 </div>
16 </body>
17 <script>
18 var div1 = document.getElementById('div1')
19 
20 function bindEvent(elem, type ,fn){
21     elem.addEventListener(type,fn)
22 }
23 
24 bindEvent(div1,'click',function(e){
25     console.log(e.target)
26     console.log(e.target.innerHTML)
27 })
28 
  29 </script>
30 </html>

转载于:https://www.cnblogs.com/zhswater/p/11167368.html