事件下
事件冒泡的两个行为
事件冒泡
从里到外冒泡 里面有一个按钮添加了点击事件 外面有一个盒子也添加了点击事件 在你触发对应的按钮的点击的时候 同时他会自动调用对应盒子的点击事件 而这个机制就叫做事件冒泡
事件捕获
直接进行捕获处理
阻止事件冒泡
e.stoppropagation()*
e.cancelBubble(兼容ie的写法)
<div>
456
<button>123</button>
</div>
<script>
document.querySelector("div").onclick=function(){
console.log("大盒子被点击了");
}
document.querySelector("button").onclick=function(e){
e=e||window.event
//阻止事件冒泡
e.stopPropagation()//适用大多数的浏览器
//兼容ie 取消冒泡
e.canceBubble=true
//兼容写法
if(e.stopPropagation){
e.stopPropagation()
}else{
e.cancelBubble=true
}
//三目运算写法
e.stopPropagation?e.stopPropagation():e.cancelBubble=true
console.log("按钮被点击了");
}
</script>
兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble=true
阻止默认行为
概述:元素自身拥有的一些行为
form的submit按钮会自动提交 然后默认页面
a标签 直接默认跳转页面
鼠标右键点击 会出现菜单栏
......
阻止a标签默认跳转的行为
<a href="http://www.baidu.com">百度</a>
<script>
document.querySelector("a").onclick=dunction(e){
e=e||window.event
//阻止a标签默认跳转行为
e.preventDefault()//阻止默认行为*
//ie浏览器兼容
e.returnValue=false//阻止默认行为 returnValue 同样适用于高版本浏览器(可能会被废弃)
console.log("a标签被点击了");
return false//阻止默认行为 一般写在最后
}
e.preventDefault()适用所有符合w3c规则的浏览器*
e. returnValue=false 适用ie浏览器 同样适用于高版本浏览器(可能会被废弃)
return false//都适用,但是要写在最后面
右键菜单栏事件
document.oncontextmenu
拖拽
1.鼠标按下mousedown (获取点击在元素上的位置)
2.鼠标移动mousemove (获取在文档上移动的位置 控制对应的元素移动)
3.鼠标弹起mouseup (将按下事件和移动事件清除)
<body>
<!-- 在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
//pageX包含不可见范围 body的定位是包含不可见
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
//div.onmousedown=false
//document.onmouseup=false
}
}
</script>
区间拖拽
1.给元素添加按下事件(获取元素的父盒子的位置 在网页上的位置 获取对应的鼠标在元素里面的位置)
2.在按下事件里面添加移动事件(父元素添加)(获取当前鼠标在父盒子里面的位置-对应的鼠标在元素的位置 设置对应的位置)
3.在弹起事件离面取消对应的移动事件以及弹起事件
<div class="box">
<div class="moveBox"></div>
</div>
<script>
//1.获取元素 大盒子和移动的盒子
var box = document.querySelector(".box")
var moveBox = document.querySelector(".moveBox")
//2.给小盒子加鼠标按下事件 记录对应的鼠标在小盒子的位置 记录大盒子的位置
//鼠标在大盒子离的位置其实就是当前的鼠标在页面上的位置(page)-大盒子离页面的距离(offset家族)
//offset家族是获取对应的偏移的位置 它有奶便是娘(谁加了定位他就基于谁 否则基于body)
//offsetParent 偏移的父元素
//offsetLeft 左偏移
//offsetTop 上偏移
//offsetWidth 偏移元素的宽度
//offsetHeight 偏移元素的高度
//当前的鼠标在页面上的位置(pageX)-大盒子离页面的距离(offsetLeft)
//当前的鼠标在页面上的位置(pageY)-大盒子离页面的距离(offsetTop)
moveBox.onmousedown = function (e) {
e = e || window.event
var currentX = e.offsetX//鼠标在小盒子里面的位置
var currentY = e.offsetY
//3.按下事件里面给大盒子添加移动事件
//(得到鼠标在大盒子里面的位置-鼠标在小盒子里面的位置 控制对应的移动)
box.onmuosemove = 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
}
//如果当前移动的距离 大于我们最大的距离 就让他等于这个距离
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>
公式
-
鼠标在大盒子里面的位置其实就是=当前的鼠标在页面上的位置(page)-大盒子离页面的距离(offset家族)
-
移动的位置=得到鼠标在大盒子里面的位置-鼠标在小盒子里面的位置
-
最大的移动区间=父元素的宽(高)度-子元素的宽(高)度
offset家族
offset家族是获取对应的偏移的位置 它有奶便是娘(谁加了定位他就基于谁 否则基于body)
offsetParent 偏移的父元素
offsetLeft 左偏移
offsetTop 上偏移
offsetWidth 偏移元素的宽度
offsetHeight 偏移元素的高度
获取样式
window.getComputedStyle()*
element.currentStyle(兼容ie 8以下的浏览器)
//获取样式 获取所有的地方的样式 给定都是默认值 使用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)
移出事件监听 removeEventListen
removeEventListen(事件名,处理函数)
var btn=document.querySelector("botton")
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('obclick',fn)添加
//btn.detachEvent('obclick',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.removechEvent(`on${type}`,fn)
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现