初识JavaScript (十四)事件
- 1 事件对象的捕获
- 2 事件对象属性 type
- 3 事件对象属性 altKey,shiftKey、ctrlKey
- 4 事件对象属性-keyCode
- 5 事件对象属性-clientX、clientY、pageX、pageY
- 6 事件对象属性offsetX、offsetY、screenX、screenY
- 7 事件对象属性-currentTarget
- 8 事件对象属性-target
- 9 事件对象属性-target的兼容问题
- 10 事件对象属性-bubbles
- 11 事件对象属性-key
- 12 事件对象属性-eventPhase
- 13 事件对象属性-button
- 14 事件对象常用方法-preventDefault
- 15 事件对象常用方法-stopPropagation
- 16 取消默认右键菜单行为
- 17 四方向移动小球练习
- 18 鼠标拖动元素练习
- 19 鼠标拖动元素练习
1 事件对象的捕获
事件对象:event object
当文档中触发了一个事件,那么会产生一个针对该事件的事件对象。该事件对象由js引擎底层产生。
事件对象是一个非常重要的对象。事件对象中包含了事件的所有的信息。比如:鼠标点击的事件对象中,就包含了鼠标点击的坐标。
按键事件对象中就保存了按键的名称,按键的键值,可以获得用户按下的是哪个按键。
事件对象的捕获:对于谷歌火狐等浏览器,该事件对象是通过事件处理函数的实参传入的。直接给事件处理函数添加一个形参即可以捕获事件对象。 IE低版本(IE8及其以前的版本)不支持使用形参来接收事件对象。需要直接 使用window.event 方式来获取当前事件对象。
删除线:不建议使用的方式,可能存在不稳定,不安全的情况。出现了更好的替代的方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 50px;
height: 50px;
background-color: red;
border: solid 1px;
}
</style>
</head>
<body>
<div id="box">谷歌火狐测试</div>
<div id="ie">IE测试</div>
<div id="all">兼容测试</div>
<script>
var box = document.getElementById ("box");
//事件处理函数添加形参e,用来接收底层传入的事件对象实参。
box.onclick = function (e) {
console.log (e);
};
var ieDiv = document.getElementById("ie");
ieDiv.onclick = function () {
console.log (window.event);
};
//捕获事件对象的兼容写法-1
var div = document.getElementById("all");
div.onclick = function (e) {
e = e ? e :window.event;
console.log (e);
}
//捕获事件对象的兼容写法-2
div.onclick = function (e) {
e = e || window.event;
console.log (e);
}
</script>
</body>
</html>
2 事件对象属性 type
事件对象属性:type
是string类型的数据,返回的是事件的名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 150px;
height: 150px;
background-color: red;
border: solid 1px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var div = document.getElementById("box");
div.onclick = function (e) {
e = e || window.event;
console.log (e.type);//click
console.log (typeof e.type);//string
}
div.ondblclick = function (e) {
e = e || window.event;
console.log (e.type);//dblclick
}
div.onmouseover = function (e) {
e = e || window.event;
console.log (e.type);//mouseover
}
</script>
</body>
</html>
3 事件对象属性 altKey,shiftKey、ctrlKey
事件对象属性:altKey、shiftKey、ctrlKey
altKey、shiftKey、ctrlKey 判断三个功能键是否被按下。
返回的值是布尔值。
如果按下了,返回true,否则返回false。
补充:一般情况下,按键事件都是给整个文档添加。
onkeydown : 可以响应所有的按键被按下。
onkeypress:不能响应功能键。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.onkeydown = function (e) {
e = e || window.event;
console.log (e.altKey);
console.log (e.shiftKey);
console.log (e.ctrlKey);
}
/*document.onkeypress = function (e) {
e = e || window.event;
console.log (e.altKey);
console.log (e.shiftKey);
console.log (e.ctrlKey);
}*/
//如果是多个功能键被按下
document.onkeydown = function (e) {
e = e || window.event;
if(e.altKey && e.ctrlKey){//两个按键同时被按下。
console.log ("alt+ctrl 同时被按下");
}
}
</script>
</body>
</html>
4 事件对象属性-keyCode
重要:
事件对象属性:keyCode
keyCode属性:
1:针对的按键的事件。
2:keyCode 返回的是按下的按键的键码值。
3:键盘中的每一个键,都有一个唯一的键码值。通过键码值可以知道按下的是哪个键。
常用键码值:
0:48
a:65
方向键:左上右下:37,38,39,40
enter:13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.onkeydown = function (e) {
e = e || window.event;
console.log (e.keyCode);
}
</script>
</body>
</html>
5 事件对象属性-clientX、clientY、pageX、pageY
事件对象属性:
clientX、clientY:
鼠标点击的点距离浏览器窗口原点的x轴和y轴的距离。
pageX、pageY
鼠标点击的点距离页面原点的x轴和y轴的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
document.onclick = function (e) {
e = e || window.event;
console.log ("cx = " + e.clientX);
console.log ("cy = " + e.clientY);
console.log ("px = " + e.pageX);
console.log ("py = " + e.pageY);
}
</script>
</body>
</html>
6 事件对象属性offsetX、offsetY、screenX、screenY
事件对象属性:
offsetX、offsetY:
鼠标点击的点距离事件响应对象的左边界的距离和上边界的距离。
screenX、screenY:
鼠标点击的点距离屏幕左边界的距离和屏幕上边界的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 150px;
height: 150px;
background-color: red;
border: solid 1px;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function (e) {
e = e || window.event;
console.log ("offsetX = " + e.offsetX);
console.log ("offsetY = " + e.offsetY);
}
document.onclick = function (e) {
e = e || window.event;
console.log ("screenX = " + e.screenX);
console.log ("screenY = " + e.screenY);
}
</script>
</body>
</html>
7 事件对象属性-currentTarget
事件对象属性:currentTarget
currentTarget:是一个对象。是当前正在响应事件的元素对象。 和在函数中的this是一致的对象。
而且该对象一定是绑定了事件处理函数的。
currentTarget === this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>11111111</li>
<li>222222222</li>
<li>33333333</li>
<li>4444444444</li>
<li>555555555</li>
</ul>
<script>
document.onclick = function (e) {
e = e|| window.event;
console.log (e.currentTarget);
}
/* var div = document.createElement("div");
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
div.onclick = function (e) {
e = e || window.event;
console.log (e.currentTarget);
console.log (this);
console.log (this === e.currentTarget);
}
document.body.appendChild(div);
var ul = document.querySelector("ul");
ul.onclick = function (e) {
e = e || window.event;
console.log (e.currentTarget);
console.log (this);
}*/
</script>
</body>
</html>
8 事件对象属性-target
事件对象属性:target
target对象:是最上层的,第一个接收到事件的对象,不一定绑定了事件处理函数,因为事件冒泡会将事件传递给底层的父元素。
target 和 currentTarget的区别:
1:currentTarget 对象一定绑定了事件处理函数。target 不一定绑定了。
2:currentTarget 对象在事件处理函数中,等价于this。target不一定等价于this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>11111111</li>
<li>222222222</li>
<li>33333333</li>
<li>4444444444</li>
<li>555555555</li>
</ul>
<script>
/*document.onclick = function (e) {
e = e|| window.event;
console.log (e.target);
}*/
var div = document.createElement("div");
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
div.onclick = function (e) {
e = e || window.event;
console.log (e.target);
console.log (e.currentTarget === e.target);
}
document.body.appendChild(div);
var ul = document.querySelector("ul");
ul.onclick = function (e) {
e = e || window.event;
console.log (e.target);
console.log (this);
}
</script>
</body>
</html>
9 事件对象属性-target的兼容问题
target对象具有兼容性问题。
IE8及其以前的版本不支持该属性。
使用事件对象的属性:srcElement 替代target使用。
e.srcElement:在各个浏览器中都可以使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var div = document.createElement("div");
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
div.onclick = function (e) {
e = e || window.event;
console.log (e.srcElement);
}
document.body.appendChild(div);
//兼容写法
div.onclick =function (e) {
e = e || window.event;
//优先使用的放到前面。
var target = e.target || e.srcElement;
console.log (target);
}
</script>
</body>
</html>
10 事件对象属性-bubbles
事件对象属性:bubbles
该属性用来检测事件是否支持事件冒泡
如果支持:返回true,否则返回false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div");
/*div.onclick = function (e) {
e = e || window.event;
console.log (e.bubbles);//true
}*/
/*div.ondblclick = function (e) {
e = e || window.event;
console.log (e.bubbles);//true
}*/
/*div.onmouseover = function (e) {
e = e || window.event;
console.log (e.bubbles);//true
}*/
/*div.onmouseout = function (e) {
e = e || window.event;
console.log (e.bubbles);//true
}*/
/*div.onmouseenter = function (e) {
e = e || window.event;
console.log (e.bubbles);//false
}*/
/* div.onmouseleave = function (e) {
e = e || window.event;
console.log (e.bubbles);//false
}*/
/*div.onmousedown = function (e) {
e = e || window.event;
console.log (e.bubbles);//true
}*/
/*div.onmouseup = function (e) {
e = e || window.event;
console.log (e.bubbles);//true
}*/
</script>
</body>
</html>
11 事件对象属性-key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.onkeydown = function (e) {
e = e || window.event;
console.log (e.key);
}
</script>
</body>
</html>
12 事件对象属性-eventPhase
事件对象属性:eventPhase
该属性只有三个值[1,2,3]
2: 当前事件直接作用到的元素对象捕获的该事件对象的 eventPhase 的值。
1:因为事件流的事件捕获,导致当前事件作用到的对象的父级对象捕获到的事件对象的 eventPhase 的值。
3:因为事件流的事件冒泡,导致当前事件作用到的对象的父级对象捕获到的事件对象的 eventPhase 的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border-radius: 50%;
padding-top: 0.1px;
margin: 50px auto;
}
#red{
width: 300px;
height: 300px;
background-color: red;
}
#green{
width: 200px;
height: 200px;
background-color: green;
}
#blue{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="red">
<div id="green">
<div id="blue">
</div>
</div>
</div>
<script>
var red = document.getElementById("red");
var green = document.getElementById("green");
var blue = document.getElementById("blue");
var flag = true;
red.addEventListener("click",function (e) {
e = e || window.event;
console.log ("red = " + e.eventPhase);
},flag);
green.addEventListener("click",function (e) {
e = e || window.event;
console.log ("green = " + e.eventPhase);
},flag);
blue.addEventListener("click",function (e) {
e = e || window.event;
console.log ("blue = " + e.eventPhase);
},flag);
</script>
</body>
</html>
13 事件对象属性-button
事件对象属性:button
和鼠标事件有关。button是一个整数值,用来代表点击了鼠标的哪个键。
button的取值范围[0,1,2]
0: 鼠标左键
1:鼠标中键
2:鼠标右键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>
</div>
<script>
var div = document.querySelector("div");
div.onmousedown = function (e) {
e = e || window.event;
console.log (e.button);
}
</script>
</body>
</html>
14 事件对象常用方法-preventDefault
重要:
事件对象常用方法:preventDefault()
preventDefault: 阻止默认行为。
IE低版本不支持该方法。
IE下阻止默认行为的实现方式:事件对象.returnValue = false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" id="link">百度一下</a>
<script>
var link = document.getElementById("link");
link.onclick = function (e) {
e = e || window.event;
//组织a标签的默认跳转行为。
// e.preventDefault();
//兼容写法
//是否支持 preventDefault 方法,支持,调用,不支持。 执行:e.returnValue = false
e.preventDefault ? e.preventDefault() : e.returnValue = false;
document.location.href = "http://www.163.com";
}
</script>
</body>
</html>
15 事件对象常用方法-stopPropagation
事件对象常用方法:stopPropagation:
stopPropagation:阻止事件冒泡的。
e.stopPropagation()
stopPropagation:IE8及其以前版本不支持。如果要实现阻断冒泡行为。
实现方法:事件对象.cancelBubble = true;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border-radius: 50%;
padding-top: 0.1px;
margin: 50px auto;
}
#red{
width: 300px;
height: 300px;
background-color: red;
}
#green{
width: 200px;
height: 200px;
background-color: green;
}
#blue{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="red">
<div id="green">
<div id="blue">
</div>
</div>
</div>
<script>
var green = document.getElementById("green");
var blue = document.getElementById("blue");
var red = document.getElementById("red");
green.onclick = function (e) {
e = e || window.event;
console.log ("green");
//事件到此为止。不会冒泡给父级元素。red
// e.stopPropagation();
//兼容写法
e.stopPropagation ? e.stopPropagation(): e.cancelBubble = true;
}
blue.onclick = function (e) {
e = e || window.event;
console.log ("blue");
//事件到此为止。不会冒泡给父级元素 red green。
// e.stopPropagation();
e.stopPropagation ? e.stopPropagation(): e.cancelBubble = true;
}
red.onclick = function (e) {
e = e || window.event;
console.log ("red");
}
</script>
</body>
</html>
16 取消默认右键菜单行为
取消默认右键菜单行为:
oncontextmenu : 右键单击菜单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.oncontextmenu = function (e) {
e = e || window.event;
console.log (e.button);//2
//阻止默认行为
e.preventDefault ? e.preventDefault():e.returnValue = false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
background-color: #ccc;
width: 150px;
position: fixed;
left: 0;
top: 0;
display: none;
padding-left: 30px;
}
li {
line-height: 2.5em;
background-color: #eee;
padding-left: 10px;
}
</style>
</head>
<body>
<ul id="menu">
<li>复制</li>
<li>剪切</li>
<li>粘贴</li>
</ul>
<!--
1: ul>li样式
2:取消右键的默认行为。
3:获得当前鼠标点击的点的坐标。将ul设置为绝对定位,设置left和top属性。设置为可见。
4:给li添加mouseover事件。设置背景色。添加mouseout事件。还原背景色。
5:给文档添加单击事件,设置ul不可见。
-->
<script>
var menu = document.getElementById("menu");
//右键菜单
document.oncontextmenu = function (e) {
e = e || window.event;
//阻止默认行为
e.preventDefault ? e.preventDefault(): e.returnValue = false;
//获得当前点击坐标。相对于浏览器窗口的。
var left = e.clientX;
var top = e.clientY;
//设置menu可见
menu.style.display = "block";
//设置menu的坐标
menu.style.left = left + "px";
menu.style.top = top + "px";
}
//左键点击任意位置,menu消失
document.onclick = function () {
menu.style.display = "none";
}
//给每个li添加鼠标移入和移出事件
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.style.backgroundColor = "orange";
};
lis[i].onmouseout = function () {
this.style.backgroundColor = "#eee";
};
}
</script>
</body>
</html>
17 四方向移动小球练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建div 设置为圆设置定位
function initBall() {
var ball = document.createElement ("div");
ball.style.width = "200px";
ball.style.height = "200px";
ball.style.position = "fixed";
ball.style.left = "0";
ball.style.top = "0";
ball.style.border = "solid 1px";
ball.style.borderRadius = "50%";
ball.style.backgroundColor = "red";
return ball;
}
//如果使用了内部或者是外部的样式,获得内部或者是外部的样式,要使用兼容写法。
//匿名立即执行函数
(function () {
//得到一个球形的div
var ball = initBall ();
//添加到body
document.body.appendChild (ball);
//四个方向键对应的keyCode值。
const LEFT = 37;
const UP = 38;
const RIGHT = 39;
const DOWN = 40;
//W A S D 四个字母的keyCode值。
const W_CODE = 87;
const A_CODE = 65;
const S_CODE = 83;
const D_CODE = 68;
//获得球的直径
const DIAMETER = parseInt (ball.style.width);
//获得浏览器窗口的宽高
var winWidth = document.documentElement.clientWidth;
var winHeight = document.documentElement.clientHeight;
//球移动的速度
const SPEED = 50;
document.onkeydown = function (e) {
e = e || window.event;
var code = e.keyCode;
//获得球的坐标
var left = parseInt (ball.style.left);
var top = parseInt (ball.style.top);
//修改坐标
switch (code) {
case LEFT:
case A_CODE:
left = (left -= SPEED) < 0 ? 0 : left;
break;
case UP:
case W_CODE:
top = (top -= SPEED) < 0 ? 0 : top;
break;
case RIGHT:
case D_CODE:
left = (left += SPEED) > winWidth - DIAMETER ? winWidth - DIAMETER : left;
break;
case DOWN:
case S_CODE:
top = (top += SPEED) > winHeight - DIAMETER ? winHeight - DIAMETER : top;
break;
}
//设置修改后的坐标。
ball.style.left = left + "px";
ball.style.top = top + "px";
}
}) ();
</script>
</body>
</html>
18 鼠标拖动元素练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background-color: chocolate;
position: fixed;
left: 0;
top: 0;
border: solid 1px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var div = document.getElementById ("box");
//给div添加单击事件
div.onmousedown = function (e) {
//获得当前点击的点距离div的左边界和上边界的距离
e = e || window.event;
var disX = e.offsetX;
var disY = e.offsetY;
//div被点中之后添加鼠标移动事件//
//该事件只要鼠标移动,就不断的被触发。
document.onmousemove = function (ev) {
ev = ev || window.event;
//获得鼠标距离浏览器窗口的距离
var left = ev.clientX;
var top = ev.clientY;
div.style.left = (left - disX) + "px";
div.style.top = (top - disY) + "px";
}
}
//鼠标抬起
div.onmouseup = function () {
document.onmousemove = null;
}
</script>
</body>
</html>
19 鼠标拖动元素练习
针对鼠标的所有的事件:
onclick : 鼠标单击事件 :支持冒泡
ondblclick:鼠标双击事件(两次单击事件):支持冒泡
onmouseover:鼠标进入悬浮事件:支持冒泡
onmouseout:鼠标离开事件:支持冒泡
onmouseenter:鼠标进入事件:不支持冒泡
onmouseleave:鼠标离开事件:不支持冒泡
onmousedown:鼠标按下事件:支持冒泡
onmouseup:鼠标抬起事件:支持冒泡
onmousedown + onmouseup == onclick
onmousemove: 鼠标移动事件:支持冒泡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
</script>
</body>
</html>