目录
二、使用on绑定事件弊端:同一个事件只能给一个元素绑定一次。
一、含义:事件绑定,就会一直留在内存中。大部分事件都是执行一次就不需要了,但是此时占用内存的事件就造成了内存浪费。因此,事件绑定并执行结束,不需要执行的时候,需要解绑。
第二种removeEventListenter(事件类型,绑定函数)
四、注意:通过事件侦听器绑定事件时,使用的函数为匿名函数,这个事件是无法解绑
的。因为同样的匿名函数,每写一次,都是在定义一个新的匿名函数,两个匿名函数会在堆中创建两个空间存储。
一、含义:浏览器为事件提供一个对象,用来记录事件的各种具体信息,如:鼠标点击位置,键盘按键信息。
一、从元素内部开始计算的坐标:offsetX 和 offsetY
二、相对于浏览器的坐标,使用:clientX和clientY。注意不会随着滚动条改变
三、相对于页面的坐标,会随着滚动条的滚动而加大,使用:pageX和pageY
一、获取事件类型
一、事件
一、事件三要素:
- 事件源+事件名称+事件处理程序
- 事件源:谁触发这个事件(一般是按钮)
- 事件名称:触发了什么事件(四类事件)
- 事件处理程序:事件触发后要执行的代码(函数形式)
二、事件类型
一、鼠标事件
- click---左键单机
- contextmenu---右键单机
- dblclick---双击
- mousedown---左键按下
- mouseup---左键抬起
- mouseover---鼠标放上
- mouseout---鼠标离开
- mouseenter---鼠标放上去
- mouseleave---鼠标离开
- mousemove---鼠标移动事件
- mousewheel---鼠标滚动事件
- mouseup---左键抬起
二、浏览器事件
- load---加载
- scroll---滚动
- resize---窗口大小改变
三、键盘事件
- keydown---按下
- keyup---按起来
- keypress---按下
- 注意:键盘事件除了用window可以触发之外,还可以使用document,或者表单元素。必须是可以选中的元素,DIV不行
四、表单事件
- submit---提交表单
- focus---获取焦点
- blur---失去焦点
- change---改变内容并且失去焦点
- input---input的value值改变
- 注意:input事件在低版本的IE中不兼容,使用
on propert change
代替。(不用空格)
三、事件流
- 含义:事件发生时,有一个触发并执行的过程,也就是事件的传播过程。
- 简单的说:事件流就是事件从发生到执行结束的流程。
- 事件流三阶段:捕获阶段,目标阶段,冒泡阶段
- 捕获阶段:事件开始由顶层元素触发,然后逐级向下传播,直到目标元素,依次执行绑定事件。
- 目标阶段:触发当前事件、
- 冒泡阶段:事件由目标元素接收后,逐级向上传播,达到顶层元素,依次执行绑定事件。
- 注意:目标元素的事件是在目标阶段执行,其他事件会在冒泡阶段执行。每个事件只会执行一次,也就是说如果在冒泡阶段执行了事件,就不会在捕获阶段执行。
四、事件绑定
一、事件可以绑定在行内
二、使用on绑定事件弊端:同一个事件只能给一个元素绑定一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
btn.onclick=function(){
console.log("第一次单击");
}
btn.onclick=function(){
console.log("第二次单击");
}
btn.onclick=function(){
console.log("第三次单击");
}
</script>
</html>
三、解决事件覆盖方法
- 使用addEventListenter()
- 语法:obj.addEventListener(参数1,参数2,参数3)
- 参数1:给元素绑定的事件类型,如:click
- 参数2:处理事件函数
- 参数3:是否在冒泡阶段执行:true在捕获阶段执行,false在冒泡阶段执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
document.getElementById("btn").addEventListener("click",handle,false);
function handle(){
console.log("第一次点击");
}
document.getElementById("btn").addEventListener("click",handle1,false);
function handle1(){
console.log("第二次点击");
}
document.getElementById("btn").addEventListener("click",handle2,false);
function handle2(){
console.log("第三次点击");
}
</script>
</html>
四、让事件在捕获阶段执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#big{
width: 400px;
height: 400px;
background-color: green;
text-align: center;
}
#middle{
width: 220px;
height: 220px;
background: #d4abef;
text-align: center;
}
#small{
width: 100px;
height: 100px;
background: red;
text-align: center;
}
</style>
<div id="big">
大
<div id="middle">
中
<div id="small">
小
</div>
</div>
</div>
</body>
<script>
document.getElementById("small").addEventListener("click",Click,);
document.getElementById("middle").addEventListener("click",Click1,);
document.getElementById("big").addEventListener("click",Click2,);
function Click(){
console.log('小');
}
function Click1(){
console.log('中');
}
function Click2(){
console.log('大');
}
</script>
</html>
五、事件解绑
一、含义:事件绑定,就会一直留在内存中。大部分事件都是执行一次就不需要了,但是此时占用内存的事件就造成了内存浪费。因此,事件绑定并执行结束,不需要执行的时候,需要解绑。
二、绑定方式:第一种是标签:on类型=函数
第二种是事件侦听器
三、解绑方式:第一种是标签:on类型=null
第二种removeEventListenter(事件类型,绑定函数)
var btn = document.querySelector('button')
btn.onclick = function() {
console.log('这是按钮的单击事件')
// 将给btn绑定的事件解绑
btn.onclick = null
}
btn.addEventListener('click', fn)
function fn() {
console.log('这是btn的单击事件')
// 将给btn绑定的事件解绑
btn.removeEventListener('click', fn)
}
四、注意:通过事件侦听器绑定事件时,使用的函数为匿名函数,这个事件是无法解绑
的。因为同样的匿名函数,每写一次,都是在定义一个新的匿名函数,两个匿名函数会在堆中创建两个空间存储。
六、事件对象
一、含义:浏览器为事件提供一个对象,用来记录事件的各种具体信息,如:鼠标点击位置,键盘按键信息。
<body>
<button id="btn">事件对象</button>
</body>
<script>
btn.onclick = function () {
console.log(window.event);
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">事件对象</button>
</body>
<script>
btn.onclick = function (e) {
console.log(e);
}
</script>
</html>
兼容写法
btn.onclick = function(e){
var ev = e || window.event
console.log(ev);
}
二、获取事件类型// e.type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<button id="btn">
按钮
</button>
<script>
btn.onclick=function(e){
console.log(e.type); // Click
}
btn.onmouseover=function(e){
console.log(e.type); // MouseOver
}
</script>
</html>
三、获取鼠标按键码// e.button
0表示左键,1表示鼠标滚轮,2表示右键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
btn.onmousedown = function(e){
var e = e || window.event;
var code = e.button;
if(code == 0){
console.log("您点击的是左键");
}else if(code == 1){
console.log("您点击的滚轮");
}else if(code == 2){
console.log("您点击的是右键");
}else{
console.log("无");
}
}
</script>
</html>
四、获取键盘按键码 / /e.keyCode
- 13:回车键
- 32:空格键
- 48-57:0-9
- 97-122:a-z
-
altKey
:alt 键和别的键一起按下得到 true,否则得到 false -
shiftKey
:shift 键和别的键一起按下得到 true,否则得到 false -
ctrlKey
:ctrl 键和别的键一起按下得到 true,否则得到 false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
document.onkeypress=function(e){
var ev = e || window.event;
console.log(ev.keyCode);
}
</script>
</html>
五、获取键盘按键码 / /e.keyCode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
document.onkeyup = function (e) {
var e = e || window.event
var keycode = e.keyCode
console.log(keycode);
if (e.ctrlKey && keycode === 65) {
console.log('你同时按下了 shift 和 a')
}
}
</script>
</html>
六、阻止事件冒泡
在事件对象中,有一个方法用来阻止事件冒泡,这个方法叫做stopPropagation。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#big{
width: 400px;
height: 400px;
background-color: green;
text-align: center;
}
#middle{
width: 220px;
height: 220px;
background: #d4abef;
text-align: center;
}
#small{
width: 100px;
height: 100px;
background: red;
text-align: center;
}
</style>
<div id="big">
大
<div id="middle">
中
<div id="small">
小
</div>
</div>
</div>
</body>
<script>
document.getElementById("small").addEventListener("click",Click,);
document.getElementById("middle").addEventListener("click",Click1,);
document.getElementById("big").addEventListener("click",Click2,);
function Click(e){
console.log('小');
var ev = e || window.event;
ev.stopPropagation();
console.log("小盒子的内容完毕");
}
function Click1(){
console.log('中');
console.log("中盒子的内容完毕");
}
function Click2(){
console.log('大');
console.log("大盒子的内容完毕");
}
</script>
</html>
阻止事件冒泡在IE浏览器中有兼容问题,在低版本IE浏览器中,需要使用另外一种写法:
small.onclick=function(e){
var ev = e || window.event;
ev.cancelBubble=true;
console.log(this.innerText);
console.log("小盒子的内容完毕");
}
兼容写法
small.onclick=function(e){
console.log(this.innerText);
console.log("小盒子的内容完毕");
var ev = e || window.event;
if(ev.stopPropagation){
ev.stopPropagation
}else{
ev.cancelBubble=true;
}
}
七、阻止默认行为
一、具有默认行为的标签a标签和提交按钮submit
二、阻止方法:
- 给链接地址设置为Javascript:;或者javascript:void(0)
- 在事件中最后return false
- 通过对象阻止,案例代码
function stopDefault(event) {
var e = event || window.event;
if (e.preventDefault){
e.preventDefault(); // w3c标准浏览器
}else{
e.returnValue = false; // IE浏览器
}
}
八、获取鼠标坐标点
一、从元素内部开始计算的坐标:offsetX
和 offsetY
二、相对于浏览器的坐标,使用:clientX
和clientY。注意不会随着滚动条改变
三、相对于页面的坐标,会随着滚动条的滚动而加大,使用:pageX
和pageY
九、事件委托
一、含义:将所有子元素的点击事件委托给父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>是不</li>
<li>老弟</li>
<li>来了</li>
</ul>
<button id="btn">添加</button>
</body>
<script>
var oUl = document.getElementsByTagName("ul")[0];
btn.onclick = function(){
var oNewLi = document.createElement("li");
oNewLi.innerText = "准备起飞";
oUl.appendChild(oNewLi)
}
oUl.onclick = function(e){
var ev = e || window.event;
// 获取到单击的目标元素dom对象
var target = ev.target || ev.srcElement;
// 判断是否是li标签
if(target.nodeName == "li"){
// 完成业务逻辑
alert(target.innerText);
}
}
</script>
</html>
二、委托事件优点
- 提高性能(事件委托中并没有使用循环给每个节点设置事件,只给一个父元素ul绑定事件)
- 后续动态添加的节点也有事件的处理
- 注意:事件委托底层就是通过事件冒泡来完成的,先触发父元素的事件,在通过事件对象的target属性找到具体的目标元素,进而在处理目标元素要执行的业务逻辑。