javascript的冒泡与捕获、定时器

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支持

1. this不同,

  addEventlistener 中的this是当前绑定事件的对象

attachEvent中的this是window

1. 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){