事件
事件是DOM(文档对象模型)的一部分。事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别。
一、事件流
1、冒泡型事件
IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目标到最不特定的事件目标(document对象)的顺序触发。
过程:按照DOM的层次结构像水泡一样不断上升至顶端。(从里面的div触发事件再到body,到html最后直到document最顶端)。
2、捕获型事件
可以说跟冒泡是正好相反的,事件从最不精确的对象开始触发,然后直到最精确。
3、DOM事件流
DOM同时支持以上两种事件模型,其中捕获型事件先发生,从document对象开始,最后在document对象结束。
二、事件监听函数
1、IE
每个函数和window对象都有两个方法:
attachEvent()方法:附加事件处理函数
[Object].attachEvent(“事件名”,处理函数fnHandler);
该方法有两个参数。
var fnClick = function() {
alert("你点击了ID为div1的DIV");
}
var oDiv = document.getElementById("div1");
oDiv.attachEvent("onclick", fnClick);
可以附加多个处理函数。
detachEvent()方法:分离移除事件处理函数
2、DOM
addEventListener()方法:分配附加事件处理函数
[Object]. addEventListener (“事件名”,处理函数fnHandler,Boolean);
该方法有三个参数(“事件名”,“分配的函数”,处理函数是冒泡阶段还是捕获阶段)
如果事件处理函数是用于捕获阶段,则第三个参数是true,用于冒泡阶段则为false
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
可以附加多个处理函数。
removeEventListener()方法:移除事件处理函数
三、事件对象
包含三个方面的信息:
1、引起事件的对象:IE中就是window.event,DOM中是处理函数的为唯一参数;
2、事件发生时的鼠标信息;
3、事件发生时的键盘信息。
IE事件对象
在IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
尽管是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后销毁。
DOM标准的事件对象
event对象必须作为唯一的参数传给事件处理函数。所以,在DOM兼容的浏览器(如Mozilla,Safari和Opera)中访问事件对象,要这么做:
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//也可以这样
oDiv.onclick = function(oEvent) {
//.....
}
事件是DOM(文档对象模型)的一部分。事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别。
一、事件流
1、冒泡型事件
IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目标到最不特定的事件目标(document对象)的顺序触发。
过程:按照DOM的层次结构像水泡一样不断上升至顶端。(从里面的div触发事件再到body,到html最后直到document最顶端)。
2、捕获型事件
可以说跟冒泡是正好相反的,事件从最不精确的对象开始触发,然后直到最精确。
3、DOM事件流
DOM同时支持以上两种事件模型,其中捕获型事件先发生,从document对象开始,最后在document对象结束。
二、事件监听函数
1、IE
每个函数和window对象都有两个方法:
attachEvent()方法:附加事件处理函数
[Object].attachEvent(“事件名”,处理函数fnHandler);
该方法有两个参数。
var fnClick = function() {
alert("你点击了ID为div1的DIV");
}
var oDiv = document.getElementById("div1");
oDiv.attachEvent("onclick", fnClick);
可以附加多个处理函数。
detachEvent()方法:分离移除事件处理函数
2、DOM
addEventListener()方法:分配附加事件处理函数
[Object]. addEventListener (“事件名”,处理函数fnHandler,Boolean);
该方法有三个参数(“事件名”,“分配的函数”,处理函数是冒泡阶段还是捕获阶段)
如果事件处理函数是用于捕获阶段,则第三个参数是true,用于冒泡阶段则为false
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
可以附加多个处理函数。
removeEventListener()方法:移除事件处理函数
三、事件对象
包含三个方面的信息:
1、引起事件的对象:IE中就是window.event,DOM中是处理函数的为唯一参数;
2、事件发生时的鼠标信息;
3、事件发生时的键盘信息。
IE事件对象
在IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
尽管是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后销毁。
DOM标准的事件对象
event对象必须作为唯一的参数传给事件处理函数。所以,在DOM兼容的浏览器(如Mozilla,Safari和Opera)中访问事件对象,要这么做:
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//也可以这样
oDiv.onclick = function(oEvent) {
//.....
}
标签:
JavaScript,学习笔记
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“JavaScript 学习笔记(十五)”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。