1, 事件对象
(1)onmousemove(鼠标移动事件)
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数。在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标,键盘哪个按键等等
<script>
window.onload = function() {
var a = document.getElementsByTagName('a')
var b = document.getElementsByTagName('b')
a.onmousemove = function(event) {
/**
* clientX 可以获取鼠标指针的水平坐标
* clientY 可以获取鼠标指针的垂直坐标
* 在IE8中,是将事件对象作为window对象的属性保存的
* if(!event) {
* event = window.event
* }
*/
event = event || window.event;
var x = event.clientX;
var b = event.clientY;
showMeg.innnerHTML = x, b
}
}
</script>
(2) div跟随鼠标移动
注意:clientX/clientY 用于获取鼠标在当前可见窗口的坐标
pageX/pageY可以获取鼠标相对于当前页面的坐标
<style>
#box {
width:100px;
height: 100px;
background-color: indianred;
/**
* 设置偏移量,一定要开启定位
*/
position: absolute;
}
</style>
<script>
window.onload = function () {
var box = document.getElementById('box')
window.onmousemove = function(event) {
// 处理浏览器兼容性问题
event = event || window.event
// 获取鼠标的坐标位置,
// var left = event.clientX;
// var top = event.clientY;
var left = event.pageX;
var top = event.pageY;
// 设置div的偏移量
box.style.left = left + 'px';
box.style.top = top + 'px'
}
}
</script>
</head>
<body style="height: 1500px;">
<div id="box"></div>
</body>
2, 冒泡
所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
注意:打开发中,大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象取消冒泡
(1) 取消冒泡
<script>
window.onload = function() {
var children = document.getElementsByTagName('children')
var father = document.getElementsByTagName('father')
var grandfather = document.getElementsByTagName('grandfather')
children.onclick = function(event) {
event = event || window.event
// 取消冒泡
event.cancelBubble = true
alert('children')
}
father.onclick = function(event) {
event = event || window.event
event.cancelBubble = true
alert('father')
}
grandfather.onclick = function() {
event = event || window.event
event.cancelBubble = true
alert('grandfather')
}
}
</script>
(2) 事件委派
指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提供程序的性能
<ul>
<li><a href="javascript:;" class="link">超链接1 </a></li>
<li><a href="javascript:;" class="link">超链接2 </a></li>
<li><a href="javascript:;" class="link">超链接3 </a></li>
</ul>
// 统一为ul绑定一个单击响应事件
ul.onclick = function(event) {
event = event || window.event
if (event.target.className = "link") {
alert('我是ul的单击响应事件')
}
}
注意:通过 对象.事件 = 函数 的形式绑定响应事件,它只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定多个,后边会覆盖掉前边的。
(3)addEventLististener
通过addEventLististener可以同时绑定多个函数,参数说明
- 第一个参数:事件的字符串不要on
- 第二个参数:回调函数当事件触发的时候该函数会调用
- 第三个参数:是否在捕获阶段触发,一般都是false
btn.addEventListener('click', function() {
alert(1)
}, false)
btn.addEventListener('click', function() {
alert(2)
}, false)
(4) 事件捕获
W3C规定,将事件的传播分成三个阶段
1,捕获阶段
- 在捕获阶段时,从最外层的祖先元素,想目标元素进行事件的捕获,但是默认此时不会触发事件
2,目标阶段
- 事件捕获到目标元素,捕获结束,开始在目标元素上触发事件
3,冒泡阶段
- 事件从目标元素想他的祖先元素传递,依次触发祖先元素上的事件
注意: 如果希望在捕获阶段触发事件,可以将addEventListener()的第三个参数设置为true
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:100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload = function() {
var box = document.getElementById('box')
// 1, 当鼠标在被拖拽元素上按下时, 开始拖拽:onmousedown
// 2, 当鼠标移动时候被拖拽元素跟随鼠标移动: onmousemove
// 3, 当鼠标松开时被拖拽元素固定在当前位置: onmouseup
box.onmousedown = function(event) {
// div的偏移量
event = event || window.event;
var ot = event.clientY - box.offsetTop;
var ol = event.clientX - box.offsetLeft;
document.onmousemove = function(event) {
event = event || window.event
// 获取鼠标坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改box位置
box.style.left = left + 'px';
box.style.top = top + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
// 阻止浏览器提供的默认行为
return false;
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
拖拽函数的封装 drag.js
function drag(el) {
el.onmousedown = function(event) {
// div的偏移量
event = event || window.event;
var ot = event.clientY - box.offsetTop;
var ol = event.clientX - box.offsetLeft;
document.onmousemove = function(event) {
event = event || window.event
// 获取鼠标坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改box位置
el.style.left = left + 'px';
el.style.top = top + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
// 阻止浏览器提供的默认行为
return false;
}
}