事件二
1.事件冒泡
从里到外冒泡 里面有一个按钮添加了点击事件 外面有个盒子也添加了点击事件 在你触发对应的按钮的点击的时候 同时他会自动调用对应盒子的点击事件 而这个机制就叫做事件冒泡
<script>
var Box = document.querySelector(".box")
var Box1 = document.querySelector(".box1")
var Box2 = document.querySelector(".box2")
Box.onclick=function(){
console.log("点击了大盒子");
}
Box1.onclick=function(){
e.stoppropageation()
console.log("点击了二盒子");
}
Box2.onclick=function(e){
//阻止事件冒泡
e.stoppropageation()
console.log("点击了三盒子");
}
</script>
直接进行捕获处理
二 ~ 阻止事件冒泡
e.cancelBubble = true (兼容ie的写法)
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
概述：元素自身拥有的一些行为
form的submit按钮会自动提交 然后跳转页面
a标签 直接默认跳转页面
鼠标右键点击 会出现菜单栏
<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
思路
1.鼠标按下 mousedown （获取点击在元素上的位置）
2.鼠标移动 mousemove （获取在文档上移动的位置 控制对应的元素移动）
3.鼠标弹起 mouseup （将弹起事件和移动事件清除）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box drag</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
//1.获取页面元素
var div = document.querySelector("div")
//2.鼠标点击
div.onmousedown = function (e) {
e = e || window.event
// 获取鼠标在div中的位置 offset
var curX = e.offsetX;
var curY = e.offsetY;
console.log(curX, curY);
//3.盒子在文档中移动
document.onmousemove = function (e) {
e = e || window.event
// 移动 = 新的位置减去旧的位置
// 旧的位置 curX curY
//新的位置 e.pageX e.pageY
var tagerX = e.pageX - curX
var tagerY = e.pageY - curY
//div 的位置等于移动后的位置
div.style.left = tagerX + "px"
div.style.top = tagerY + "px"
}
//4.取消移动和抬起事件
document.onmouseup = function () {
document.onmousemove = document.onmouseup = false;
}
}
</script>
</html>
思路
1.给元素添加按下事件 （获取元素的父盒子的位置 在网页上的位置 获取对应的鼠标在元素里面的位置）
2.在按下事件里面添加移动事件（父元素添加） （获取当前鼠标在父盒子里面的位置 - 对应的鼠标在元素的位置 设置对应的位置 ）
3.在弹起事件里面取消对应的移动事件以及弹起事件
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子坐牢记</title>
<style>
.box {
width: 500px;
height: 500px;
border: 1px #000 solid;
margin: 100px;
position: absolute;
}
.moveBox {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="moveBox">
</div>
</div>
<script>
//1.获取页面元素
// 获取 box 和moveBox
var box = document.querySelector(".box")
var moveBox = document.querySelector(".moveBox")
//2.给小盒子绑定鼠标按下事件
moveBox.onmousedown = function (e) {
e = e || window.event;
// 获取鼠标在小盒子中的位置
var curX = e.offsetX;
var curY = e.offsetY;
//3.给大盒子绑定鼠标移动事件
box.onmousemove = function (e) {
e = e || window.event;
//获取鼠标在大盒子中的位置
//新的 位置 = 鼠标在页面上的的位置 - 大盒子到页面上的距离
var moX = e.pageX - this.offsetLeft - curX
var moY = e.pageY - this.offsetTop - curY
//最大值 = 大盒子的宽度 - 小盒子的宽度
var MaxX = this.offsetWidth - moveBox.offsetWidth;
var MaxY = this.offsetHeight - moveBox.offsetHeight;
//if 判断是否超出
if (moX < 0) {
moX = 0
}
if (moY < 0) {
moY = 0
}
//超出最大值时 就等于最大值
if (moX > MaxX) {
moX = MaxX
}
if (moY > MaxY) {
moY = MaxY
}
// console.log(this);
// 给小盒子的位置赋值
moveBox.style.left = moX + "px"
moveBox.style.top = moY + "px"
}
//4.给大盒子绑定鼠标鼠标抬起事件
box.onmouseup = function () {
box.onmousemove = box.onmouseup = false
}
}
</script>
</body>
</html>
offset家族是获取对应的偏移的位置 他有奶便是娘 （他的父元素谁加了定位他就基于谁 否则基于body）
offsetParent 偏移的父元素（选择离他最近加了定位的父元素）
offsetLeft 左偏移
offsetTop 上偏移
offsetWidth 偏移元素的宽度
offsetHeight 偏移元素的高度
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) }
浙公网安备 33010602011771号