一、事件基础
1.绑定事件
-
把事件当做HTML元素的属性
<button onclick="code..."> -
把事件当做dom对象的方法
dom.onclick = function(){code....} -
事件监听方式
addEventListener(eventName, fn, true/false)attachEvent(eventName, fn)（IE8-）
2. 解除事件的绑定
-
绑定方式： 把事件当做html元素属性 / 把事件当做dom对象的方法
重新绑定一个空的function，覆盖前面
dom.onclick = function(){} -
绑定方式 是 事件监听方式
removeEventListener(event, fn)detachEvent(event, fn)
3.this的用法
-
循环给一组元素绑定事件的时候
-
事件作为html元素属性的时候，函数调用，传this表示 该元素
-
在元素内部 通过属性形式
<button onclick="fn(this)">此时this表示所在的元素<body> <ul id="myList"> <li>哈哈哈</li> <li>嘿嘿嘿</li> <li>嘻嘻嘻</li> <li>呵呵呵</li> <li>呀呀呀</li> </ul> <script> var lis=document.getElementById("myList").getElementsByTagName("li"); //遍历 for(var i=0;i<lis.length;i++){ lis[i].onclick=function(){ this.style.backgroundColor="pink"; } } </script> </body>
二、事件类型
1.鼠标事件
- click 单击
- dblclick 双击
- contextmenu 右击
- mouseover 鼠标进入元素
- mouseout 鼠标离开元素
- mousedown 鼠标按键按下
- mouseup 鼠标按键抬起
- mousemove 鼠标移动
2.键盘事件
- keydown 键盘按键按下
- keyup 键盘按键抬起
- keypress 键盘按键 按下 (只有字符按键) (控制按键不可以 Ctrl shift 上下左右都不行)
3.文档事件
- load 加载完成（绑定给window、img、document.body）
- unload 文档关闭
- beforeunload 文档关闭 (兼容性好)
4.表单事件
- submit 表单提交的时候, 绑定给form元素
- reset 表单重置, 绑定给form元素
- blur 失去焦点(绑定给输入框)
- focus 获得焦点(绑定给输入框)
- change 表单控制的内容改变（通常绑定给select radio checkbox）
- 如果绑定给input 必须同时满足两个条件
- 内容改变和失去焦点 才能触发
- select 可输入的元素绑定input 或 textarea 内容被选中的时候触发
5.图片事件
- abort 图片加载中断
- load 图片加载完成
- error 图片加载错误
6.其他事件
- scroll 元素内部的内容滚动 （适合于有滚动条的元素）
- resize 绑定给window, 窗口尺寸发生变化
三、Event 对象
1.Event种类
- mouseEvent
- keyboardEvent
- focusEvent
2.属性
-
clientX 鼠标的x坐标
-
clientY 鼠标的Y坐标
-
keyCode 键盘按键的值
-
button 鼠标按键的标示
- 0 按了左键
- 1 按了滚轮
- 2 按了右键
-
cancelBubble 阻止事件冒泡 设置为true
-
target返回触发此事件的元素(具体触发事件的元素)<script> document.onclick = function(ev){ /*console.log(ev.target)可以知道具体点了哪个元素*/ ev.target.style.backgroundColor = "green"; } </script> -
type 返回事件类型(mouse keyborad... )
-
timeStamp 返回触发事件的那一刻的时间戳(从页面打开的那一刻开始
-
altKey 返回当事件被触发时，"ALT" 是否被按下。
-
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
-
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
3.方法
- stopPropagation() 阻止冒泡
- preventDefault() 阻止默认动作
4.事件的冒泡和捕获
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的冒泡和捕获</title>
<style>
#big{
500px;
height:500px;
border:1px solid #ccc;
background:#999;
}
#middle{
margin:100px;
300px;
height:300px;
border:1px solid #ccc;
background:orange;
}
#small{
margin:100px;
100px;
height: 100px;
border:1px solid #ccc;
background:pink;
}
</style>
</head>
<body>
<div id="big">
<div id="middle">
<div id="small"></div>
</div>
</div>
<script>
var bigEle=document.getElementById("big");
var middleEle=document.getElementById("middle");
var smallEle=document.getElementById("small");
/**
* 分别绑定事件
* 点击最小的会依次弹出Big,small,Middle
*/
bigEle.addEventListener("click",function(){
alert("Big");
},true)/*true 捕获阶段触发*/
middleEle.addEventListener("click",function(){
alert("Middle");
})/*不设置第三个数默认为 false 冒泡*/
smallEle.addEventListener("click",function(){
alert("small");
})
</script>
</body>
</html>
四、Element(所有的元素都具有的属性)
- offsetLeft
- offsetTop
- scrollLeft 内容向左滚动的距离（也可以为滚动条滚动的距离）
- scrollTop 内容向上滚动的距离（也可以为滚动条滚动的距离）
- getBoundingClientRect() 元素到视窗口的距离（
box.getBoundingClientRect().left/top）