API之事件的绑定和事件的冒泡
目录
- 事件绑定的两种方法
- 事件绑定的兼容代码
- 绑定事件的区别
- 解绑
- 绑定事件和解绑事件的兼容代码
- 事件冒泡
- 阻止事件冒泡
- 事件的三个阶段
- 为同一个元素注册不一样的事件，指向相同的事件处理函数
元素绑定的两种方法
- 第一种：addEventListener('事件类型'， 事件处理函数， false)-----谷歌火狐支持，IE8不支持
- attachEvent（'带on的事件类型'，事件处理函数）-----谷歌火狐不支持，IE8支持
<body>
<input type="button" value="按钮" id="btn">
<script>
var btn = document.getElementById('btn');
//为按钮绑定点击事件: DOM中，只有一种，可是不兼容，因此有两种
//第一种：addEventListener('事件类型'， 事件处理函数， false)-----谷歌火狐支持，IE8不支持
//参数1： 事件的类型----也就是事件的名字，没有on
//参数2: 事件处理函数----也就是函数（命名函数或匿名函数）
//参数3： Boolean类型，暂时为false
//第二种： attachEvent（'带on的事件类型'，事件处理函数）-----谷歌火狐不支持，IE8支持
//参数1： 事件类型----带on
//参数2： 事件处理函数-----函数（命名或匿名）
btn.addEventListener('click', function() {
console.log('明智之举');
}, false);
btn.addEventListener('click', function() {
console.log('做词：许嵩');
}, false);
btn.addEventListener('click', function() {
console.log('做曲：许嵩');
}, false);
btn.addEventListener('click', function() {
console.log('演唱：许嵩');
}, false);
// btn.attachEvent('onclick', function() {
// console.log('明智之举');
// });
// btn.attachEvent('onclick', function() {
// console.log('如约而至');
// });
// btn.attachEvent('onclick', function() {
// console.log('许嵩');
// });
</script>
</body>
事件绑定的兼容代码
//为任意一个元素，绑定任意事件 任意元素， 事件的类型，事件处理函数
function addEventListener(element, type, fn) {
if (element.addEventListener) { //判断这个浏览器是否支持这个方法
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, fn); //element.attachEvent('onclick',function(){})
} else {
element['on' + type] = fn; // element.onclick = function() {}
}
}
事件绑定的区别
相同点数组
均可觉得元素绑定事件浏览器
不一样点函数
- 方法名不同
- addEventListener
- attachEvent
- 参数个数不同
- addEventListener有三个参数
- attachEvent只有两个参数
- 浏览器支持不同
- addEventListener 谷歌、火狐、IE11支持，IE8不支持
- attachEvent IE不支持，谷歌、火狐、IE11不支持
- this不一样
- addEventListener中的this指的是当前绑定事件的对象
- attachEvent中的this指的是window
- 事件类型不一样
- addEventListener中的事件类型没有on
- attachEvent中的事件类型有on
解绑
注意： 用什么方式绑定事件，就用什么方式解绑事件this
第一种code
- 对象.on事件名= 事件处理函数------------绑定事件
- 对象.on事件名 = null; -------------解绑事件
//点击第二个按钮，解除第一个按钮的绑定事件
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
btn.onclick = function() {
console.log('Worth it');
}
btn1.onclick = function() {
//解绑事件
btn.onclick = null;
}
第二种对象
- 对象.addEventListener('事件类型', 命名函数, false)----------绑定事件
- 对象.removeEventListener('事件类型', 命名函数, false)-------解绑事件
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
function f3() {
console.log('明智之举');
}
function f4() {
console.log('做词：许嵩');
}
btn.addEventListener('click', f3, false);
btn.addEventListener('click', f4, false);
btn1.onclick = function() {
//这种方式解绑的时候须要使用命名函数
btn.removeEventListener('click', f4, false);
}
第三种索引
- 对象.attachEvent('带on的事件类型', 命名函数);
- 对象.detachEvent('带on的事件类型', 命名函数);
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
function f3() {
console.log('明智之举');
}
function f4() {
console.log('做词：许嵩');
}
btn.attachEvent('onclick', f3);
btn.attachEvent('onclick', f4);
btn1.onclick = function() {
btn.detachEvent('onclick', f3);
};
绑定事件和解绑时间的兼容代码
<input type="button" value="歌曲" id="btn">
<input type="button" value="清空歌曲" id="btn1">
<body>
<script src='common.js'></script>
<script>
//绑定事件的兼容代码
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, fn);
} else {
element['on' + type] = fn;
}
}
//解绑事件的兼容代码
function removeEventListener(element, type, fnName) {
if (element.removeEventListener) {
element.removeEventListener(type, fnName, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fnName);
} else {
element['on' + type] = null;
}
}
//test
function f1() {
console.log('明智之举');
}
function f2() {
console.log('做词：许嵩');
}
addEventListener(my$("btn"), "click", f1);
addEventListener(my$("btn"), "click", f2);
my$("btn1").onclick = function() {
removeEventListener(my$("btn"), "click", f1);
};
</script>
事件冒泡
多个元素嵌套，有层次关系，这些元素都注册了相同的事件，若是里面的元素的事件被触发了，外面元素的事件自动被触发seo
<style>
#dv1 {
width: 300px;
height: 400px;
background-color: #def;
}
#dv2 {
width: 250px;
height: 350px;
background-color: #edf;
}
#dv3 {
width: 200px;
height: 300px;
background-color: #fed;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
//事件冒泡：多个元素嵌套，有层次关系，这些元素都注册了相同的事件，若是里面的元素的事件触发了，外面的元素的该事件自动触发
var dv1 = document.getElementById('dv1');
var dv2 = document.getElementById('dv2');
var dv3 = document.getElementById('dv3');
dv1.onclick = function() {
console.log('dv1');//dv1
}
dv2.onclick = function() {
console.log('dv2');//dv2 dv1
}
dv3.onclick = function() {
console.log('dv3');//dv3 dv2 dv1
}
</script>
阻止事件冒泡
- window.event.cancelBubble = true;//谷歌，IE8支持，但火狐不支持
- e.stopPropagation();//谷歌、火狐支持，可是IE8不支持
<style>
#dv1 {
width: 300px;
height: 400px;
background-color: #def;
}
#dv2 {
width: 250px;
height: 350px;
background-color: #edf;
}
#dv3 {
width: 200px;
height: 300px;
background-color: #fed;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
var dv1 = document.getElementById('dv1');
var dv2 = document.getElementById('dv2');
var dv3 = document.getElementById('dv3');
// 在事件被触发时会产生一个事件处理对象参数
//如何阻止事件冒泡
//1. window.event.cancelBubble = true;//谷歌，IE8支持，但火狐不支持
//2. e.stopPropagation();//谷歌、火狐支持，可是IE8不支持
dv1.onclick = function() {
console.log(this.id);
}
dv2.onclick = function(e) { //这里的e就是事件触发时产生的事件处理对象参数
console.log(this.id);
//阻止事件冒泡
e.stopPropagation();
}
dv3.onclick = function() {
console.log(this.id);
//阻止事件冒泡
window.event.cancelBubble = true;
}
</script>
</body>
事件的三个阶段
- 1表示事件捕获阶段----------> 从外向内
- 2表示事件目标阶段
- 3表示事件冒泡阶段----------> 从内向外
- 案例
<style>
#dv1 {
width: 300px;
height: 400px;
background-color: #def;
}
#dv2 {
width: 250px;
height: 350px;
background-color: #edf;
}
#dv3 {
width: 200px;
height: 300px;
background-color: #fed;
}
</style>
</head>
<body>
<div id='dv1'>
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
//同时注册点击事件
var objs = [document.getElementById('dv1'),
document.getElementById('dv2'),
document.getElementById('dv3')
];
//遍历注册事件
objs.forEach(function(ele) { //传一个参数的时候，这个参数是元素
//为每一个元素绑定事件；
// ele.addEventListener('click', function() {
// console.log(this.id + '--------->' + window.event.eventPhase);
// }, false);
ele.addEventListener('click', function() {
console.log(this.id + '--------->' + window.event.eventPhase);
}, true);
});
//array.forEach(function(数组当前项的值， 数组当前的索引，数组对象自己){
//});
</script>
- 总结
为元素绑定事件
addEventLinstener('没有on的事件类型'，事件处理函数，控制事件阶段的)
false------>表示事件冒泡阶段（从内向外 或者 从上到下）
true-------> 表示事件捕获阶段（从外向内 或者 从下到上）
事件触发的过程当中可能会出现事件冒泡的效果，为了阻止事件冒泡----->
1. window.event.cancelBubble = true;谷歌，IE8支持，火狐不支持
window.event就是一个对象，是IE的标准
2. e.stopPropagation();
window.event 和 e 都是事件参数对象，一个是IE标准，一个是火狐标准
事件参数e在IE8中的浏览器中是不存在的，此时用window.event来代替
addEventLinstener中的第三的参数是用来控制事件阶段的
事件阶段有三个
1-----》事件捕获阶段
2-----》事件目标阶段
3-----》事件冒泡阶段
通常默认用冒泡阶段，不多用捕获阶段
为同一个元素注册不一样的事件，指向相同的事件处理函数
<body>
<input type="button" value="nice!" id='btn'>
<script>
var btn = document.getElementById('btn');
btn.onclick = f1;
btn.onmouseover = f1;
btn.onmouseout = f1;
function f1(e) {
switch (e.type) {
case 'click':
alert("nice!");
break;
case 'mouseover':
this.style.backgroundColor = '#def';
break;
case 'mouseout':
this.style.backgroundColor = '#fed';
break;
}
}
</script>
</body>
相关文章
- 1. 事件（绑定、解绑、冒泡）
- 2. 事件绑定 事件冒泡 事件代理
- 3. 小程序3——路由、事件流、事件绑定和冒泡
- 4. 事件冒泡 事件监听 事件委托 事件绑定 事件代理
- 5. 事件的冒泡
- 6. js事件冒泡、事件绑定、事件监听、事件委托
- 7. zepto绑定事件改变冒泡事件流
- 8. 事件流-事件冒泡
- 9. 冒泡事件
- 10. 事件冒泡
- 更多相关文章...
- • C# 事件（Event） - C#教程
- • jQuery Mobile 事件 - jQuery Mobile 教程
- • 常用的分布式事务解决方案
- • Docker容器实战(七) - 容器眼光下的文件系统
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 论文大盘点-光流篇
- 2. Photoshop教程_ps中怎么载入图案？PS图案如何导入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 导入源码包
- 6. python学习 day2——基础学习
- 7. 3D将是页游市场新赛道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 图片(pgn显示、jpg不显示)解决方案
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 事件（绑定、解绑、冒泡）
- 2. 事件绑定 事件冒泡 事件代理
- 3. 小程序3——路由、事件流、事件绑定和冒泡
- 4. 事件冒泡 事件监听 事件委托 事件绑定 事件代理
- 5. 事件的冒泡
- 6. js事件冒泡、事件绑定、事件监听、事件委托
- 7. zepto绑定事件改变冒泡事件流
- 8. 事件流-事件冒泡
- 9. 冒泡事件
- 10. 事件冒泡