事件的传播
事件的传播
关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素。
W3C综合了两个公司的方案,将事件传播分成了三个阶段:
1.捕获阶段:在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件。
2.目标阶段:事件捕获到目标元素,捕获结束开始在目标元素上触发事件。
3.冒泡阶段:事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件。
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false,IE8及以下的浏览器中没有捕获阶段。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
#box3 {
width: 150px;
height: 150px;
background-color: skyblue;
}
</style>
<script type="text/javascript">
window.onload = function() {
// 分别为三个div绑定单击响应函数
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
bind(box1, "click", function() {
alert("我是box1的响应函数")
});
bind(box2, "click", function() {
alert("我是box2的响应函数")
});
bind(box3, "click", function() {
alert("我是box3的响应函数")
});
};
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, true);
} else {
/*
* this是谁由调用方式决定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on" + eventStr, function() {
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
拖拽
<!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>
<script type="text/javascript">
window.onload = function () {
/*
拖拽流程
1.当鼠标按下的时候,开始拖拽 onmousedown
2.鼠标移动,div也移动 onmousemove
3.鼠标松开时,div固定在当前位置 onmouseup
*/
var box1 = document.getElementById("box1");
box1.onmousedown = function (event) {
/*设置box1 捕获所有鼠标按下的事件
box1.setCapture();*/
/*求出div的偏移量
鼠标的clientX-元素的offsetleft
鼠标的clientY-元素的offsetright
*/
event=event||window.event;
var ol=event.clientX-box1.offsetLeft;
var ot=event.clientY-box1.offsetTop;
//鼠标移动,div也移动 onmousemove
document.onmousemove = function (event) {
event = event || window.event;
var x = event.clientX;
var y = event.clientY;
//这个地方用top和left一定要设置position,否则不生效
box1.style.left = x -ol + "px";
box1.style.top = y -ot + "px";
};
// 鼠标松开时,div固定在当前位置 onmouseup
document.onmouseup = function () {
//当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消up事件
document.onmouseup = null;
/*鼠标松开的时候,取消捕获
box1.releasCapture(); ie8*/
}
/*当我们去拖拽一个网页中的内容,浏览器会默认去搜索选中的内容
此时会导致拖拽功能的异常
可以通过return false取消默认行为
*/
return false;
}
}
</script>
</head>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
}
#box2 {
width: 100px;
height: 100px;
background-color: rgb(206, 71, 139);
position: relative;
}
</style>
<body>
<p>wship</p>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
这个题目的意思就是想把蓝色的移动到红色那,保证鼠标拖拽时,鼠标在div中所点的位置保持不变,所以需要在原来ClientX的基础上减去他们的差距,差距是多少呢,是绿色减去红色
鼠标滚轮
<!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>
<script type="text/javascript">
window.onload = function () {
/*
当滚轮向下滚动时,box1变长
当滚轮向上滚动时,box1变短
*/
var box1 = document.getElementById("box1");
//为box1 绑定一个鼠标滚轮滚动的事件
box1.onmousewheel = function (event) {
event = event || window.event;
// alert("滚动");
/*判断鼠标滚轮滚动的方向
event.wheelDelta 可以获取鼠标滚轮滚动的方向
向上滚120 向下滚-120(只看正负,不看大小)
*/
/*wheelDelta这个属性火狐中不支持
在火狐中使用event.detail来获取滚动的方向
向上滚 -3 向下滚 3
alert(event.detail);
*/
alert(event.wheelDelta);
}
//现在的方法
box1.onwheel=function(){
this.style.fontSize = "35px";
}
}
</script>
</head>
<style>
#box1 {
width: 300px;
height: 300px;
background-color: #bfa;
}
</style>
<body>
<div id="box1">2222</div>
</body>
</html>
键盘事件
<!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>
<script type="text/javascript">
window.onload = function () {
/*键盘事件:
onkeydown键盘被按下
onkeyup 键盘被松开
键盘事件,一般绑定给可以获取焦点的元素和document
onkeydown如果一直按着某个按键不松手,则事件会一直被触发
当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,
其他的会非常的快。这种设计是为了防止误操作的发生。
keyCode 获取按键的编码ASCII
key返回按键是什么,返回键名
document.οnkeydοwn=function(){
// console.log("ffff");
console.log(event.keyCode);
}
document.οnkeyup=function(){
console.log("松开了");
}
*/
/*
altkey
ctrlkey
shiftkey
这三个用来判断alt,ctrl,shift是否同时被按下,按下返回true
document.οnkeydοwn=function(){
if(event.keyCode==89&&event.ctrlKey){
console.log("ctrl和y都被按下了");
}
}
*/
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function (event) {
// console.log("按键按下了");
//
if (event.keyCode >= 48 && event.keyCode <= 57) {//输入的是个数字
//在文本框中输入内容,属于默认行为,如果取消默认行为,则输入的内容,不会出现在文本框中
return false;
}
console.log(event.keyCode);
}
}
</script>
</head>
<style>
</style>
<body>
<div id="box1" style="width: 100px; height: 100px; background-color: aqua;"></div>
<input type="text" name="" id="">
</body>
</html>
div移动
<!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>div移动游戏</title>
<script type="text/javascript">
window.onload = function () {
var box1 = document.getElementById("box1");
document.onkeydown = function (event) {
var speed=10;
//摁Ctrl,加速运动
if(event.ctrlKey){
speed=50;
}
if (event.key == "ArrowUp") {
box1.style.top = box1.offsetTop - speed + "px";
console.log("上");
} else if (event.key == "ArrowDown") {
box1.style.top = box1.offsetTop + speed + "px";
console.log("xia");
}
else if (event.key == "ArrowRight") {
box1.style.left = box1.offsetLeft+speed + "px";
console.log("左");
}
else if (event.key == "ArrowLeft") {
box1.style.left = box1.offsetLeft - speed + "px";
}
}
}
</script>
</head>
<style>
/*如果不加这句话,向上移动或者向左移动,速度大小都是不对的*/
*{
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: #bfa;
position: relative;
}
</style>
<body>
<div id="box1"></div>
</body>
</html>