事件对象的认识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 事件对象 与事件相关的对象 事件发生后 浏览器会传一个对象给事件处理函数，该对象封装了与该事件相关的信息
document.onclick = function(e) {
/*console.log(e);
console.log(event);*/
var event = e || event; // 兼容IE浏览器的写法
console.log(event);
}
</script>
</body>
</html>
事件对象常用的几个坐标的认识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
height: 2000px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
//事件对象的常用坐标 pageX,pageY;clientX,clientY;screenX,screenY之间的差别
document.onclick = function(e) {
var e = e || event;
/* client 可视区域的坐标 以可视区域的左上点为参照*/
console.log("client" + e.clientX + ":" + e.clientY);
/* page 以文档页面左上角为参考*/
console.log("page" + e.pageX + ":" +e.pageY+":"+(e.pageY - document.documentElement.scrollTop));
// e.pageY = clientY+document.documentElement.scrollTop
//鼠标离电脑屏幕的坐标 以电脑屏幕的左上为参照
console.log(e.screenX+":"+e.screenY);
}
var oDiv = document.querySelector("div");
oDiv.onmousemove = function(e) {
var e = e || event;
console.log(e.offsetX+":"+e.offsetY);
//e.offsetX,e.offsetY是以元素的左上角为参照
}
</script>
</body>
</html>
一个图片跟鼠标的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
width:30px;
position: absolute;
}
</style>
</head>
<body>
<img src="love.jpg" id="oimg" style="display: none;">
</body>
<script type="text/javascript">
var oimg = document.getElementById('oimg');
document.onmousemove = function(e){
oimg.style.display = 'block';
var e = e||window.event;
var x = e.pageX;
var y = e.pageY;
console.log(x)
console.log(y)
oimg.style.left = x - oimg.width/2 + 'px'
oimg.style.top = y - oimg.height/2 + 'px'
}
</script>
</html>
鼠标的button属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">
// document.onmousedown = function(e){
// var e = e||event;
// console.log(e.button);
// //谷歌 火狐 ie高版本(ie9+) 0 左键 1 中键 2 表示右键
// //对于ie8以及以下的版本的浏览器 1 左键 4 中键 2 右键
// }
//一种针对浏览器兼容性作出处理统一的写法
function getButton(e){
//// 针对 谷歌 火狐 ie高版本(ie9+)
if(e){
return e.button;
}else if(window.event){
switch(window.event.button){
case 1:return 0;
case 2:return 2;
case 4:return 1;
}
}
}
document.onmousedown = function(e){
console.log(getButton(e));
}
</script>
</html>
键盘的keycode属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// document.onkeydown = function(e) {
// var e = e || event;
// console.log(e.keyCode);
// //不同按键对应不同键值
// //所有字母按照大写处理
// console.log(e.ctrlKey);
//ctrl键有没有按下
//}
document.onkeypress = function(e) {
var e = e || event;
console.log(e.keyCode);
//enter---->13
//ctrl+enter === 10
// 按enter或ctrl+enter弹出弹窗
if (e.ctrlKey && e.keyCode == 10 || e.keyCode == 13) {
alert("发送");
}
}
</script>
</body>
</html>
事件冒泡的认识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fa {
width: 280px;
height: 280px;
background-color: red;
}
.son {
width: 120px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div class="fa">
<div class="son">aaabbb</div>
</div>
<script type="text/javascript">
// 事件冒泡 window document body body子元素
var fa = document.querySelector(".fa");
var son = document.querySelector(".son");
fa.onclick = function() {
alert("fa");
}
son.onclick = function() {
alert("son");
}
document.body.onclick = function(e) {
e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
//阻止事件冒泡的兼容性写法
alert("body");
}
document.onclick = function(e) {
alert("document");
}
window.onclick = function() {
alert("window");
}
</script>
</body>
</html>
一个阻止事件冒泡案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul {
display: none;
}
</style>
</head>
<body>
<button>显示个人信息</button>
<ul>
<li>姓名: 张学友</li>
<li>职业： 歌手</li>
<li>作品：祝福</li>
</ul>
<script type="text/javascript">
// 点击按钮显示个人信息 点击文档其他地方 隐藏个人信息
var oUL = document.getElementsByTagName("ul")[0];
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(e) {
e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
oUL.style.display = "block";
}
document.onclick = function() {
oUL.style.display = "none";
}
</script>
</body>
</html>
鼠标跟随一串的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
<style type="text/css">
div {
color: green;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="fa fa-leaf" style="left:10px;top:10px"></div>
<div class="fa fa-leaf" style="left:15px;top:20px"></div>
<div class="fa fa-leaf" style="left:20px;top:30px"></div>
<div class="fa fa-leaf" style="left:25px;top:40px"></div>
<div class="fa fa-leaf" style="left:30px;top:50px"></div>
<div class="fa fa-leaf" style="left:35px;top:60px"></div>
<div class="fa fa-leaf" style="left:40px;top:70px"></div>
<div class="fa fa-leaf" style="left:45px;top:80px"></div>
<div class="fa fa-leaf" style="left:50px;top:90px"></div>
<div class="fa fa-leaf" style="left:55px;top:100px"></div>
<script type="text/javascript">
var odivs = document.querySelectorAll('div');
document.onmousemove = function(e){
var e = e||event;
//console.log(e.pageX);
odivs[0].style.left = e.pageX + 'px';
odivs[0].style.top = e.pageY + 'px';
for(var i = odivs.length-1;i>0;i--){
odivs[i].style.left = odivs[i-1].style.left;
odivs[i].style.top = odivs[i-1].style.top;
}
}
</script>
</body>
</html>
网友评论