鼠标事件下

事件的俩个行为

事件冒泡

从里到外冒泡 里面有一个按钮添加了点击事件 外面有个盒子也添加了点击事件 在你触发对应的按钮的

点击的时候 同时他会自动调用对应盒子的点击事件 而这个机制就叫做事件冒泡

事件捕获

直接进行捕获处理

阻止事件冒泡

e.stoppropagation() *

e.cancelBubble = true ( 兼容 ie 的写法 )

兼容写法

阻止默认行为

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

form 的 submit 按钮会自动提交 然后跳转页面

a 标签 直接默认跳转页面

鼠标右键点击 会出现菜单栏

.....

document . querySelector ( "div" ). onclick = function (){

console . log ( " 大盒子被点击了 " );

}

document . querySelector ( "button" ). onclick = function ( e ){

e = e || window . event

// // 阻止事件冒泡

// e.stopPropagation() // 适用大多数的浏览器 *

// // 兼容 ie 取消冒泡

// e.cancelBubble = true

// 兼容写法

if ( e . stopPropagation ){

e . stopPropagation ()

} else {

e . cancelBubble = true

}

// 三目运算写法

e . stopPropagation ? e . stopPropagation (): e . cancelBubble = true

console . log ( " 按钮被点击了 " );

}

e . stopPropagation ? e . stopPropagation (): e . cancelBubble = true 阻止 a 标签默认跳转的行为

e.preventDefault() 适用所有符合 w3c 规则的浏览器 *

e.returnValue = false 适用 ie 浏览器 同样适用于高版本浏览器（可能会被废弃）

return false // 都适用

右键菜单栏事件

拖拽

思路

1. 鼠标按下 mousedown （获取点击在元素上的位置）

2. 鼠标移动 mousemove （获取在文档上移动的位置 控制对应的元素移动）

3. 鼠标弹起 mouseup （将弹起事件和移动事件清除）

实现代码

<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>

document . oncontextmenu

<!-- 在 body 里面拖拽 位置会改变 拖拽的元素需要定位 -->

<div></div>

<script>

//1. 获取 div 元素

var div = document . querySelector ( "div" )

//2. 需要给 div 的元素添加鼠标按下事件（获取按下在元素里面的位置）

div . onmousedown = function ( e ){

e = e || window . event

// 需要对应的鼠标在盒子里的位置 offsetX offsetY

var currentX = e . offsetX

var currentY = e . offsetY

//3. 在按下事件里面添加移动事件 （获取移动的位置） 新的位置 - 鼠标在盒子里面点击的位置

document . onmousemove = function ( e ){

e = e || window . event

var targetX = e . pageX - currentX // 移动的距离

var targetY = e . pageY - currentY // 移动的距离

// 控制对应的元素移动

div . style . left = targetX + "px"

div . style . top = targetY + "px"

}

//4. 在按下事件里面添加弹起事件 取消俩个事件

document . onmouseup = function (){

document . onmousemove = document . onmouseup = false

}

区间拖拽

思路

1. 给元素添加按下事件 （获取元素的父盒子的位置 在网页上的位置 获取对应的鼠标在元素里面的位

置）

2. 在按下事件里面添加移动事件（父元素添加） （获取当前鼠标在父盒子里面的位置 - 对应的鼠标在元

素的位置 设置对应的位置 ）

3. 在弹起事件里面取消对应的移动事件以及弹起事件

代码

</script>

<div class = "box" >

<div class = "moveBox" ></div>

</div>

<script>

//1. 获取元素 大盒子和移动的盒子

var box = document . querySelector ( ".box" )

var moveBox = document . querySelector ( ".moveBox" )

//2. 给小盒子加鼠标按下事件 记录对应的鼠标在小盒子的位置 记录大盒子的位置

// 鼠标在大盒子里面的位置其实就是 当前的鼠标在页面上的位置（ page ） - 大盒子离页面的距离

（ offset 家族）

// 当前的鼠标在页面上的位置（ pageX ） - 大盒子离页面的距离 (offsetLeft)

// 当前的鼠标在页面上的位置（ pageY ） - 大盒子离页面的距离 (offsetTop)

moveBox . onmousedown = function ( e ){

e = e || window . event

var currentX = e . offsetX // 鼠标在小盒子里面的位置

var currentY = e . offsetY

//3. 按下事件里面给大盒子添加移动事件

// （得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置 控制对应的移动）

box . onmousemove = function ( e ){

e = e || window . event

// var targetX = e.offsetX - currentX

// var targetY = e.offsetY - currentY

var targetX = e . pageX - this . offsetLeft - currentX

var targetY = e . pageY - this . offsetTop - currentY

// 最大的移动区间就是 父元素的宽度 - 子元素的宽度

var maxX = this . offsetWidth - moveBox . offsetWidth

var maxY = this . offsetHeight - moveBox . offsetHeight

// 边界判断

// 如果当前定位的位置小于 0 就让他等于 0

if ( targetX < 0 ){

targetX = 0

}

if ( targetY < 0 ){

targetY = 0

}

// 如果当前移动的距离大于我们最大的距离就让他等于这个距离

公式

鼠标在大盒子里面的位置其实就是 = 当前的鼠标在页面上的位置（page） - 大盒子离页面的距离

（ offset 家族）

移动的位置 = 得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置

最大的移动区间 = 父元素的宽 ( 高 ) 度 - 子元素的宽 ( 高 ) 度

offset 家族

offset 家族是获取对应的偏移的位置 他有奶便是娘 （他的父元素谁加了定位他就基于谁 否则基于

body ）

offsetParent 偏移的父元素（选择离他最近加了定位的父元素）

offsetLeft 左偏移

offsetTop 上偏移

offsetWidth 偏移元素的宽度

offsetHeight 偏移元素的高度

获取样式

window.getComputedStyle() *

element.currentStyle ( 兼容 ie8 以下的浏览器 )

事件监听器

if ( targetX > maxX ){

targetX = maxX

}

if ( targetY > maxY ){

targetY = maxY

}

// 控制小盒子的位置

moveBox . style . left = targetX + "px"

moveBox . style . top = targetY + "px"

}

//4. 取消对应的大盒子的移动事件 以及大盒子的弹起事件

box . onmouseup = function (){

box . onmouseup = box . onmousemove = false

}

}

</script>

// 获取样式 获取所有的地方的样式 给定都是默认值 使用 window 对象

console . log ( window . getComputedStyle ( $ ( "h1" )). backgroundImage ); // 返回的是一个样式对

象 里面包含所有的样式

// 兼容 ie 都是属性 直译 元素对象

console . log ( $ ( "h1" ). currentStyle );

// 兼容写法 获取样式对象

function getStyle ( element ){

return window . getComputedStyle ?

window . getComputedStyle ( element ): element . currentStyle

} 1. 采用了观察者模式（ observer ）

2. 同一个事件可以有多个处理函数

3. 在添加事件的时候对应的处理函数不能是匿名函数（不然是不能被移除的）

添加事件监听 addEventListener

addEventListener( 监听事件名 , 处理函数 , 冒泡 false 还是捕获 true)

移除事件监听 removeEventListener

removeEventListener( 事件名 , 处理函数 )

封装的兼容方法

var btn = document . querySelector ( "button" )

function hanlder (){

console . log ( "123" );

}

// 添加监听 同一个事件可以有多个处理函数

btn . addEventListener ( 'click' , hanlder , false )

btn . addEventListener ( 'click' , function (){

console . log ( "456" );

}, false ) // 是否捕获

// 移除事件监听 函数的指向不一样 开辟俩个内存空间 地址是不一样 移除不了

// 移除对应的事件名中某个匹配处理函数

btn . removeEventListener ( 'click' , hanlder )

// 兼容 ie8 以下

// btn.attachEvent("onclick",fn) 添加

// btn.detachEvent("onclick",fn) 移除

// 事件监听器的兼容

// 添加事件的元素 事件类型 处理函数

function addEvent ( element , type , fn ){

element . addEventListener ?

element . addEventListener ( type , fn ): element . attachEvent ( `on${ type }` , fn )

}

function removeEvent ( element , type , fn ){

element . removeEventListener ?

element . removeEventListener ( type , fn ): element . detachEvent ( `on${ type }` , fn )

}