事件监听
<style>
.div1{
width: 300px;
height: 300px;
background: skyblue;
}
.div2{
width: 200px;
height: 200px;
background: orange;
}
.div3{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
<script>
// 事件的监听
// 作用:
// 如果是普通的事件绑定,相同事件类型,只能绑定一个事件处理函数
// 如果同一个类型,绑定多个事件处理函数,后绑定的事件会覆盖之前绑定的事件
// 语法:
// 标签对象.addEventListener(事件类型 , 事件处理函数)
// 第三个参数: true / false(默认值)
// 事件的获取方式
// 冒泡 : 从子级开始,向父级执行
// 捕获 : 从父级开始,向子级执行
// 浏览器默认都是冒泡的执行方式
// 可以通过 addEventListener 第三个参数来设定获取方式
// 默认值 false 是 冒泡方式 true是捕获方式
// 一般实际项目中,不定义第三个参数,就使用默认方式
// 低版本IE,只支持冒泡,不支持捕获,不会报错,只会按照冒泡的顺序执行
// 今后给标签,绑定事件,推荐都使用 事件监听方式
var oDiv1 = document.querySelectorAll('div')[0];
var oDiv2 = document.querySelectorAll('div')[1];
var oDiv3 = document.querySelectorAll('div')[2];
// 普通事件绑定方式,只会执行最后一个绑定的事件处理函数
// oDiv1.onclick = function(){
// console.log(123)
// }
// oDiv1.onclick = function(){
// console.log(456)
// }
// oDiv1.onclick = function(){
// console.log(789)
// }
// 事件监听方式
// oDiv1.addEventListener('click' , function(){
// console.log(123);
// })
// oDiv1.addEventListener('click' , function(){
// console.log(456);
// })
// oDiv1.addEventListener('click' , function(){
// console.log(789);
// })
// 使用事件监听的方式,给父子级关系的标签,绑定事件
oDiv1.addEventListener('click' , function(){
console.log(1111)
} , true)
oDiv2.addEventListener('click' , function(){
console.log(2222)
} , true)
oDiv3.addEventListener('click' , function(){
console.log(3333)
} , true)
</script>
事件监听的兼容
<div id="div">123</div>
<script>
// 兼容方式
// 普通浏览器
// 标签对象.addEventListener('事件类型' , 事件处理函数)
// 事件类型必须是字符串形式,直接写事件类型名称,不能有on
// 低版本IE浏览器
// 标签对象.attachEvent('on事件类型' , 事件处理函数)
// var oDiv = document.getElementById('div');
// 一般的监听方式
// oDiv.addEventListener('click' , function(){
// console.log(123);
// })
// 低版本IE浏览器
// oDiv.attachEvent('onclick' , function(){
// console.log(456);
// })
// 使用函数的方式,来做兼容处理
// 参数1,要绑定的事件对象
// 参数2,要绑定的事件类型
// 参数3,要绑定的事件处理函数
// 如果是特殊的事件类型,需要绑定,可以再单独写判断
var oDiv = document.getElementById('div');
myAddEvent(oDiv , 'click' , function(){console.log(123) } );
function myAddEvent(ele,type,fun){
if(ele.addEventListener){
ele.addEventListener(type,fun)
}else{
ele.attachEvent( 'on'+type , fun)
}
}
</script>
事件监听的删除
<div>123</div>
<script>
var oDiv = document.querySelector('div');
var fun4 = function(){
console.log('abc');
}
oDiv.addEventListener('click' , fun1);
oDiv.addEventListener('click' , fun2);
oDiv.addEventListener('click' , fun3);
oDiv.addEventListener('click' , fun4);
oDiv.addEventListener('click' , function(){console.log('别想删我')});
// 可以删除
oDiv.removeEventListener('click' , fun1);
oDiv.removeEventListener('click' , fun4);
// 不能删除
oDiv.removeEventListener('click' , function(){console.log('别想删我')});
// 注意:
// 绑定时,必须是函数名称,或者存储函数的变量名称
// 才能删除
// 绑定时,如果直接定义函数,是不能删除的
// 原因: 两个函数,程序相同,但是地址不同
function fun1(){
console.log(123);
}
function fun2(){
console.log(456);
}
function fun3(){
console.log(789);
}
</script>
监听拖拽
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 5000px;
}
.box {
width: 800px;
height: 800px;
border: 10px solid #000;
margin: 40px auto;
position: relative;
background: skyblue;
}
.inner {
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
<script>
// 1,获取标签对象
var oBox = document.querySelector('.box');
var oInner = document.querySelector('.inner');
// 2,获取相应的数据
// 获取父级标签的---占位---不包括边框线
var oBoxWidth = oBox.clientWidth;
var oBoxHeight = oBox.clientHeight;
// 获取子级标签的---占位---包括边框线
var oInnerWidth = oInner.offsetWidth;
var oInnerHeight = oInner.offsetHeight;
// 给父级标签添加事件
// 事件监听语法
oInner.addEventListener('mousedown' , function(){
// 直接 move函数 , 不需要实参的
document.addEventListener('mousemove' , move );
})
document.addEventListener('mouseup' , function(){
// 鼠标抬起,删除移动事件,绑定的 move 函数
document.removeEventListener('mousemove' , move );
})
// 总结:
// 按下执行,给 鼠标移动事件 绑定 move 函数
// 抬起执行,给 鼠标移动事件 删除 mvoe 函数
// 这里的形参e 是 事件对象
// 事件对象在触发事件时,JavaScript程序会自动向这个形参存储实参
// 调用触发事件时,不要需要写实参
function move(e){
var x = e.pageX - oBox.offsetLeft - oBox.clientLeft - oInnerWidth / 2;
var y = e.pageY - oBox.offsetTop - oBox.clientTop - oInnerHeight / 2;
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x > oBoxWidth - oInnerWidth) {
x = oBoxWidth - oInnerWidth;
}
if (y > oBoxHeight - oInnerHeight) {
y = oBoxHeight - oInnerHeight
}
oInner.style.left = x + 'px';
oInner.style.top = y + 'px';
}
// 思路步骤和问题
// 1, 事件,到底是绑定给 父级,子级,还是document,还是window
// 事件,取消,到底是通过谁取消
// 没有固定的写法,看你需要的效果
// 还是document和window效果相同,没有区别
// 鼠标按下
// oInner.onmousedown 鼠标在粉色div上,按下鼠标,并且移动鼠标,才会有效果
// oBox.onmousedown 鼠标在蓝色div上,按下鼠标,并且移动鼠标,才会有效果
// window.onmousedown 鼠标在全屏上,按下鼠标,并且移动鼠标,都会有效果
// 鼠标移动
// 最好写成 document.onmousemove / window.onmousemove
// 鼠标可以快速移动,不怕移出粉色div
// 鼠标抬起
// oInner.onmouseup 鼠标在粉色div上抬起,才会执行,标签不跟随移动
// oBox.onmouseup 鼠标在蓝色div上抬起,才会执行,标签不跟随移动
// window.onmouseup 鼠标在整个页面上抬起,都会执行,标签不跟随移动
// 2, 闪烁问题
// 原因: 相对于标签内容的左上角的定位
// 会因为鼠标经过不同的标签对象,获取不同的数据
// 而且JavaScript执行时,有时还会有bug产生
// offsetX offsetY 我们是不推荐使用的
// 解决: 使用 pageX 和 pageY
// 定位: page距离 - 父级标签外边距 - 父级border - 移动标签占位/2(标签中心点和鼠标重合)
// 极值1: 左 上 都是 0
// 极值2: 右 下 父级标签占位(不算border) - 移动标签占位(计算border)
</script>
