事件冒泡+事件监听

事件冒泡

1. 定义 :

从里到外冒泡, 里面有一个按钮添加了点击事件, 外面有个盒子也添加了点击事件, 在触发对应的按钮的点击的时候,同时他会自动调用对应盒子的点击事件, 而这个机制叫事件冒泡 [ 事件冒泡 ]---是从里往外逐个触发; [ 事件捕获 ]--- 是从外往里逐个触发; 现代的浏览器默认情况下都是事件冒泡的模式

2.阻止冒泡的两个方法

--- 在指定不想再继续传递事件的节点的事件执行函数中使用
(1) 取消冒泡, IE --- e.cancelBubble = true (兼容IE的写法)
(2) 停止传播, 非IE --- e.stoppropagation( )*

3.默认行为

概述 : 元素自身拥有的一些行为

阻止a标签的默认行为

<body>

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) onmousedown : 鼠标按下 --- 获取点击在元素上的位置
(2) onmousemove : 鼠标移动 --- 获取在文档上移动的位置, 控制对应的元素移动
(3) onmouseup : 鼠标松开 --- 将弹起事件和移动事件清除

拖拽实现公式

1. 鼠标在大盒子里面的位置 = 当前的鼠标在页面上的位置(page) - 大盒子离页面的距离(offset家族)
2. 移动的位置 = 得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置
3. 最大的移动区间 = 父元素的宽(高)度 - 子元素的宽(高)度

事件监听

1. 采用了观察者模式(observer)
2. 同一个事件可以有多个函数处理
3. 在添加事件的时候对应的处理函数不能是匿名函数 (不然是不能被移除的)
添加事件监听 ---- addEventListen
　　addEventListen (监听事件名, 处理函数, 冒泡还是捕获 true)
移除事件监听 ---- removeEvenListener
　　removeEvenListener (事件名, 处理函数)