javascript的冒泡与捕获、定时器
事件
1.绑定事件的区别
2.移除绑定事件的方式及区别和兼容代码
3.事件的三个阶段
4.事件冒泡
5.为同-一个元素绑定多个不同的事件,指向的是同-一个事件处理函数
6.百度的大项目
7. BOM
8.定时器
9. DOM加强, 多个几个好玩的案例
绑定事件的区别
总结绑定事件的区别:addEventListener( );attachEvent()
相同点:都可以为元素绑定事件
不同点:
1.方法名不一样
2.参数个数不一样
addEventListener三个参数,
attachEvent两个参数
3.addEventListener谷歌,火狐,IE11支持,IE8不支持
attachEvent谷歌火狐不支持,IE11不支持,IE8支持
- this不同,
addEventlistener 中的this是当前绑定事件的对象
attachEvent中的this是window
- addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on
解绑事件上
function f1() {
console.log("第-个");
}
function f2() {
console.log("第二个");
my$("btn") . addEventListener("click" ,f1,false);
my$( "btn"). addEventListener("click" ,f2,false);
//点击第二个按钮把第一个按钮的第一一个点击事件解绑
my$("btn2"). οnclick=function () {
//解绑事件的时候, 需要在绑定事件的时候,使用命名函数
my$("btn") .removeEventListener("click" ,f1,false);
};
绑定事件和解绑事件的兼容代码
//1对象.on事件名字=事件处理函数----绑定事件
my$("btn") . οnclick=function () {
console. log( "我");
};
my$( "btn2"). οnclick=function () {
//1.解绑事件
my$("btn"). οnclick=null;
};
//解绑事件:
*注意:用什么方式绑定事件,就应该用对应的方式解绑事件
1.解绑事件
对象.on事件名字=事件处理函数--->绑定事件
对象.on事件名字=null;
2.解绑事件
对象. addEventlistener("没有on的事件类型",命名函数,false);-绑定事件
对象. removeEventListener("没有on的事件类型",函数名字,false);
3.解绑事件
对象. attachEvent( "on事件类型”",命名函数);---绑定事件
对象. deltachEvent("on事件类型!",函数名字);
function f1() {
console.1og("第一个");
function f2() {
console.1og("第二个");
my$("btn") . attachEvent("onclick" ,f1);
my$("btn"). attachEvent("onclick" ,f2);
my$( "btn2"). οnclick=function () {
my$( "btn"). detachEvent("onclick" ,f1);
};
//绑定事件的兼容
function addEventListener(element, type,fn) {
if(element . addEventListener){
element. addEventListener(type, fn, false);
}else if(element. attachEvent){