鼠标事件下

事件的俩个行为

事件冒泡

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

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

事件捕获

直接进行捕获处理

阻止事件冒泡

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)

}