为元素绑定多个事件
绑定事件的区别
事件绑定的方法：
addEventListener();
attachEvent();
相同点：都可以为事件绑定元素
不同点：
- 方法名不一样；
- 参数个数不一样；
- addEventListener()谷歌、火狐、IE11支持，IE8不支持；attachEvent()谷歌、火狐、IE11不支持，IE8支持；
- this不同，在addEventListener中的this是当前绑定事件的对象，attachEvent中的this是window；
- addEventListener中事件的类型（事件名字）没有on，attachEvent中的事件类型（事件名字）没有on
移除绑定事件的方式及区别和兼容代码
注意：用什么方式绑定事件，就应该用对应的方式解绑事件
- 对象.on事件名字 = 事件处理函数 -- 绑定事件
对象.on事件名字 = null; - 对象.addEventListener("没有on的事件类型",命名函数,false);
对象.removeEventListener("没有on的事件类型",命名函数,false) - 对象.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这个属性，可以知道当前事件是什么阶段的。一般默认都是冒泡阶段，很少用捕获阶段。
- 事件捕获阶段：从外向内
- 事件目标阶段：最开始选择的那个
- 事件冒泡阶段：从里向外
// 事件触发过程中，可能会出现事件冒泡的效果，为了阻止事件冒泡
addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的);
地址解析
- 历史记录的后退和前进：history -- back();后退 forward(); 前进
- 地址栏上的地址的操作：location -- href属性跳转页面， assgin()跳转页面, reload()刷新 ， replace() 方法替换地址栏上的地址的，没有历史记录
- 获取系统和浏览器的信息 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);
}
}
