事件（下）

一，事件冒泡和默认事件

1,事件冒泡：   

事件冒泡是从里往外逐个触发. 事件捕获, 是从外往里逐个触发. 现代的浏览器默认情况下都是事件冒泡的模式.

 1 <body>
 2 
 3     <div>
 4         <button></button>
 5     </div>
 6     
 7     <script>
 8         var box = document.getElementByTagName('div')[0]
 9         var btn = document.getElementByTagName('button')[0]      
10 
11         //在事件冒泡中，里面的按钮被点击后，会触发外面的大盒子；
12         //在触发事件时，会一层一层向上冒泡，就是会触发父类的事件，这就是事件冒泡；以后可能会失效;
13 
14         box.onclick = function(){
15             console.log('大盒子被点击了')
16         }
17 
18         btn.onclick = function(){
19             console.log('按钮被点击了')
20         }
21 
22         
23         //阻止事件冒泡
24            //就是防止组件事件的向上调用
25         btn.onclick = function(e){
26             e = e || window.event
27             if(e.stopPropagation){    //阻止事件向上冒泡，适应 W3C 规则
28                 e.stopPropagation()
29             }else{
30                 //IE 浏览器阻止事件冒泡，它利用了一个属性 cancelBubble 是否为true；
　　　　　　　　　　　　它兼容各种浏览器，但不遵从 W3C 规范；
31                 e.cancelBubble = true;                     
32             }
33         }
34     </script>
35 
36 </body>

 

2,默认行为：

　　　　需要改变的某些元素的默认属性：如  <a>标签会默认跳转；

　　　　阻止默认事件: 

 　　　　3 种方式：一般浏览器； IE浏览器； 低版本浏览器；

 1 <a href='http://www.baidu.com'></a>
 2 
 3 <script>
 4 
 5     //采用 return false 可以阻止默认行为,遵从 W3C 标准但IE 9 以前的不支持
 6 document.getElementByTagName('a')[0].onclick = function(){
 7         return false
 8          //ie  使用：兼容，其他浏览器也能使用
 9         e.preventDefault()
10         
11         //针对低版本浏览器
12         e.returnValue = false
13     }   
14     
15     //常用的 需要阻止的事件
16     //阻止右键菜单
17     //在之前使用event对象的button属性时, 点击鼠标右键会弹出系统菜单,                  
18  //如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单
19 
20        document.oncontextmenu = function(){
21               console.log("右键被按下");
22               return false;
23         }
24 
25 </script>

 

二，关于element元素的offset三族，偏移；

1，offsetParent ；获取偏移的父元素，上级元素谁加了定位就找谁，有奶便是娘；

2，获取自己（元素）的偏移量，基于offsetParent  离左边的距离和离上边的距离；

.offsetLeft;    .offsetTop

 

3，获取自己（元素）的 宽 和 高

.offsetWidth;    .offsetHeight

 

三，拖拽

　　拖拽: 就是按住元素后移动位置, 最后松开的过程

 1 <body>
 2     <div id="big">
 3         <div id="box"></div>
 4     </div>
 5 
 6     <script>
 7         var box = document.getElementById('box')
 8         var big = document.getElementById('big')
 9 
10         box.onmousedown = function(){
11             box.onmousemove = function(e){
12                 e = e   || window.event
13 
14                 //获取页面上鼠标的 x，y的坐标
15                 var pagx = e.pageX
16                 var pagy = e.pageY
17 
18                 //获取当前元素的宽，高;  除以2是要把它只有获取中心点
19                 var h = box.offsetHeight/2
20                 var w = box.offsetWidth/2
21 
22                 //当存在父盒子时
23                 //要先获取父盒子跟 body 的偏移量
24                 var bigx = big.offsetLeft
25                 var bigy = big.offsetTop
26 
27                 //设置定位值
28                 box.style.left = pagx - bigx - w + 'px' 
29                 box.style.top = pagy - bigy - h + 'px'
30               
31                 //如果需要限制 box 的移动范围，需要设置区间
32                 //先获取 box 的偏移量
33                 var boxx = box.offsetLeft
34                 var boxy = box.offsetTop
35 
36                 //让 box 的偏移量始终在一个区间才能给值
37                 if(boxx > big.offsetWidth-w*2){
38                     this.style.left = big.offsetWidth-w*2 + 'px'
39                }
40                 if(boxx < 0){
41                     this.style.left = '0px'
42                 }
43                 if(boxy > big.offsetHeight-h*2){
44                     this.style.top = big.offsetHeight - h*2 + 'px'
45                 }
46                 if(boxy < 0){
47                     this.style.top = '0px'
48                 }
49            }
50 
51                 //鼠标弹起后 定住  啥都不动
52                 box.onmouseup = function(){
53                        document.onmousemove = null
54                            document.onmuseup = null
55                 }
56         }       
57     </script>
58 </body>

 

四，获取 style 样式，样式对象

 1 //获取style样式（常用，解决兼容）可以获取对应的设置的所有样式；
 2 
 3 if (window.getComputedStyle) {
 4     style = window.getComputedStyle(box, null);    
 5     //支持IE9+及非IE浏览器
 6 } else { 
 7     style = box.currentStyle;  // IE8及以前浏览器支持
 8 } 
 9 
10 //使用 style 属性  只能获取 style 属性内部的内容（只能获取内部样式）

 

五，事件监听器

　　　事件监听器, 是JS事件中的一种事件触发机制, 我们可以通过添加事件监听器的方式给元素添加事件及执行函数

1, 添加事件监听器

　　box.addEventListener(“click”, func, false) : 给box元素添加点击事件(click), 以及事件执行函数func. 针对该函数的三个参数作说明:

　　　　第一个参数(“click”) : 事件名称(前面没有on)

　　　　第二个参数(func): 事件执行函数名称(没有双引号, 也没有())

　　　　第三个参数(false/true) : 是否使用捕捉(反向冒泡)，默认false，为冒泡

1 //参数一 为事件名，    参数二 为执行函数
2 
3 var div = document.getElementById('div')
4 div.addEventListener('click',function(){
5     console.log('我是事件执行函数')
6 })

 

2, 移除事件监听器

 box.removeEventListener(“click”, func) : 将box元素的点击事件(click), 以及对应的事件执行函数func移除

​注: 这里只会删除使用box.addEventListener()方法添加的事件监听器

​注: IE8及其以下不支持，火狐和谷歌支持。

 　　　　box.removeEventListener(“click”, func)

1 兼容写法
2 //在IE8及以下的浏览器中， 我们可以使用以下方式： 
3 
4 box.attachEvent("onclick", fn);   //添加事件
5 box.detachEvent("onclick", fn);   //移除事件

 

六，事件委托

　　可以这么说：事件委托机制，谁都不想干，只能父亲干；事件委托机制就是将自己要加的事件加给父元素（当子元素很多的时候）

 1 <body>
 2     <ul id="box">
 3         <li>1</li>
 4         <li>2</li>
 5         <li>3</li>
 6         <li>4</li>
 7         <li>5</li>
 8     </ul>
 9     <!-- 事件委托机制就是将自己要加的事件加给父元素（当子元素很多的时候） -->
10 
11     <script>
12         // 点击li打印里面的值 给li添加点击事件
13         //利用事件委托机制我给ul添加
14 
15        var box = document.getElementById('box')
16 
17        box.onclick = function(e){
18            //通过e.target找到你点击的目标元素 来进行操作
19            console.log(e.target.innerText);//目标元素
20            init()
21            e.target.style.backgroundColor = 'red'
22        }
23 
24        function init(){
25          var lis = box.children
26          for(var i=0;i<box.childElementCount;i++){
27             //  console.log(i);
28              lis[i].style.backgroundColor = ''
29          }
30        }
31     </script>
32 </body>
posted @ 2022-04-13 21:09  AVEGER  阅读(48)  评论(0)    收藏  举报