关于js事件部分内容
1、事件
在什么时候执行什么事
2、事件的三要素
-
事件源：触发事件的元素
-
事件类型：事件的触发方式
-
事件处理程序：事件触发后要执行的代码
例如：
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击 |
| ondblclick | 鼠标双击 |
| onkeyup | 按下并释放键盘上的一个键时触发 |
| onchange | 文本内容或下拉菜单中的选项发生改变 |
| onfocus | 获得焦点，表示文本框等获得鼠标光标。 |
| onblur | 失去焦点，表示文本框等失去鼠标光标。 |
| onmouseover | 鼠标悬停，即鼠标停留在图片等的上方 |
| onmouseout | 鼠标移出，即离开图片等所在的区域 |
| onload | 网页文档加载事件 |
| onunload | 关闭网页时 |
| onsubmit | 表单提交事件 |
| onreset | 重置表单时 |
鼠标单击事件：
点击我
<p onclick="this.innerhtml = \'你点击成功了\'">点击我</p>
鼠标双击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h5 ondblclick="changetext(this)">请点击该文本</h1>
<script>
function changetext(id) {
id.innerHTML = "我爱学习!";
}
</script>
</body>
</html>
鼠标移除悬停
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:deepskyblue;width:200px;height:100px;"
>
把鼠标移到上面
</div>
<script>
function mOver(obj) {
obj.innerHTML = "你把鼠标移到了上面 ";
}
function mOut(obj) {
obj.innerHTML = "你把鼠标移开了";
}
</script>
</body>
</html>
3、导航样式切换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
#list li {
list-style-type: none;
width: 100px;
height: 50px;
line-height: 50px;
background-color: beige;
text-align: center;
float: left;
}
#list li.current {
background-color: red;
}
#list li a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current">
<a href="javascript:void(0)">首页</a>
</li>
<li>
<a href="javascript:void(0)">HTML</a>
</li>
<li>
<a href="javascript:void(0)">CSS</a>
</li>
<li>
<a href="javascript:void(0)">JavaScript</a>
</li>
<li>
<a href="javascript:void(0)">关于</a>
</li>
<li>
<a href="javascript:void(0)">帮助</a>
</li>
</ul>
</div>
<script>
// 获取所有的 li 标签
var liObjs = document.getElementById("list").getElementsByTagName("li");
// 循环遍历，找到每个 li 中的 a，注册点击事件
for (var i = 0; i < liObjs.length; i++) {
// 每个 li 中的 a
var aObj = liObjs[i].firstElementChild;
aObj.onclick = function() {
// 把这个 a 所在的 li 的所有的兄弟元素的类样式全部移除
for (var j = 0; j < liObjs.length; j++) {
liObjs[j].removeAttribute("class");
}
//当前点击的 a 的父级元素 li(点击的这个 a 所在的父级元素 li)，设置背景颜色
this.parentNode.className = "current";
};
}
</script>
</body>
</html>
事件的绑定
传统的事件绑定法1
<button onclick="show(1)">我是第一个button</button>
<button onclick="show(2)">我是第二个button</button>
<script>
function show(num){
console.log(\'我是传统的事件绑定\'+num);
}
</script>
传统的事件绑定法2
<div id="item">我是div1</div>
<script>
let item1 = document.getElementById(\'item\');
// let item1 = document.querySelector(\'#item\');
item1.onclick = function(){
console.log(\'我是传统的事件绑定\');
}
</script>
调用事件
item1.onclick = function(){ //放在匿名函数中
show(); //undefined
}
优点：兼容性强
缺点：不能绑定多个同类型的事件
4、事件监听(现代事件绑定)
添加事件监听
addEventListener(事件类型，事件处理程序，布尔值)
<button id="btn">我是一个按钮</button>
<script>
let btn = document.getElementById(\'btn\');
btn.addEventListener(\'click\',function(){
console.log(\'我是现代事件绑定\');
})
</script>
用户点击按钮时触发监听事件：
window.addEventListener(\'load\',init,false);
function init(){
alert("页面加载成功");
}
//或者
window.addEventListener(\'load\',function(){
alert("页面加载成功");
},false);
调用事件
function fn1(){
console.log(\'hello\');
}
btn.addEventListener(\'click\',fn1) //hello
如果带有参数，则要使用匿名参数的形式调用事件
function fn1(num){
console.log(\'hello\'+num);
}
btn.addEventListener(\'click\',function(){
fn1(1);
})
优点：可以绑定多个事件，
缺点：兼容性不好
element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。
true - 事件句柄在捕获阶段执行
false（默认）- 事件句柄在冒泡阶段执行，当值为true时，事件使用捕获传递
addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。
addEventListener() 在绑定事件的时候，事件名称之前不需带 on
移除事件监听
removeEventListener()
移除之前绑定过的事件
// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
事件流
事件的执行顺序/传播顺序
事件冒泡/事件捕获
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：p元素的点击事件先触发，然后会触发div元素的点击事件
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：div元素的点击事件先触发 ，然后再触发p元素的点击事件。
DOM事件流：既支持事件冒泡（默认）也支持事件捕获
事件对象（Event）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById(\'box\');
事件处理的第一形参就是event事件对象
//第一种方式
box.onclick = function(e){ //e的全称为event
console.log(e); //MouseEvent
}
//第二种方式
box.onclick = function(){
let event = window.event || arguments[0]
console.log(event);
}
</script>
</body>
</html>
MouseEvent 鼠标对象事件
//鼠标左键 MouseEvent
box.onclick = function(){
let event = window.event || arguments[0]
console.log(event);
console.log(event.clientX); //客户端的x坐标
console.log(event.screenX); //屏幕的x坐标
console.log(event.offsetX); //鼠标单击的位置距离元素左边
console.log(event.target); //目标元素 IE的srcElement
console.log(event.srcElement);
console.log(event.type); //事件类别
console.log(event.timeStamp); //鼠标单击距离页面打开的时间 毫秒
}
//鼠标右键 MouseEvent
box.oncontextmenu = function(){
let event = window.event || arguments[0]
console.log(event);
}
//鼠标滚动 onmousewheel
box.onmousewheel = function(){
let event = window.event || arguments[0]
console.log(event);
}
鼠标拖拽时阻止其默认行为
<a href="test.html" onclick="showFn()">拖拽页面</a>
//阻止跳转
function showFn(){
alert(\'我是事件\');
var ev =window.event || arguments[0];
if(true){
ev.preventDefault(); //阻止默认行为,DOM浏览器
ev.returnValue= false; //DOM 、 IE
}
}
鼠标拖拽时阻止事件冒泡行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>我是div
<button>我是btn</button>
</div>
<script>
let body = document.querySelector(\'body\')
let div = document.querySelector(\'div\')
let btn = document.querySelector(\'button\')
body.addEventListener(\'click\',function(){
alert(\'body触发了\');
},false)
div.addEventListener(\'click\',function(){
let ev = window.event || arguments[0]
alert(\'div触发了\');
ev.stopPropagation(); //阻止了事件冒泡 DOM
},false)
btn.addEventListener(\'click\',function(){
let ev = window.event || arguments[0]
alert(\'button触发了\');
//ev.stopPropagation(); //阻止了事件冒泡 DOM
ev.cancelBubble = true; //默认为false IE 、 DOM
},false)
</script>
</body>
</html>
键盘事件
| onkeydown | (物理编码) | onkeypress | (字符编码) | onkeyup | ||
|---|---|---|---|---|---|---|
| keyCode | charCode | keyCode | charCode | keyCode | charCode | |
| a | 65 | 0 | 97 | 97 | ||
| A | 65 | 0 | 65 | 65 | ||
| z | 90 | 0 | 122 | 122 | ||
| 空格 | 32 | 0 | 32 | 32 | ||
| 上 | 37 | 0 | 功能键 | 不会触发 | ||
| 下 | 40 | 0 | 功能键 | 不会触发 | ||
| 8 | 48 | 0 | 48 | 48 | ||
| 9 | 57 | 0 | 57 | 57 |
小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: darkkhaki;
position: fixed;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
</style>
</head>
<body>
<div class="box" style="left: 600px; top: 400px;">
</div>
<script>
let box = document.querySelector(\'.box\')
document.onkeydown = function(){
let ev = window.event || arguments[0]
if(ev.keyCode == 37){
console.log(\'我在左移\');
box.style.left = parseInt(box.style.left) -10 +\'px\'
} else if(ev.keyCode == 38){
console.log(\'我在上移\');
box.style.top = parseInt(box.style.top) -10 +\'px\'
}else if(ev.keyCode == 39){
console.log(\'我在右移\');
box.style.left = parseInt(box.style.left) +10 +\'px\'
}else if(ev.keyCode == 40){
console.log(\'我在下移\');
box.style.top = parseInt(box.style.top) +10 +\'px\'
}
}
</script>
</body>
</html>
