为元素绑定多个事件
绑定事件的区别
事件绑定的方法:
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);
}
}
网友评论