学习记录---04api---绑定事件的区别 解绑事件 绑定解绑事件的兼容代码 事件冒泡 事件阶段 绑定多个事件 键盘事件 BOM location history navigator 定时器

绑定事件的区别

addEventListener();
attachEvent();

1.参数个数不同
2.addEventListener(); 谷歌火狐IE11支持，IE8不支持
attachEvent(); 谷歌火狐IE11不支持，IE8支持
3.addEventListener();中的this是当前绑定事件的对象
attachEvent();中的this是window

---

为元素解绑事件

用什么方式绑定事件，就应该用对应的方式解绑事件
1.对象.事件=null;
my$(‘btn’).οnclick=null;

2.addEventListener();绑定多个事件是，需要解绑函数则是通过
removeEventListener(‘没有on的事件名’,命名函数，false);

#注意# 必须使用命名函数 一次只能解绑一个

---

例子

my$('btn1').addEventListener('click', f1, false);
my$('btn1').addEventListener('click', f2, false);
my$('btn2').onclick = function () {
    my$('btn1').removeEventListener('click',f1,false);
};

3.attachEvent();绑定多个事件是，需要解绑函数则是通过
detachEvent(‘事件名’,命名函数，false);

---

例子

my$('btn1').attachEvent('click', f1, false);
my$('btn1').attachEvent('click', f2, false);
my$('btn2').onclick = function () {
    my$('btn1').detachEvent('click',f1,false);
};

---

绑定、解绑事件的兼容代码

//绑定的兼容写法
function addEventListener(element,type,fnName) {
    if(element.addEventListener){
        element.addEventListener(type,fnName,false);
    }
    else if(element.attachEvent){
        element.attachEvent('on'+type,fnName);
    }
    else {
        element['on'+type]=fnName;
    }
}
//移除的兼容写法
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;
    }
}

---

事件冒泡

多个元素嵌套，有层次关系，这些元素都注册了相同的事件 如果里面的元素的事件触发了，外面的元素的事件也自动触发

阻止事件冒泡
事件的函数默认有一个参数，(通过argument找到的)，这个参数时事件处理参数对象

---

阻止事件冒泡的方法

这些写法要写到要阻止的事件元素的父元素上
1.window.event.cancelBubble=true; 火狐不支持
2.对象.stopPropagation();ie8不支持

---

例子

my$('dv1').onclick = function () {
    console.log(this.id);

}
my$('dv2').onclick = function (e) {
    console.log(this.id);
    e.stopPropagation();
}
my$('dv3').onclick = function () {
    console.log(this.id);
    window.event.cancelBubble=true;

}

---

事件的阶段

事件的阶段属性值1、2、3（事件参数对象.eventPhase)
1.事件捕获阶段 :从外向内
2.事件目标阶段 :最开始选择的
3.事件冒泡阶段 :从内向外
该属性在事件参数对象中存在
该属性只能同时出现两个阶段1.2----2.3
一般都是用冒泡阶段很少用捕获阶段

---

例子

var objs=[my$('dv1'),my$('dv2'),my$('dv1')];
为每个元素添加绑定事件
objs.forEach(function(ele) {
    ele.addEventListener('click',function(){
        console.log(this.id);
    },true);
    //这里的true获取的事件捕获阶段。false获取的是事件的冒泡阶段
});

总结
addEventListener(‘没有on的事件类型’,事件处理函数,控制事件阶段的)
window.event.cancelBubble=true;阻止事件冒泡
window.event就是一个对象，是IE中的标准
e.stopPropagation();
window.event和e都是事件参数对象，一个是IE的标准，一个是火狐的标准
事件参数e在IE8中是不存在的，就可以用window.event代替

---

为同一个元素绑定多个不同的事件，指向相同的事件处理函数

---

例子

 window.onload = function () {
    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 = '#f00';
            break;
        case 'mouseout':
            this.style.backgroundColor = '#0f0';
            break;
    }
}

上面的e是事件参数，里面有很多属性，当事件为onclick时，e的type为click

---

键盘事件

element.onkeyup 键盘按下抬起时的
element.onkeydown 键盘按下时的
例子，仿百度搜索框

---

BOM Browser Object Model

浏览器对象模型

顶级对象 ----window
页面中的所有内容都是属于浏览器的，都是window的
调用window下的属性和方法时可以省略window
window下有一个特殊的属性window.name是空
所以以后不要用name做名字
window还有另一个名字top

window.alret()以后不用,测试的时候用
window.prompt() 以后不用
window.confirm() 有返回值的，返回值为布尔型

加载事件
window.onload
只要界面加载完毕，这个事件就会触发

window.onunload
----页面关闭后才触发的事件

window.onbeforeunload
----页面关闭之前触发的

location对象

URL的组成
scheme–通信协议
host–主机
port–端口号
path—路径
query—查询
fragment—信息片段

location对象的属性和方法
window.location.hash-----地址栏中#后面的内容
window.location.host-----主机名和端口号
window.location.hostname-----主机名
window.location.pathname-----文件路径–相对路径
window.location.port------端口号
window.location.protocol-----协议
window.location.search-----搜索的内容
window.location.href—页面跳转的地址–属性
window.location.assign()—页面跳转的地址–方法–可以后退
window.location.reload()----重新加载
window.location.replace()—跳转，没有历史记录不能返回

============
window.history对象–要有历史记录
window.history.back()----后退
window.history.forward()—前进
window.history.go()-----看里面是正数还是负数来进行跳转—需要用户访问过才能进行跳转

============
navigator对象
window.navigator.platform-----判断浏览器所在的系统平台类型
window.navigator.userAgent----获得用户使用的浏览器的类型----获得是一大串的字符串

===========

定时器

页面加载完毕后，过了一秒再开始执行
设置定时器
window.setInterval(函数,时间(ms))—返回值就是定时器的id值
停止定时器
window.clearInterval(要清理的定时器的id值)

补充：alert-断言