04dayWebApi

学习目标

一、总结绑定事件区别：

addEventListener()
attachEvent()

相同点：都可以为元素绑定事件

不同点：

1、方法名不一样

2、参数个数不一样

3、addEventListener 谷歌、火狐、IE11支持、IE8不支持

​ attachEvent IE8支持 IE11不支持、

​ this不同,ddEventListener 中是当前绑定事件的对象

​ attachEvent 中的this是winodw、

​ addEvenListener中的事件类型(事件名字没有on)

​ attachEvent中的事件类型(时间名字)有on

二、为元素解绑事件

注意：用什么方式绑定事件,就应该用对应的方式解绑事件

1、解绑事件，都需要使用命名函数

对象**.**on事件名=事件处理函数; ----->绑定事件

对象.on事件名=null; ----->解绑事件

2、解绑事件 (IE8不支持)

对象.addEventListener(“事件名”,命名函数,false); ------>绑定事件

对象.removerEventListener(“事件名”,命名函数,false); ------->解绑事件

3、解绑事件 (IE8支持)

对象.attachEvent(“on+事件名”,命名函数); ------>绑定事件

对象.deachEvent(“on”+事件名,命名函数); ------->解绑事件

4、兼容代码

 //为任意元素绑定任意的事件
    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]=fnName;
        }
    }

三、事件冒泡

事件冒泡：

多个元素嵌套,有层次关系,这些元素都注册了相同的事件,

如果里面的元素的事件触发了,外面的该事件自动触发了

如何阻止冒泡事件：

window.envent.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

e.stopPropagation(); 谷歌和火狐支持,IE8不支持

四、事件阶段

事件有三个阶段：

1—>事件捕获阶段：从外向内

2—>事件目标阶段：最开始选择的那个

3—>事件冒泡阶段：从内向外

为元素绑定事件

addEventListener(“没有on的事件类型”,事件处理函数,控制事件阶段的)

事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡---->

window.event.cancelBubble=true; —>IE8支持,谷歌支持,火狐不支持

windows.event就是一个对象,IE中的标准

e.stopPropagation(); 阻止事件冒泡----->谷歌火狐支持,IE8不支持

window.event和e都是事件参数对象,一个是IE标准,一个是火狐标准

事件参数e在IE8的浏览器中是不存在,此时用windows.evnent来代替addEventListener中第三个参数是控制事件阶段的

事件的阶段有三个：

通过e.eventPhase这个属性可以知道当前的事件是什么阶段的

如果这个属性的值是：

1---->捕获阶段

2---->目标阶段

3---->冒泡阶段

一般默认都是冒泡阶段,很少用捕获阶段

冒泡阶段：从里向外捕获阶段：从外向内

注意：事件里默认有个事件参数对象

五、为同一个元素绑定不同的事件,指向同一个事件处理函数

通过事件参数对象的type属性进行switch进行匹配

示例：跟type属性值的事件名是没有on的，这是标准

对象/元素.onclick = f1;
对象/元素.onmouseover = f1;
对象/元素.onmouseout = f1;
//事件参数对象
function f1(e) {
    switch (e.type) {
        case "click":alert("哈哈我好帅");
            break;
        case "mouseover":this.style.backgroundColor="red";
            break;
        case "mouseout":this.style.backgroundColor="";
            break;
    }

六、键盘抬起事件、百度搜索大项目

//键盘抬起事件
对象.onkeyup=function(){};
//键盘按下事件
对象.onkeydown=function(){};

七、BOM

JavaScript分三个部分：

1、ECMAScript标准------>基础语法

2、DOM-------->Document Object Model 文档对象模型,操作页面元素的

3、BOM-------->Broowser Object Model 浏览器对象模型,操作浏览器的

浏览器中的有个顶级对象：window------>皇上

页面中的顶级对象：document--------->总管太监

页面中所有的内容都是属于浏览器的,页面中的内容也都是window的

因为页面中所有内容都是window的，window是可以省略的

八、页面加载事件

事件名:window.onload / window可以省略

只要页面加载完毕,这个事件就会触发

页面中所有的内容,标签、属性、文本,包括外部引入JS文件

window.onload=function(){
	页面加载完毕后，需要啊执行的语句·····
}

九、location对象

设置跳转页面(两种方式)

1、location.href="http://www.jd.com";//属性
2、location.assign("http://www.jd.com");//方法

location.reload();//重新加载--刷新
location.replace("http://www.jd.com");//没有历史记录

	//地址栏上?号后面#及后面的内容
    console.log(window.location.hash);
    //主机名及端口号
    console.log(window.location.host);
    //主机名
    console.log(window.location.hostname);
    //文件的路径---相对路径
    console.log(window.location.pathname);
    //端口号
    console.log(window.location.port);
    //协议
    console.log(window.location.protocol);
    //搜索的内容
    console.log(window.location.search);

十、history对象和navigator对象

1、history对象、跳转到该页面,才能前进和后退

前进：window.history.forward();

后退：window.history.back();

2、navigator对象、通过userAgent可以判断浏览器类型,重要

查看浏览器版本类型：console.log(window.navigator.userAgent);

通过platform可以判断浏览器所在的系统平台类型: 了解即可··

console.log(window.navigator.platform);

十一、定时器、清理定时器

setInterval( fn, 1000); //定时器

参数1：函数

参数2：时间----->毫秒

返回值就是定时器id值

执行过程：页面加载完毕后，过了1秒，执行一次函数代码，又过了1秒再执行函数…

clearInterval(id值); //清理定时器

参数1：setInterval返回的id值