事件对象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#areaDiv {
width: 300px;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
}
#showMsg {
width: 300px;
height: 30px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 当鼠标在areaDiv中移动时,在showMsg中来显示鼠标的坐标
// 获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
onmousemove
该事件将会在鼠标在元素中移动时被触发
事件对象
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前时间相关的一切信息,比如:鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向...
*/
areaDiv.onmousemove = function (event) {
// alert(event);
/*
在IE8中,响应函数被触发时,浏览器不会传递事件对象,
在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的
*/
// if (!event) {
// event = window.event;
// }
//解决事件对象兼容性问题
event = event || window.event;
/*
clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标
*/
var x = window.event.clientX;
var y = window.event.clientY;
// alert("x = " + x + " , y = " + y);
// 在showMsg中显示鼠标的坐标
showMsg.innerHTML = "x = " + x + " , y = " + y;
}
}
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
div随鼠标事件移动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
/* 开启box1的绝对定位 */
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 使div可以跟随鼠标移动
// 获取box1
var box1 = document.getElementById("box1");
// 绑定鼠标移动事件
document.onmousemove = function (event) {
// 解决兼容问题
event = event || window.event;
// 获取滚动条滚动的距离
/*
chrome认为浏览器的滚动条是body的,可以通过body.scrollTop来获取
火狐等浏览器认为浏览器的滚动条是html的
*/
// var st = document.body.scrollTop;
// var st = document.documentElement.scrollTop;
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
// 获取到鼠标的坐标
/*
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
div的偏移量是相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标
但是这两个属性在IE8中不支持,所以如果需要兼容IE8,则不要使用
*/
var left = event.clientX;
var top = event.clientY;
// 设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
}
}
</script>
</head>
<body style="height: 1000px; 2000px;">
<div id="box1"></div>
</body>
</html>
事件的冒泡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1 {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*
事件的冒泡(Bubble)
所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
在开发中冒泡一般都是有用的,如果不希望发生事件冒泡可以通过对象来取消冒泡
*/
//为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function (event) {
event = event || window.event;
alert("我是span的单击响应函数");
// 取消冒泡
// 可以将事件对象的cancelBubble设置为true,即可取消冒泡
event.cancelBubble=true;
};
//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function (event) {
event = event || window.event;
alert("我是div的单击响应函数");
event.cancelBubble=true;
};
//为body绑定一个单击响应函数
document.body.onclick = function () {
alert("我是body的单击响应函数");
};
}
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是一个span</span>
</div>
</body>
</html>
事件的委派
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function () {
var ul = document.getElementById("ul");
// 点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascrigt:;' class= 'link' >新建的超链接</a>";
//将li添加到ul中
ul.appendChild(li);
};
/*
为每一个超链接都绑定一个单击响应函数
这里我们为每一个超链接都绑定了一个单击响应函数,这种操作比较麻烦
而且这些操作只能为已有的超链接设置事件,而新添加的超链接必须重新绑定
*/
// 获取所有a
var allA = document.getElementsByTagName("a");
// 遍历
// for (var i = 0; i < allA.length; i++) {
// allA[i].onclick = function () {
// alert("我是a的单击响应函数!!!")
// }
// }
/*
我们希望,只绑定一次事件,既可应用到多个的元素上,即使元素是后添加的
我们可以尝试将其绑定给元素的共同的祖先元素
事件的委派
指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
*/
// 为ul绑定一个单击响应函数
ul.onclick = function (event) {
event = event || window.event;
// alert("我是ul的单击响应函数");
/*
target
event中的target表示触发事件的对象
*/
// 如果触发的事件是我们期望的元素就执行,否则不执行
if (event.target.className == "link") {
alert("我是ul的单击响应函数");
}
}
}
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="ul" style="background-color: #bfa;">
<li><a href="javascript: ;" class="link">超链接一</a></li>
<li><a href="javascript: ;" class="link">超链接二</a></li>
<li><a href="javascript: ;" class="link">超链接三</a></li>
</ul>
</body>
</html>
事件的绑定
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function () {
/*
点击按钮以后弹出一个内容
*/
//获取按钮对象
var btn01 = document.getElementById("btn01");
/*
使用对象.事件 = 函数 的形式绑定响应函数
它只能同时为一个元素的一个事件绑定一个响应元素
不能绑定多个,如果绑定了多个,则后边会覆盖掉前面的
*/
// //为btn01绑定一个单击响应函数
// btn01.onclick = function () {
// alert(1);
// };
// //为btn01绑定第二个响应函数
// btn01.onclick = function () {
// alert(2);
// };
/*
addEventListener()
通过这个方法也可以为元素绑定响应函数
参数:
1.事件的字符串,不要on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
*/
// btn01.addEventListener("click", function () {
// alert(1);
// }, false);
// btn01.addEventListener("click", function () {
// alert(2);
// }, false);
/*
attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数:
1.事件的字符串,要on
2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数,
不同的是它是后绑定先执行,执行顺序和addEventListener()相反
*/
// btn01.attachEvent("onclick", function () {
// alert(1);
// });
// btn01.attachEvent("onclick", function () {
// alert(2);
// });
bind(btn01, "click", function () {
alert(1);
});
bind(btn01, "click", function () {
alert(2);
});
/*
定义一个函数,用来为指定元素绑定响应函数
addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一两个方法this
参数:
obj要绑定事件的对象
eventStr事件的字符串(不要on)
callback回调函数
*/
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, false);
} else {
/*
this是由调用方式决定的
callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on" + eventStr, function () {
// 在匿名函数中调用回调函数
callback.call(obj);
});
}
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
事件的传播
<!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");
/*
事件的传播
关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,
然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,
然后在向内传播给后代元素
W3C综合了两个公司的方案,将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
IE8及以下的浏览器中没有捕获阶段
*/
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, false);
} 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>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function () {
//分别为两个按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
btn01.onclick = function () {
alert(1);
}
btn02.onclick = function () {
alert(2);
}
//设置btn01对鼠标按下相关的事件进行捕获
//当调用一个元素的setCapture()方法以后,这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
if (btn01.setCapture) {
btn01.setCapture();
}
/*
拖拽box1元素
拖拽的流程
1.当鼠标在被拖拽元素上按下时,开始拖拽
2.当鼠标移动时被拖拽元素跟随鼠标移动
3.当鼠标松开时,被拖拽元素固定在当前位置
*/
// 获取box1
var box1 = document.getElementById("box1");
// 获取box2
var box2 = document.getElementById("box2");
drag(box1);
drag(box2);
// 为box1绑定一个鼠标按下事件
// 当鼠标在被拖拽元素上按下时,开始拖拽
// box1.onmousedown = function (event) {
// // alert("鼠标按下,开始拖拽~~");
// // 设置box1捕获所有鼠标按下的事件
// /*
// setCapture( )
// 只有IE支持,但是在火狐中调用时不会报错,
// 而如果使用chrome调用,会报错
// */
// // if (box1.setCapture) {
// // box1.setCapture();
// // }
// // box1.setCapture && box1.setCapture();
// // event = event || window.event;
// // //div的偏移量 鼠标.clentX - 元素.offsetLeft
// // //div的偏移量 鼠标.clentY - 元素.offsetTop
// // var ol = event.clientX - box1.offsetLeft;
// // var ot = event.clientY - box1.offsetTop;
// //为document绑定一个onmousemove事件
// // document.onmousemove = function (event) {
// // event = event || window.event;
// // //当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
// // //获取鼠标的坐标
// // var left = event.clientX - ol;
// // var top = event.clientY - ot;
// // //修改box1的位置
// // box1.style.left = left + "px";
// // box1.style.top = top + "px";
// // };
// // //为元素绑定一个鼠标松开事件
// // document.onmouseup = function () {
// // //当鼠标松开时,被拖拽元素固定在当前位置onmouseup
// // //取消document的onmousemove事件
// // document.onmousemove = null;
// // //取消document的onmouseup事件
// // document.onmouseup = null;
// // //当鼠标松开时,取消对事件的捕获
// // // if(box1.releaseCapture){
// // // box1.releaseCapture();
// // // }
// // box1.releaseCapture && box1.releaseCapture();
// // };
// // /*
// // 当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
// // 此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
// // 如果不希望发生这个行为,则可以通过return false来取消默认行为
// // 但是这招对IE8不起作用
// // */
// // return false;
// };
/*
提取一个专门用来设置拖拽的函数
参数:开启拖拽的元素
*/
function drag(obj) {
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
obj.onmousedown = function (event) {
// alert("鼠标按下,开始拖拽~~");
// 设置box1捕获所有鼠标按下的事件
/*
setCapture( )
只有IE支持,但是在火狐中调用时不会报错,
而如果使用chrome调用,会报错
*/
if (obj.setCapture) {
obj.setCapture();
}
// obj.setCapture && obj.setCapture();
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function (event) {
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
obj.style.left = left + "px";
obj.style.top = top + "px";
};
//为元素绑定一个鼠标松开事件
document.onmouseup = function () {
//当鼠标松开时,被拖拽元素固定在当前位置onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//当鼠标松开时,取消对事件的捕获
if (obj.releaseCapture) {
obj.releaseCapture();
}
// obj.releaseCapture && obj.releaseCapture();
};
/*
当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
如果不希望发生这个行为,则可以通过return false来取消默认行为
但是这招对IE8不起作用
*/
return false;
};
}
}
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
<button id="btn01">按钮01</button>
<button id="btn02">按钮02</button>
</body>
</html>
滚轮事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function () {
//获取id为box1的div
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标滚轮滚动的事件
/*
onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,
但是火狐不支持该属性
在火狐中需要使用DOMMouseScroll来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
*/
// function fun() {
// alert("滚了~~");
// }
// box1.onmousewheel = fun;
// bind(box1, "DOMMouseScroll", fun);
box1.onmousewheel = function (event) {
/*
当鼠标滚轮向下滚动时,box1变长
当滚轮向,上滚动时,box1变短
*/
// alert("滚了~~");
event = event || window.event;
//判断鼠标滚轮滚动的方向
/*
event.wheelDelta 可以获取鼠标滚轮滚动的方向
向上滚120向下滚-120
wheelDelta这个值我们不看大小,只看正负
wheelDelta这个属性火狐中不支持
在火狐中使用event.detail来获取滚动的方向
向上滚-3向下滚3
*/
// alert(event.wheelDelta);
// alert(event.detail);
//判断鼠标滚轮滚动的方向
if (event.wheelDelta > 0 || event.detal < 0) {
// alert("向上滚");
box1.style.height = box1.clientHeight - 100 + "px";
} else {
// alert("向下滚");
box1.style.height = box1.clientHeight + 100 + "px";
}
};
bind(box1, "DOMMouseScroll", box1.onmousewheel);
/*
当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,
这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
使用addEventListener( )方法绑定响应函数,取消默认行为时不能使用return false
需要使用event来取消默认行为event.preventDefault()
但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错
*/
event.preventDefault && event.preventDefault();
return false;
}
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>
键盘事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*
键盘事件:
onkeydown
按键被按下
对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快
这种设计是为了防止误操作的发生。
onkeyup
按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象
*/
document.onkeydown = function (event) {
event = event || window.event;
/*
可以通过keyCode来获取按键的编码
通过它可以判断哪个按键被按下
除了keyCode,事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
这个三个用来判断alt、ctrl和shift是否被按下
如果按下则返回true,否则返回false
*/
// console.log(event.keyCode);
// 判断y是否被按下
// if (event.keyCode == 89) {
// console.log("y被按下了");
// }
//判断y和ctr1是否同时被按下
if (event.keyCode === 89 && event.ctrlKey) {
console.log("ctrl和y都被按下了");
}
};
// document.onkeyup = function () {
// console.log("按键松开了");
// };
//获取input
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function (event) {
event = event || window.event;
// console.log("按键被按下了");
// 数字48 - 57
// 使文本框中不能输入数字
if (event.keyCode >= 48 && event.keyCode <= 57) {
//在文本框中输入内容,属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为,则输入的内容,不会出现在文本框中
return false;
}
}
}
</script>
</head>
<body>
<!-- <div style=" 100px; height: 100px; background-color: red;"></div> -->
<input type="text" />
</body>
</html>
键盘移动div
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
//使div可以根据不同的方向键向不同的方向移动
/*
按左键,div向左移
按右键,div向右移
*/
//为document绑定一个按键按下的事件
document.onkeydown = function (event) {
event = event || window.event;
/*
37左
38上
39右
40下
*/
// console.log(event.keyCode);
// 定义一个变量,来表示移动的速度
var speed = 10;
//当用户按了ctrl以后,速度加快
if (event.ctrlKey) {
speed = 50;
}
switch (event.keyCode) {
case 37:
// alert("向左"); left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
// alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
// alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
// alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
};
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>