目录
一、事件的介绍
1.事件是什么
简单来说,事件就是用户和浏览器之间的交互行为
比如:点击鼠标、鼠标移动、关闭窗口......
2.事件的对象
在事件对象中封禁了当前事件相关的一切信息 比如:鼠标的坐标 键盘哪个建被按下 鼠标滚轮滚动的方向等等,
当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递进响应函数
这里举个例子:
这里涉及到 onmousemove事件,该事件会在鼠标移动时触发
<!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>Document</title>
<style>
#area{
width: 200px;
height: 100px;
border: 2px solid black;
}
#show{
width: 200px;
height: 50px;
margin-top: 20px;
border: 2px solid black;
}
</style>
<script>
window.onload=function(){
var area=document.getElementById("area");
var show=document.getElementById("show");
//onmousemove 该事件会在鼠标移动时触发
//这里的event即用来传递事件的对象,用来获取触发该事件时,鼠标的位置
area.onmousemove=function(event){
//clientX可以获取鼠标指针的水平位置 clientY 垂直位置
var x=event.clientX;
var y=event.clientY;
show.innerHTML="x="+x+",y="+y;
}
}
</script>
</head>
<body>
<div id="area"></div>
<div id="show"></div>
</body>
</html>
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>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: aqua;
}
#sp{
background-color: aquamarine;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
box1.onclick=function(event){
alert("我是div")
}
var sp=document.getElementById("sp")
sp.onclick=function(event){
alert("我是span")
}
document.body.onclick=function(event){
alert("我是body")
}
}
</script>
</head>
<body>
<div id="box1">我是div
<span id="sp">我是span</span>
</div>
</body>
</html>
这里只要点击子元素span,同样div body的事件也会触发。
对于日常开发中,大部分冒泡是有用的,如果不希望发生事件冒泡也可以取消冒泡,
可以将事件对象的cancleBubble设置为true,即可取消冒泡。
<!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>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: aqua;
}
#sp{
background-color: aquamarine;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
box1.onclick=function(event){
alert("我是div")
//可以将事件对象的cancleBubble设置为true,即可取消冒泡
event.cancelBubble=true;
}
var sp=document.getElementById("sp")
sp.onclick=function(event){
alert("我是span")
event.cancelBubble=true;
}
document.body.onclick=function(event){
alert("我是body")
event.cancelBubble=true;
}
}
</script>
</head>
<body>
<div id="box1">我是div
<span id="sp">我是span</span>
</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>Document</title>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
var u=document.getElementById("u");
btn.onclick=function(){
var li=document.createElement("li");
li.innerHTML="<li id='l'><a href='#' class='link'>新超链接</a>";
u.appendChild(li)
}
//为所有的a标签绑定单击响应函数
u.onclick=function(event){
//为了只保证点到a标签时进行响应
//target表示事件触发的对象
//alert(event.target)
if(event.target.className=="link"){
alert("我是ul的响应事件")
}
}
}
</script>
</head>
<body>
<button id="btn">添加超链接</button>
<ul id="u">
<li id="l"><a href="javascript:;" class="link">超链接</a></li>
<li id="l"><a href="javascript:;" class="link">超链接</a></li>
<li id="l"><a href="javascript:;" class="link">超链接</a></li>
</ul>
</body>
</html>
这里点击任何一个超链接,都会触发ul的响应事件,这里就不用再一个个区给a标签绑定了。
4.事件的绑定
方法一:
使用 对象.事件 = 函数 的形式绑定响应函数,
但是有个缺点它只能同时为一个元素的一个事件绑定一个响应函数,
不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
例如:
btn01.onclick = function(){
alert(1);
};
方法二:
利用addEventListener()方法
- 通过这个方法也可以为元素绑定响应函数
- 参数:
1.事件的字符串,不要on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
例如:
btn01.addEventListener("click",function(){
alert(1);
},false);
5.事件的传播
这里了解即可
关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,
然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,
然后在向内传播给后代元素
W3C综合了两个公司的方案,将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
二、常用的事件
1.鼠标事件
这里有三个常用的属性
鼠标按下 onmousedown
鼠标移动 元素跟着移动 onmousemove
鼠标松开 元素固定在当前位置 onmouseup
与之相关的方法:
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
pageX和pageY
可以获取鼠标相对于当前页面的坐标
screenX和screenY
获取鼠标位置相对于屏幕左上角的坐标
offertX和offerY
获得鼠标位置与目标节点padding的距离
下面是利用鼠标事件的方法做的一个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>Document</title>
</head>
<style>
#box1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
#box2{
height: 100px;
width: 100px;
background-color: rgb(217, 255, 0);
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script>
/*
拖拽box1元素
1.鼠标按下 onmousedown
2.鼠标移动 元素跟着移动 onmousemove
3.鼠标松开 元素固定在当前位置 onmouseup
*/
window.onload=function(){
var box1=document.getElementById("box1");
// 1.鼠标按下 onmousedown
box1.onmousedown=function(event){
//解决 点击鼠标一直在左上角的问题
//div的偏移量 鼠标.clientX-元素.offsetLeft 鼠标.clientY-元素.offsetTop
var ol=event.clientX-box1.offsetLeft;
var ot=event.clientY-box1.offsetTop;
// 2.鼠标移动 元素跟着移动 onmousemove
document.onmousemove=function(event){
var left=event.clientX-ol;
var top=event.clientY-ot;
box1.style.left=left+"px";
box1.style.top=top+"px";
}
// 3.鼠标松开 元素固定在当前位置 onmouseup
document.onmouseup=function(){
//取消document.onmousemove事件
document.onmousemove=false;
//取消document.onmouseup事件
document.onmouseup=false;
}
//当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容
//此时会导致拖拽功能异常,可以通过return false来取消默认行为
return false;
}
}
</script>
<body>
这是一段文字
<div id="box1" ></div>
<div id="box2" ></div>
</body>
</html>
2.滚轮事件
常用的方法:
onwheel 获取滑轮滚动事件
与之相关的方法:
wheelDelta 可以获取鼠标滚轮滚动的方向(火狐使用detail)
它会返回一个值,这个值不看大小,只看正负
获取的正值往上 负值往下
下面是一个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>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
//onwheel获取滑轮滚动事件
box1.onwheel=function(event){
//wheelDelta 获取的正值往上 负值往下
//火狐使用detail
if(event.wheelDelta>0){
box1.style.height=box1.clientHeight+10+"px";
}else{
box1.style.height=box1.clientHeight-10+"px";
}
//当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动
//这是浏览器的默认行为 如果不希望发生 可以return false取消
return false;
}
}
</script>
</head>
<body style="height: 1000px;">
<div id="box1" ></div>
</body>
</html>
3.键盘事件
键盘事件一般绑定给可以获取到焦点的对象或是document
常用的属性:
onkeydown 按键被按下 一直按事件会连续触发
onkeyup 按键被松开
与之相关的方法:
keycode可以获取按下键盘的编码
altkey ctrlkey shiftkey 可以判断alt ctrl shift是否被按下 若按下返回true反正flase
下面是一个案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
document.onkeydown = function(event){
//判断一个y是否被按下
//判断y和ctrl是否同时被按下
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(event.keyCode);
//数字 48 - 57
//使文本框中不能输入数字
if(event.keyCode >= 48 && event.keyCode <= 57){
//在文本框中输入内容,属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为,则输入的内容,不会出现在文本框中
return false;
}
};
};
</script>
</head>
<body>
<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">
//使div可以根据不同的方向键向不同的方向移动
/*
* 按左键,div向左移
* 按右键,div向右移
* 。。。
*/
window.onload = function(){
//为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
//定义一个变量,来表示移动的速度
var speed = 10;
//当用户按了ctrl以后,速度加快
if(event.ctrlKey){
speed = 500;
}
/*
* 37 左
* 38 上
* 39 右
* 40 下
*/
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>
三、总结
这次我初次接触js事件,跟着视频做了简单的学习,为了防止遗忘做了初步总结,把事件的轮廓做了一个大致的疏通,不足之处还请包涵,后续经过深层次的学习也会对其进行补充。
最新事件知识点已经更新:JS事件总结超详细-思维导图_时雨.`的博客-CSDN博客