web前端 -- Day20 js基础

为元素绑定多个事件

绑定事件的区别
事件绑定的方法：

addEventListener(); 
attachEvent();

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

1. 方法名不一样；
2. 参数个数不一样；
3. addEventListener()谷歌、火狐、IE11支持，IE8不支持；attachEvent()谷歌、火狐、IE11不支持，IE8支持；
4. this不同，在addEventListener中的this是当前绑定事件的对象，attachEvent中的this是window；
5. addEventListener中事件的类型（事件名字）没有on，attachEvent中的事件类型（事件名字）没有on

移除绑定事件的方式及区别和兼容代码
注意：用什么方式绑定事件，就应该用对应的方式解绑事件

1. 对象.on事件名字 = 事件处理函数 – 绑定事件
   对象.on事件名字 = null;
2. 对象.addEventListener(“没有on的事件类型”,命名函数,false);
   对象.removeEventListener(“没有on的事件类型”,命名函数,false)
3. 对象.attachEvent(“有on的事件类型”,命名函数);
   对象.detachEvent(“有on的事件类型”,命名函数);

// 绑定事件的兼容代码
function addEventListener(element,type,fn){
    if(element.addEventListener){
        element.addEventListener(type,fn,false)
    }else if (element.attachEvent) {
        element.attachEvent(type,fn)
    }else {
        element["on"+type] = fn;
    }
}
// 解绑事件的兼容代码
function removeEventListener(element,type,fn){
    if(element.removeEventListener){
        element.removeEventListener(type,fn,false)
    }else if (element.detachEvent) {
        element.detachEvent(type,fn)
    }else {
        element["on"+type] = null;
    }
}

事件冒泡

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

如何阻止事件冒泡？？？

// 谷歌、IE 支持，火狐不支持
window.event.cancelBubble = true;
// 谷歌火狐支持
e.stopPropagation(); 

window.event和e.stopPropagation()都是事件参数对象，一个是IE的标准，一个是火狐的标准，事件参数e在IE8的浏览器中是不存在，此时用window.event代替。

事件的三个阶段

事件阶段：三个阶段，通过e.eventPhase这个属性，可以知道当前事件是什么阶段的。一般默认都是冒泡阶段，很少用捕获阶段。

1. 事件捕获阶段：从外向内
2. 事件目标阶段：最开始选择的那个
3. 事件冒泡阶段：从里向外

// 事件触发过程中，可能会出现事件冒泡的效果，为了阻止事件冒泡
addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的);

地址解析

1. 历史记录的后退和前进：history – back();后退 forward(); 前进
2. 地址栏上的地址的操作：location – href属性跳转页面， assgin()跳转页面, reload()刷新 ， replace() 方法替换地址栏上的地址的，没有历史记录
3. 获取系统和浏览器的信息 navigator – userAgent属性：获取系统，浏览器的信息的

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);

定时器

// 返回值就是定时器的id值
var timeID =  setInterval(function(){
     alert("定时器！！！");
 },1000);

 my$("btn").onclick = function(){
     // 点击按钮，停止定时器
     // 参数：要清理的定时器的id
     window.clearInterval(timeID);
 }

参数1：时间 – 毫秒 – 1000毫秒 – 1秒
执行过程：页面加载完毕后，过了1秒，执行一次函数代码，又过了一秒再执行函数。

一次性的定时器，只执行一次
参数1：函数
参数2：时间 – 1000毫秒 – 1秒
返回值是改定时器的id
window.setTimeout(“函数”,“时间”);

var timeId= window.setTimeout(function(){alert("hello！！！");},1000);
    // 点击按钮，停止这个一次性的定时器
    my$("btn1").onclick = function () {
    clearTimeout(timeId);
    }
}