事件冒泡
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。