文章目录
一、事件初识
代码示例:
<button id="btn">点击</button>
<script>
// 节点+on事件名=匿名函数
document.getElementById("btn");
btn.onclick=function(){
alert("大海全是水")
}
</script>
以上是最简单的一个事件绑定代码,点击button时触发下面的函数代码。
二、为一个元素绑定多个事件
1.直接绑定两个事件(不OK)
如下所示,这种写法 后面的alert语句会覆盖前面的;
<button id="btn">点我</button>
<!-- 这种写法 后面的alert语句会覆盖前面的 -->
<script>
let btn=document.getElementById("btn")
btn.onclick=function(){
alert("大海啊,你全是水")
}
btn.onclick=function(){
alert("大海啊,你全是水00011")
}
</script>
仅弹出一次alert,结果如下:
2.attachEvent
方法一:对象.attachEvent(“有on类型的事件”,事件处理的函数,false)
谷歌不支持 火狐不支持 IE8以下的浏览器支持
<button id="btn">点我</button>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick",function(){
console.log("大海全是水");
},false)
</script>
因未安装IE8以下的浏览器,故此处没有测试。
3.addEventListener
方法二: 对象.addEventListener(“事件类型”,事件处理的函数,false)
谷歌支持 火狐支持 IE8以下不支持
<button id="btn">点我</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
alert("大海啊,你全是水")
})
btn.addEventListener("click",function(){
alert("大海啊,你全是水0001")
})
</script>
结果如下,依次执行两个点击事件:
三、为元素添加兼容的写法
上一章介绍了三种方式绑定多个事件,总结一种兼容式写法:
<button id='btn'>点击</button>
<script>
var btn=document.getElementById("btn")
// 为任意元素绑定事件,事件类型和处理函数
function addEventListener(element,type,fn){
// 判断浏览器是否支持这个方法 火狐 谷歌 IE
if(element.addEventListener){
element.addEventListener(type,fn,false)节点.addEventListener()
}else if(element.attactEvent){
// IE<=8
element.attactEvent("on"+type,fn,false)//节点.attachEvent()
}else{
element["on"+type]=fn//节点.οnclick=function(){}
}
}
addEventListener(btn,"click",function(){
alert("大海全是水")
})
addEventListener(btn,"click",function(){
alert("大海全是水0001")
})
</script>
测试ok。
四、attachEvent和addEventListener之间的区别?
相同点: 都可以为元素绑定事件
不同点:
1 方法名不一样
2 参数的个数是不一样的 attachEvent是两个参数 addEventListener是三个参数
3 addEventListener 谷歌 火狐 IE8 支持 attachEvent IE8以下支持
4 this指向不同 attachEvent中的指向是window addEventListener表示的是当前绑定事件的对象
5 一个加on 一个不加on
五、解绑事件
解绑事件 :
方法一
对象.on事件名 = 事件处理函数 —>绑定事件
对象.on事件名 = null
方法二
对象.addEventListener(“没有on的事件类型”,命名函数,false)
对象.removeEventListener(“没有on的事件类型”,命名函数,false)
方法三
对象.attactEvent(“on的事件类型”,命名函数)
对象.detachEvent(“on的事件类型”,命名函数)
两种方式如下代码:
<input type="button" value="第一个按钮" id="btn" />
<input type="button" value="干掉第一个按钮" id="btn2">
<script>
var btn=document.getElementById("btn")
var btn2=document.getElementById("btn2")
// 第一种方式
// btn.οnclick=function(){
// console.log("我是第一个按钮");
// }
// btn2.οnclick=function(){
// btn.οnclick=null //将btn的点击事件置为空 等于解绑
// }
// 第二种方式
function fn1(){
console.log("001");
}
function fn2(){
console.log("002");
}
btn.addEventListener("click",fn1)
btn.addEventListener("click",fn2)
btn2.onclick=function(){
// 移除绑定事件
btn.removeEventListener("click",fn1,false)
btn.removeEventListener("click",fn2,false)
}
</script>
六、解绑事件的兼容式写法
<button id="btn">点击</button>
<script>
function removeEventListener(element,type,fnName){
if(element.removeEventListener){
element.removeEventListener(element,type,fnName)
}else if(element.detachEvent){
element.detachEvent(element,"on"+type,fnName)
}else{
element["on"+type]=null
}
}
</script>
补充:
(1)对象.事件名 对象的写法
btn.οnclick=function(){ }
(2)对象[‘事件名’] 数组的写法
btn[‘onclick’]=function(){ }
总结: 以上两种写法是等价的
七、事件冒泡
事件冒泡: 多个元素嵌套 有层次关系 这些元素都注册了相同的事件 如果里边的元素事件触发了 外边的元素的事件就会自动由内向外触发。
为了便于精简代码,引入了一个my.js文件,里面是对getElementById()方法的封装。
代码如下:
// 获取ID节点
function $(id){
return document.getElementById(id)
}
事件冒泡示例如下:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
#div1{
width:300px;
height:200px;
background-color: red;
}
#div2{
width:250px;
height:150px;
background-color: green;
}
#div3{
width:200px;
height:100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<script src="./my.js"></script>
<script>
//事件冒泡的第一种写法 当addEventListener的第三个删除为false时,表示事件冒泡
//$("div1").addEventListener("click",function(){
// console.log(this.id);
//},false)
//$("div2").addEventListener("click",function(){
// console.log(this.id);
//},false)
//$("div3").addEventListener("click",function(){
// console.log(this.id);
//},false)
//事件冒泡的第二种写法
$("div1").onclick=function(){
console.log(this.id);//div1
}
$("div2").onclick=function(){
console.log(this.id);//div2
}
$("div3").onclick=function(){
console.log(this.id);//div3
}
</script>
</body>
</html>
结果如下:
八、事件捕获
当addEventListener的第三个参数是true时,表示事件捕获。事件捕获是从外到里触发事件。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
#div1{
width:300px;
height:200px;
background-color: red;
}
#div2{
width:250px;
height:150px;
background-color: green;
}
#div3{
width:200px;
height:100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<script src="./my.js"></script>
<script>
$("div1").addEventListener("click",function(){
console.log(this.id);
},true)
$("div2").addEventListener("click",function(){
console.log(this.id);
},true)
$("div3").addEventListener("click",function(){
console.log(this.id);
},true)
</script>
</body>
</html>
结果如下:
九、阻止事件冒泡
如何阻止事件冒泡?
(1)IE浏览器特有的 谷歌火狐不支持 window.event.cancelBubble=true
(2)e.stopPropagation() 谷歌和火狐支持
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
#div1{width:300px;height:200px;background-color: red;}
#div2{width:250px;height:150px;background-color: green;}
#div3{width:200px;height:100px;background-color: blue;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<script src="my.js"></script>
<script>
$("div1").addEventListener("click",function(){
console.log(this.id)
},false)
$("div2").addEventListener("click",function(e){
console.log(this.id)
e.stopPropagation();
},false)
$("div3").addEventListener("click",function(e){
console.log(this.id)
e.stopPropagation();
},false)
</script>
</body>
</html>
结果如下,点击哪个div哪个div的点击事件触发:
十、事件阶段
关于事件阶段
1 代表事件捕获阶段 由外到内
2 代表事件目标阶段 最开始选择的那个
3 代表事件冒泡阶段 从里到外
可以通过e.eventPhase这个属性知道当前的事件是什么阶段的
<!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>
<style>
#div1{width:300px;height:200px;background-color: red;}
#div2{width:250px;height:150px;background-color: green;}
#div3{width:200px;height:100px;background-color: blue;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
<script src="my.js"></script>
<script>
var objs=[$("div1"),$("div2"),$("div3")];
// 遍历注册事件
for(var i in objs){
// console.log(i);
objs[i].addEventListener("click",function(e){
console.log(this.id+"=========>"+e.eventPhase);
})
}
</script>
</html>
结果如下:
十一、一个元素绑定多个不同的事件指向同一个事件处理函数
示例:
<input type="button" id="btn" value="一个按钮" >
<script src="my.js"></script>
<script>
//为同一个元素绑定多个不同的事件 指向相同的事件处理函数
$("btn").onclick=f1;
$("btn").onmouseover=f1;
$("btn").onmouseout=f1;
function f1(e){
// e.type能够获取事件类型
switch (e.type){
case "click":
console.log("单击了按钮");
break;
case "mouseover":
console.log("鼠标经过按钮");
break;
case "mouseout":
console.log("鼠标离开了按钮");
break;
}
}
</script>
结果如下:
十二、关于事件的多重绑定
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
#demo{
width:150px;
height:150px;
background-color: red;
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
var demo=document.getElementById("demo");
demo.addEventListener("click",function(){
console.log("click");
},false)
demo.addEventListener("mousemove",function(){
console.log("mousemove");
},false)
demo.addEventListener("mouseout",function(){
console.log("mouseout");
},false)
</script>
</body>
</html>
结果如下:
总结
一、 关于事件阶段
1 事件捕获阶段 由外到内
2 事件目标阶段 最开始选择的那个
3 事件冒泡阶段 从里到外
二 、阻止事件冒泡
为元素绑定事件
addEventListener
事件触发的过程中 可能会出现事件冒泡 为了阻止事件冒泡
window.event.cancelBubble=true
window.event就是一个对象,是IE的标准
e.stopPropagetion() 阻止事件冒泡 ------ 谷歌火狐标准
window.event 和e都是事件参数对象 一个是IE标准 一个是火狐和谷歌标准
三、 一般情况默认的都是冒泡 很少用捕获
可以通过 e.eventPhase 这个属性能够知道现在事件所处的阶段
冒泡阶段: 从里到外
捕获阶段: 从外向里