事件的传播行为(也叫作事件流)
冒泡模式(默认模式)
冒泡模式就是从里到外触发
-
event.bubbles(只读属性)
console.log(e.bubbles) //当前事件是否冒泡,返回布尔值
<div>
<button>点我</button>
</div>
<script>
var div = document.querySelector('div')
document.onclick = function () {
console.log('文档被点击了')
}
div.onclick = function () {
console.log('div被点击了')
}
document.querySelector('button').onclick = function (e) {
console.log('button被点击了')
console.log(e.bubbles) //当前事件是否有冒泡
}
</script>
阻止事件冒泡
-
stopPropagation(方法)
e.stopPropagation() //阻止事件冒泡,是常用的方法,有兼容问题
- cancelBubble (属性) --> 兼容ie低版本的写法
//ie8及以下版本写法 e.cancelBubble = true
- 兼容写法
//兼容写法 e.propagation ? e.propagation() : e.cancelBubble = true
捕获模式
捕获模式就是从外到里触发
默认行为
某些操作或者html元素拥有的一些默认的行为(a标签的默认行为:进行页面跳转,form里面有submit行为,image有图片的拖动行为)
在某些时候 默认行为会导致代码的执行出现问题,这时候就需要禁止默认行为
阻止默认行为
-
preventDefault(方法)
//阻止默认行为 e.preventDefault() //大部分浏览器都兼容,常用
- returnValue=false (属性) 兼容ie低版本的写法
//兼容ie e.returnValue=false //兼容ie
- 兼容写法
e.preventDefault?e.preventDefault():e.returnValue=false
- return false
return false
事件监听器(有兼容问题,ie已经放弃这个功能了)
-
addEventListener 添加事件监听器 (可以添加多个处理函数)
-
removeEventListener 移除事件监听器 (只能移除addEventListener添加的处理函数,并且得是同一个函数)
<button onclick="hander1()">点我</button>
<script>
// 事件监听器就是,监听指定的事件来执行对应的处理函数,它不会覆盖之前的事件处理函数
// 如果需要有多个处理函数的时候,可以采用事件监听器
// 事件监听器是一个函数,里面需要填 传入的事件名,和处理的函数(如果是直接传入function,就不会被移除)
var btn = document.querySelector('button')
function hander1() {
console.log('封装的全局函数,都可调用');
}
btn.onclick = function () {
console.log('会覆盖内联模式的onclick事件')
}
btn.addEventListener('click', function () {
console.log('点击了按钮')
})
btn.addEventListener('click', function fn() {
console.log('点击了按钮1')
})
btn.addEventListener('click', hander1)
// 移除事件监听器,只能移除addEventListener添加的,而且处理函数必须是同一个,不然移除不了
btn.removeEventListener('click', function fn() {
console.log('我要移除点击了按钮1')//移除不了,和上面添加的不是一个处理函数
})
btn.removeEventListener('click', hander1)//可移除
</script>
盒子拖拽
基础三大事件
-
鼠标按下事件 ( mousedown )
-
鼠标移动事件 ( mousemove )
-
鼠标松开事件 ( mouseup )
在页面上进行拖拽
步骤
-
给需要拖拽的盒子添加鼠标按下事件
-
在鼠标按下事件时获取鼠标在盒子的位置 ( 用offsetX / offsetY )
-
在鼠标按下事件中给document添加移动事件
-
在移动的时候获取鼠标在页面上的位置 ( 用pageX / pageY )
-
计算出当前位置 ( 页面上的位置 - 鼠标在盒子的位置 )
-
设置盒子的位置
-
在鼠标按下事件中给document添加鼠标松开事件
-
在鼠标松开事件中清除鼠标移动事件
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
<div></div>
<script>
//获取div
var div = document.querySelector('div')
//给div设置鼠标按下事件
div.onmousedown = function (e) {
//event的兼容写法
e = e || window.event
//获取鼠标在盒子的距离
var currentX = e.offsetX
var currentY = e.offsetY
//给页面添加鼠标移动事件
document.onmousemove = function (e) {
//获取鼠标在页面上的距离
var targetX = e.pageX - currentX
var targetY = e.pageY - currentY
//给盒子设置位置
div.style.left = targetX + 'px'
div.style.top = targetY + 'px'
}
//给页面设置鼠标松开事件,清除移动事件
document.onmouseup = function () {
document.onmousemove = null
}
}
</script>
在区间位置进行拖拽
offset家族 ( 是属性,针对元素对象 )
-
offsetParent 偏移父元素 ( 找最近的有定位的父元素,如果没有定位就找body )
-
offsetHeight 偏移元素的高度
-
offsetWidth 偏移元素的宽度
-
offsetLeft 离父元素偏移的左边的距离 ( number类型 )
-
offsetTop 离父元素偏移的上边的距离 ( number类型 )
<style>
.box {
width: 666px;
height: 666px;
border: 1px solid #000;
position: relative;
}
.move {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
<div class="box">
<div class="move"></div>
</div>
<script>
// 获取页面上需要操作的元素
var box = document.querySelector('.box')
var move = document.querySelector('.move')
// 给需要移动的盒子添加鼠标按下事件
move.onmousedown = function (e) {
// event的兼容写法
e = e || window.event
// 获取鼠标在盒子的位置
var currentX = e.offsetX
var currentY = e.offsetY
// 给大盒子添加鼠标移动事件
box.onmousemove = function (e) {
e = e || window.event
//如果要找盒子在页面上的位置 那么要从自己基于的父元素的距离 + 对应父元素基于他的父元素距离 .. 直到找到body
// 用一个变量来接收得到的盒子在页面上的距离的对象(用封装的方法计算出的)
var dis = computeInPage(this)
// 当前位置 = 页面上的距离 - 父类们离body的距离(大盒子在页面的距离) - 鼠标在盒子的距离
var targetX = e.pageX - dis.left - currentX
var targetY = e.pageY - dis.top - currentY
// 设置一个最大可移动范围 :大盒子宽高-小盒子宽高-外边距
var maxX = this.offsetWidth - move.offsetWidth - 2
var maxY = this.offsetHeight - move.offsetHeight - 2
// 设置当前位置的最大最小范围
// 如果当前位置小于0,则当前位置等于0,当前位置大于最大的移动范围,那它就等于最大的移动范围
if (targetX < 0) {
targetX = 0
}
if (targetX > maxX) {
targetX = maxX
}
if (targetY < 0) {
targetY = 0
}
if (targetY > maxY) {
targetY = maxY
}
// 给需要移动的盒子设置位置
move.style.left = targetX + 'px'
move.style.top = targetY + 'px'
}
// 给页面上设置鼠标松开事件,松开移动事件就清除
document.onmouseup = function () {
box.onmousemove = null
}
}
// 封装一个计算盒子在页面上的位置的方法,传入一个需计算的对象,返回的是一个距离对象
function computeInPage(element) {
// 初始化一个距离对象,left代表距离左边的距离,top代表距离右边的距离
var distance = {
left: 0,
top: 0
}
// 循环元素的父类,一直向上判断,到了body为null就结束循环
while (element.offsetParent) {
// 对象的左右边距=对象的左右边距+元素的左右偏移距离
distance.left += element.offsetLeft
distance.top += element.offsetTop
element = element.offsetParent
}
// 返回这个距离对象
return distance
}
</script>
样式获取
-
style属性 只能获取内嵌样式
<style>
div {
width: 200px;
}
</style>
<div style="height:100px"></div>
<script>
// style的弊端,它只能获取对应的内联模式的样式,也就是只能获取style属性的样式
var div = document.getElementsByTagName('div')[0]
console.log(div.style.width) //空字符串
console.log(div.style.height) //100px
</script>
- getComputedStyle 方法可以获取所有的样式
<head>
<style>
div {
width: 200px;
}
</style>
</head>
<body>
<div style="height:100px"></div>
</body>
<script>
var div=document.querySelector('div')
var style = getComputedStyle(div, "")
console.log(style) //getComputedStyle获取的样式会得到CSS所有的样式,是个对象,他们都有自己的默认值
console.log(style.width) //200px
console.log(style.height) //100px
</script>
- currentStyle 是ie的低版本兼容
console.log(div.currentStyle) //ie低版本兼容,未进行维护已被废弃,低版本还能用
- 兼容封装
// getComputedStyle 有兼容问题
// currentStyle 有兼容问题,只有ie低版本可用,已被废弃
// 兼容写法 传入一个元素,返回一个样式对象
function getStyle(element){
var style=window.getComputedStyle?getComputedStyle(element,''):element.currentStyle
return style
}
标签：function,console,鼠标,事件,day12,var,div From： https://www.cnblogs.com/itlulu/p/16824300.html