JS中的DOM操作(四)
js中的dom操作(四)
tips
1. 绑定事件的区别
2.为元素解绑事件
3.事件冒泡
代码
1.为元素绑定事件和解绑事件的兼容代码
2.为同一个元素绑定多个不同的事件,指向相同的事件处理函数
tips
1. 绑定事件的区别
addeventlistener(); attachevent() 相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样
2.参数个数不一样addeventlistener三个参数,attachevent两个参数
3.addeventlistener 谷歌,火狐,ie11支持,ie8不支持
attachevent 谷歌火狐不支持,ie11不支持,ie8支持
4.this不同,addeventlistener 中的this是当前绑定事件的对象
attachevent中的this是window
5.addeventlistener中事件的类型(事件的名字)没有on
attachevent中的事件的类型(事件的名字)有on
2.为元素解绑事件
解绑事件:
注意:用什么方式绑定事件,就应该用对应的方式解绑事件
1.解绑事件
对象.on事件名字=事件处理函数--->绑定事件
对象.on事件名字=null;
my$("btn").onclick=function () {
console.log("我猥琐");
};
my$("btn2").onclick=function () {
//1.解绑事件
my$("btn").onclick=null;
};
2.解绑事件
对象.addeventlistener("没有on的事件类型",命名函数,false);---绑定事件
对象.removeeventlistener("没有on的事件类型",函数名字,false);
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
my$("btn").addeventlistener("click",f1,false);
my$("btn").addeventlistener("click",f2,false);
//点击第二个按钮把第一个按钮的第一个点击事件解绑
my$("btn2").onclick=function () {
//解绑事件的时候,需要在绑定事件的时候,使用命名函数
my$("btn").removeeventlistener("click",f1,false);
};
3.解绑事件
对象.attachevent("on事件类型",命名函数);---绑定事件
对象.detachevent("on事件类型",函数名字);
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
my$("btn").attachevent("onclick",f1);
my$("btn").attachevent("onclick",f2);
my$("btn2").onclick=function () {
my$("btn").detachevent("onclick",f1);
};
3.事件冒泡
事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
事件有三个阶段:
1.事件捕获阶段 :从外向内
2.事件目标阶段 :最开始选择的那个
3.事件冒泡阶段 : 从里向外
为元素绑定事件:
addeventlistener("没有on的事件类型",事件处理函数,控制事件阶段的)
事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
window.event.cancelbubble=true;谷歌,ie8支持,火狐不支持
window.event就是一个对象,是ie中的标准
e.stoppropagation();阻止事件冒泡---->谷歌和火狐支持
window.event和e都是事件参数对象,一个是ie的标准,一个是火狐的标准
事件参数e在ie8的中是不存在,此时用window.event来代替
addeventlistener中第三个参数是控制事件阶段的
事件的阶段有三个:
通过e.eventphase这个属性可以知道当前的事件是什么阶段的
如果这个属性的值是:
1---->捕获阶段
2---->目标阶段
3---->冒泡
一般默认都是冒泡阶段,很少用捕获阶段
冒泡阶段:从里向外
捕获阶段:从外向内
代码
1.为元素绑定事件和解绑事件的兼容代码
2.为同一个元素绑定多个不同的事件,指向相同的事件处理函数
<script> //为同一个元素绑定多个不同的事件,指向相同的事件处理函数 my$("btn").onclick = f1; my$("btn").onmouseover = f1; my$("btn").onmouseout = f1; function f1(e) { switch (e.type) { case "click": alert("好帅哦"); break; case "mouseover": this.style.backgroundcolor = "red"; break; case "mouseout": this.style.backgroundcolor = "green"; break; } } // my$("btn").onmouseover=function (e) { // console.log(e); // }; </script>
上一篇: 一个网站完整的SEO优化方案
下一篇: 我的项链呢
推荐阅读
-
四川交通职业技术学院2022年在专科院校中的排名
-
js中的参数传递arguments
-
PHP编程中八种常见的文件操作方式_PHP教程
-
在js文件中引入(调用)另一个js文件的三种方法
-
在Python中操作文件之truncate()方法的使用教程
-
PHP中文件读、写、删的操作(PHP中对文件和目录操作)_PHP教程
-
php中的四舍五入函数代码(floor函数、ceil函数、round与intval),ceilintval
-
《DOM编程艺术》中初步实现的图片库的总结(一)_html/css_WEB-ITnose
-
JS中call与apply的作用及区别 jscallapply执行上下文
-
在Python中操作字典之clear()方法的使用