事件冒泡+事件监听
作者：互联网
事件冒泡
1. 定义 :
从里到外冒泡, 里面有一个按钮添加了点击事件, 外面有个盒子也添加了点击事件, 在触发对应的按钮的点击的时候,同时他会自动调用对应盒子的点击事件, 而这个机制叫事件冒泡 [ 事件冒泡 ]---是从里往外逐个触发; [ 事件捕获 ]--- 是从外往里逐个触发; 现代的浏览器默认情况下都是事件冒泡的模式
2.阻止冒泡的两个方法
--- 在指定不想再继续传递事件的节点的事件执行函数中使用
(1) 取消冒泡, IE --- e.cancelBubble = true (兼容IE的写法)
(2) 停止传播, 非IE --- e.stoppropagation( )*
3.默认行为
概述 : 元素自身拥有的一些行为
阻止a标签的默认行为
<body> <a href="http://www.baidu.com">百度</a> <script> document.querySelector("a").onclick = function(e){ e = e || window.event; //阻止a标签默认跳转的行为 e.preventDefault(); //阻止默认行为* //IE浏览器兼容 // e.returnValue = false; //阻止默认行为 //returnValue 同样也适用于高版本浏览器, 但是以后可能会被废弃 console.log("a标签被阻止了"); return false ; //阻止默认行为 一般写在最后 } </script> </body> 阻止默认行为方法 e.preventDefault( ) --- 适用所有符合w3c规则的浏览器e.retrunValue = false --- 适用IE浏览器, 同样适用于高版本浏览器(可能后被废弃)
return false --- 都适用
拖拽实现
(1) onm ousedown : 鼠标按下 --- 获取点击在元素上的位置
(2) onm ousemove : 鼠标移动 --- 获取在文档上移动的位置, 控制对应的元素移动
(3) onm ouseup : 鼠标松开 --- 将弹起事件和移动事件清除
拖拽实现公式
1. 鼠标在大盒子里面的位置 = 当前的鼠标在页面上的位置(page) - 大盒子离页面的距离(offset家族)
2. 移动的位置 = 得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置
3. 最大的移动区间 = 父元素的宽(高)度 - 子元素的宽(高)度
事件监听
1. 采用了观察者模式(observer)
2. 同一个事件可以有多个函数处理
3. 在添加事件的时候对应的处理函数不能是匿名函数 (不然是不能被移除的)
添加事件监听 ---- addEventListen
addEventListen (监听事件名, 处理函数, 冒泡还是捕获 true)
移除事件监听 ---- removeEvenListener
removeEvenListener (事件名, 处理函数)
标签：浏览器,鼠标,默认,---,冒泡,监听,事件 来源： https://www.cnblogs.com/huanglidan/p/16356967.html