一.事件的两种绑定方式
// on
绑定
div.onclick = function(){}
解绑
div.onclick=null
// 非on
var fn = function(){}
绑定
div.addEventListener('click', fn);
解绑
div.remove
EventListener('click', fn);
code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件的两种绑定方式</title>
</head>
<body>
<div class="div">12345</div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// on事件
div.onclick = function () {
console.log("点击1");
}
div.onclick = function () {
console.log("点击2");
}
// 只打印"点击2",原因,只能绑定最后一个方法
// 事件的移除
div.onclick = null;
// 非on事件的绑定 *
// addEventListener('事件名', 回调函数, 冒泡方式)
div.addEventListener('click', function() {
console.log("点击1");
});
var fn = function() {
console.log("点击2");
}
div.addEventListener('click', fn);
// 存在重复绑定
// 事件的移除
// removeEventListener('事件名', 回调函数名)
div.removeEventListener('click', fn)
// 注:绑定与移除需要指向同一个方法(地址)
</script>
</html>
二.冒泡和默认事件
- 冒泡: 子级父级都有点击事件时,子级区域点击,子级响应事件,但父级也响应
- 阻止冒泡
sub.onclick = function (ev) {
// 方式1
ev.stopPropagation();
// 方式2
// ev.cancelBubble = true;
console.log("sub click");
}
sup.onclick = function (ev) {
console.log("sup click");
}
- 默认事件: 一些事件存在默认的系统动作,eg:鼠标右键会弹出菜单栏
- 取消默认
sub.oncontextmenu = function (ev) {
// 方式1
// ev.preventDefault();
console.log("sub menu click");
// 方式2
return false;
}
code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>冒泡和默认事件</title>
<style type="text/css">
.sub {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.sup {
width: 200px;
height: 200px;
background-color: orange;
position: relative;
/*position: absolute;
top: 50px;
left: 100px;*/
margin: 50px auto;
}
body {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
<script type="text/javascript">
var sub = document.querySelector('.sub');
var sup = document.querySelector('.sup');
var body = document.querySelector('body');
// 冒泡: 父子级拥有同一的事件,在子级区域触发子级事件,父级也能捕获并响应
sub.onclick = function (ev) {
ev.stopPropagation();
console.log("sub click");
};
sup.onclick = function (ev) {
ev.cancelBubble = true;
console.log("sup click");
};
body.onclick = function (ev) {
// 事件的兼容
// ev = ev | event;
// 点击传过来的是 MouseEvent,存储着鼠标触发事件的一系列信息
console.log(ev);
console.log("body click");
};
// 默认事件: 鼠标右键 oncontextmenu
sub.oncontextmenu = function (ev) {
// ev.preventDefault();
console.log("sub menu click");
};
// 父级取消了默认事件,子级都被取消掉了
body.oncontextmenu = function (ev) {
console.log("body menu click");
return false;
};
</script>
</html>
三.鼠标事件
onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮 onmouseenter
onmouseout：鼠标移开 onmouseleave
oncontextmenu：鼠标右键
鼠标事件ev反馈的鼠标点
ev.clientX | ev.clientY
相当于页面原点(左上角)
code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: orange;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// 双击
div.ondblclick = function () {
console.log("双击了");
}
// 鼠标按下
div.onmousedown = function () {
console.log("按下");
}
// 鼠标抬起
div.onmouseup = function () {
console.log("抬起");
}
// 鼠标移动
div.onmousemove = function (ev) {
// 鼠标在页面中的位置
console.log("x的坐标:", ev.clientX);
console.log("y的坐标:", ev.clientY);
console.log("移动");
}
</script>
</html>
四.键盘事件
onkeydown: 键盘按下
onkeyup: 键盘抬起
// 绑定的对象: 对象自身不录入文本,绑给document,自身录入文本(表单标签),绑给自身
ev.keyCode
code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: red;
/*margin: 50px auto;*/
position: absolute;
top: 0;
left: 100px;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// 操作一般标签,键盘事件绑定给document
// 表单标签(可以录入文本),键盘事件绑定给表单标签
document.onkeydown = function (ev) {
// console.log(ev.keyCode);
switch(ev.keyCode) {
case 37:
console.log("左");
div.style.left = div.offsetLeft - 3 + "px";
break;
case 38:
console.log("上");
div.style.top = div.offsetTop - 3 + "px";
break;
case 39:
console.log("右");
div.style.left = div.offsetLeft + 3 + "px";
break;
case 40:
console.log("下");
div.style.top = div.offsetTop + 3 + "px";
break;
}
}
</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>键盘控制平滑运动</title>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 120px;
left: 100px;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// 能否向左|右|上|下运动
var l_able = false;
var t_able = false;
var r_able = false;
var b_able = false;
setInterval(function () {
// l_able为假,则后者短路,可以实现if的简写
l_able && (div.style.left = div.offsetLeft - 3 + 'px'); // 左
t_able && (div.style.top = div.offsetTop - 3 + 'px'); // 上
if (r_able == true) {
div.style.left = div.offsetLeft + 3 + 'px'; // 右
}
b_able && (div.style.top = div.offsetTop + 3 + 'px'); // 下
}, 16);
document.onkeydown = function (ev) {
switch(ev.keyCode) {
case 37: l_able = true; break;
case 38: t_able = true; break;
case 39: r_able = true; break;
case 40: b_able = true; break;
}
};
document.onkeyup = function (ev) {
console.log(ev);
switch(ev.keyCode) {
case 37: l_able = false; break;
case 38: t_able = false; break;
case 39: r_able = false; break;
case 40: b_able = false; break;
}
};
</script>
</html>
五.表单事件
onfocus：获取焦点
onblur：失去焦点
onselect：文本被选中
oninput：值改变,一直触发
onchange：值改变，且需要在失去焦点后才能触发
onsubmit：表单默认提交事件,附属于form
code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表单事件</title>
</head>
<body>
<form action="">
<input type="text" name="usr">
<button type="submit">提交</button>
</form>
<div></div>
</body>
<script type="text/javascript">
var form = document.querySelector('form');
var ipt = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
ipt.onselect = function () {
console.log("文本被选中了");
}
// 值改变就触发
ipt.oninput = function () {
console.log("值在改变");
div.innerText = this.value;
}
// 键盘抬起触发
ipt.onkeyup = function () {
console.log("值在改变");
div.innerText = this.value;
}
// 丢失焦点触发
ipt.onchange = function () {
console.log("值在改变");
div.innerText = this.value;
}
// form的专有事件
form.onsubmit = function () {
console.log("提交");
return false;
}
</script>
</html>
六、文档事件
-
文档事件由window调用
onload：页面加载成功
onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意
code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文档事件</title>
<!-- 代码自身至下解析 -->
<script type="text/javascript">
var div = document.querySelector('div');
console.log(div); // null
</script>
<script type="text/javascript">
// 文档加载完毕,触发
window.onload = function () {
var div = document.querySelector('div');
console.log(div);
}
</script>
</head>
<body>
<div class="div"></div>
</body>
<script type="text/javascript">
window.onbeforeunload = function () {
return false;
}
</script>
</html>
七、图片事件
onerror：图片加载失败
code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图片事件</title>
</head>
<body>
<img src="img/001.png" alt="">
</body>
<script type="text/javascript">
var img = document.querySelector('img');
img.onerror = function () {
console.log("图片加载失败了");
}
</script>
</html>
八、页面事件
onscroll：页面滚动
onresize：页面尺寸调整
window.scrollY：页面下滚距离
