说明:本文为《JavaScript高级程序设计》第9章学习笔记。
一.今天的事件
事件是DOM的一部分,在DOM Level1中未定义任何事件,在Level中定义了一小部分子集,完整的事件是在Level3中规定的,该标准在2004年最终定案。
Mozilla的事件模式与DOM标准最为接近,IE成为唯一一个对DOM事件模式缺乏良好支持的浏览器。
二.事件流
事件流意味着在页面上可有不仅一个,甚至多个元素响应同一个事件。
1.冒泡型事件
IE上的解决方案的绰号为冒泡的技术。冒泡型事件的基本思想是,时间按照最特定的目标到最不特定的事件目标的顺序触发。
IE6.0中,<html/>元素也可接收冒泡的时间。
2.捕获型事件
Netscape Navigator4.0使用了捕获型事件的解决方案。事件从最不确定的对象(document对象)开始触发,然后到最精确。
3.DOM事件流
DOM同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触发DOM中的所有对象,从document对象开始,也在document对象结束。
DOM事件模型的最独特的性质是,文本节点也触发事件(在IE中不会)。
三.时间处理函数/监听函数
事件是用户或浏览器自身进行的特定行为。这些事件都有自己的名字,如click、load等。用于响应某个事件而调用的函数称为事件处理函数。
如果是JavaScript中分配的事件处理函数,则需要首先获得要处理对象的引用,然后将函数赋值给事件处理函数属性,eg1.
varoDiv=document.getElementById(“div1”);
oDiv.onclick=function(){
alert(“Iwasclicked.”);
}
用这个分配方法,事件处理函数必须小写,才能正确响应事件。
Eg2. <div onclick=”alert(‘I was clicked.’)”></div>
在例二中,事件处理函数的大小写可以任意
1.IE
在IE中,每个元素和window对象都有两个方法:attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.
varfnClick=function(){
alert(“Clicked!”);
}
varoDiv=document.getElementById(“div1”);
oDiv.attachEvent(“onclick”,fnClick);
oDiv.detachEvent(“onclick”,fnClick);
2.DOM
DOM方法addEventListener()和removeEventListener()用来分配和移除事件处理函数。与IE不同,这些方法需要三个参数:事件名称、要分配的函数和处理函数用于冒泡阶段(为false时)还是捕获阶段(为true时)。Eg.
oDiv. addEventListener (“onclick”, fnClick, false);
oDiv.removeEventListener (“onclick”, fnClick, false);
如果使用传统方法直接给事件处理函数属性赋值,事件处理函数将被添加到事件的冒泡阶段,eg.
oDiv.onclick = fnClick;
oDiv.removeEventListener (“onclick”, fnClick, false);
四.事件对象
事件对象只在发生事件时才被创建,且只有事件处理函数才能访问。所有事件处理函数执行完毕后,事件对象就被销毁。
1.定位
在IE中,事件对象是window对象的一个属性event,也就是说,事件处理函数必须这样访问事件对象:
oDiv.onclick = function() {
var oEvent = window.event;
}
Event对象只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就被销毁。
2.属性/方法
见页面233-235页,在此不详述。
3.相似性
1)获取事件类型
下面代码可在任何浏览器中获取事件的类型:
var sType = oEvent.type;
它返回“click”或“mouseover”之类的值。Eg.
functionhandleEvent(oEvent){
if(oEvent.type==“click”){
alert(“Clicked!”);
}elseif(oEvent.type==“mouseover”){
alert(“mouseover!”);
}
}
oDiv.onclick=handleEvent;
oDiv.onmouseover=handleEvent;
2)获取按键代码
Eg. var iKeyCode = oEvent.keyCode;
例如,Enter键的keyCode为13,空格键的keyCode为32,回退键为8.
3)检测Shift、Alt和Ctrl键
Eg.var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;
4)获取客户端坐标
Eg. var iClientX = oEvent.clientX;
var iClientY = oEvent.clientY;
5)获取屏幕坐标
可用screenX和screenY属性来获取鼠标指针在计算机屏幕中的位置
var iScreenX = oEvent.screenX;
var iScreenY = oEvent.screenY;
4.区别
1)获取目标
在IE中:var oTarget = oEvent.srcElement;
在DOM兼容的浏览器中:var oTarger = oEvent.target;
2)获取字符代码
在IE中:var iCharCode = oEvent.keyCode;
在DOM兼容的浏览器中:var iCharCode = oEvent.charCode;
3)阻止某个事件的默认行为
在IE中:oEvent.returnValue = false;
在DOM兼容的浏览器中:oEvent.preventDefault();
4)阻止事件复制(冒泡)
在IE中:oEvent.cancelBubble = true;
在mozilla中:oEvent.stopPropagation ();
五.事件的类型
DOM标准定义了以下几种事件:
鼠标事件
键盘事件
HTML事件:窗口发生变动或者发生特定的客户端-服务端交互时触发;
突变事件:底层的DOM结构发生改变时触发。
1.鼠标事件
Eg. click、dbclick、mousedown、mouseout、mouseover、mouseup、mouseover。
1)属性
Eg.坐标属性(eg。clientX和clientY等)、type属性、target或srcElement属性、shiftKey、ctrlKey、altKey、metaKey(DOM)属性、button属性(只在mousedown、mouseover、mouseout、mouseover和mouseup事件中)。
2)顺序
在同一个目标上要按顺序发生以下事件: mousedown->mouseup->click->mousedown->mouseup->click->dbclick。
2.键盘事件
键盘事件有:keydown、keypress和keyup。
1)事件的属性
对某个键盘事件,会填入如下的事件属性: keyCode、charCode(仅DOM)、target(DOM)或者srcElement(IE)、shiftKey、ctrlKey、altKey、metaKey(DOM)属性。
2)顺序
按下一个字符键,发生事件顺序为: keydown->keypress->keyup;
按下一个非字符键,发生事件顺序为:keydown->keyup。
3.HTML事件
HTML事件有: load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur事件。
1)load和unload事件
eg. window.onload = function() {
alert(“loaded!”);
}
2)resize事件
resize事件用来判断何时动态的改变某些元素。Eg.
<body onresize=”alert(‘Resizing’)”>
最大化或最小化窗口时,也会触发resize事件。
3)Scroll事件
Eg. <body onscroll=”alert(‘Scroll)”>
4.变化事件
变化事件包括如下内容:
DOMSubtreeModified——当文档或者元素的子树因为添加或删除节点而改变时触发;
DOMNodeInserted——当一个节点作为另一个节点的子节点插入时触发;
DOMNodeRemoved——当一个节点作为另一个节点的子节点删除时触发;
DOMNodeRemovedFromDocument——当一个节点从文档中删除时触发;
DOMNodeInsertedIntoDocument——当一个节点插入到文档中时触发。
这些事件的目的是,提供一个独立于语言的事件范围,使其可使用在所有基于XML的语言中。
六.跨平台的事件
1.EventUtil对象
var EventUtil = new Object;
2.添加/删除事件处理函数
EventUtil.addEventHandler=function(){
if(oTarget.addEventListener){//对DOM兼容的浏览器
oTarget.addEventListener(sEventType,fnHandler,false);
}elseif(oTarget.attachEvent){//对IE
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=fnHandler;
}
}
EventUtil.removeHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.removeEventListener){//对DOM兼容的浏览器
oTarget.removeEventListener(sEventType,fnHandler,false);
}elseif(oTarget.detachEvent){//对IE
oTarget.detachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=null;
}
}
3.格式化event对象
一种对付IE和DOM中的event对象之间区别的最佳手段是,调整它们使之尽可能地表现相似,因为更多的浏览器使用的是DOM的事件类型,所以将IE的事件模型调整为接近于DOM事件模型就可以了。
根据DOM属性/方法与IE属性/方法的不同,最后可得出如下的格式化event对象函数,如下所示:
EventUtil.formatEvent=function(oEvent){
if(isIE&&isWin){
oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;
oEvent.eventPhase=2;
oEvent.isChar=(oEvent.charCode>0);
oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
oEvent.pageY=oEvent.clientY+document.body.scrollTop;
oEvent.preventDefault=function(){
this.returnValue=false;
};
if(oEvent.type=="mouseout"){
oEvent.relatedTarget=oEvent.toElement;
}elseif(oEvent.type=="mouseover"){
oEvent.relatedTarget=oEvent.fromElement;
}
oEvent.stopPropagation=function(){
this.cancelBubble=true;
};
oEvent.target=oEvent.srcElement;
oEvent.time=(newDate()).getTime();
}
returnoEvent;
}
4. 获取事件对象
IE和DOM使用不同的方法来获取event对象。在IE中,event对象是与window对象相关的,而在DOM中,它独立于任何其他对象,并且是作为参数传递的。下面我们编写一个通用的获取event对象的函数,代码如下:
EventUtil.getEvent=function(){
if(window.event){
returnthis.formatEvent(window.event);
}else{
returnEventUtil.getEvent.caller.arguments[0];
}
}
调用举例如下:
oDiv.onclick=function(){
varoEvent=EventUtil.getEvent();
}
七. 小结
本章详细介绍了JavaScript中事件、事件流的概念,详细研究了event对象,最后一节还创建了一个跨浏览器事件库,可使用同一套方法来访问事件对象,添加/删除事件处理函数,而无需考虑浏览器检测的问题。
相关推荐
基于智能温度监测系统设计.doc
包括userCF,itemCF,MF,LR,POLY2,FM,FFM,GBDT+LR,阿里LS-PLM 基于深度学习推荐系统(王喆)
2023-04-06-项目笔记-第三百五十五阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.353局变量的作用域_353- 2024-12-22
和美乡村城乡融合发展数字化解决方案.docx
基于Python的深度学习图像识别系统是一个利用卷积神经网络(CNN)对图像进行分类的先进项目。该项目使用Python的深度学习库,如TensorFlow,构建和训练一个模型,能够自动识别和分类图像中的对象。系统特别适合于图像处理领域的研究和实践,如计算机视觉、自动驾驶、医疗影像分析等。 项目的核心功能包括数据预处理、模型构建、训练、评估和预测。用户可以上传自己的图像或使用预定义的数据集进行训练。系统提供了一个直观的界面,允许用户监控训练进度,并可视化模型的性能。此外,系统还包括了一个模型优化模块,通过调整超参数和网络结构来提高识别准确率。 技术层面上,该项目使用了Python编程语言,并集成了多个流行的机器学习库,如NumPy、Pandas、Matplotlib等,用于数据处理和可视化。模型训练过程中,系统会保存训练好的权重,以便后续进行模型评估和预测。用户可以通过简单的API调用,将新的图像输入到训练好的模型中,获取预测结果。
拳皇97.exe拳皇972.exe拳皇973.exe
基于python和协同过滤算法的电影推荐系统 基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法的电影推荐系统基于python和协同过滤算法
DEV-CPP-RED-PANDA
Python语言求解旅行商问题,算法包括禁忌搜索、蚁群算法、模拟退火算法等。
pdfjs 用于在浏览器中查看/预览/打印pdf。 pdfjs 2.5.207 支持firefox/chrome/edge/ie11以上版本。 如果需要支持旧版本浏览器,可以使用这个,是未修改过的原版,支持打印和下载按钮。亲测有效。 pdf 4.9.155分两个包: pdfjs-4.9.155-dist.zip pdfjs-4.9.155-legacy-dist.zip
建设项目现场高温人员中暑事故应急预案
数据结构上机实验大作业-线性表选题.zip
【资源说明】 基于高德地图的校园导航全部资料+详细文档+高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
【静态站群程序视频演示,只有视频,不含程序,下载须知】【静态站群程序视频演示,只有视频,不含程序,下载须知】全自动批量建站快速养权重站系统【纯静态html站群版】:(GPT4.0自动根据关键词写文章+自动发布+自定义友链+自动文章内链+20%页面加提权词)
9.30 SWKJ 男头7张+女头2张.zip
项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea、vscode 数据库:MySql5.7以上 部署环境:maven 数据库工具:navicat
一个通过单片机在各种屏幕上显示中文的解决方案.7z
图像
一、用户管理功能 用户注册与登录 学生注册:学生可以通过手机号、邮箱、社交账号等方式注册,填写个人信息(如姓名、年龄、学校等)。 家长/监护人账户:支持家长/监护人注册并管理学生账户,查看学习进度和成绩。 教师账户:教师可以注册并设置个人资料,上传资质认证文件。 管理员账户:管理员负责整个系统的管理,包括用户管理、课程管理、平台设置等。 用户权限管理 角色权限:系统根据用户类型(学生、家长、教师、管理员)分配不同权限,确保信息安全。 家长监督:家长可以查看子女的学习进度、成绩和教师反馈,参与学习监督。 个人资料管理 用户可以在个人中心更新基本信息,设置个人头像、联系方式、密码等。 支持学籍信息的维护,例如学生的年级、班级、课程历史等。 二、课程管理功能 课程设置 课程创建与编辑:教师或管理员可以创建和编辑课程内容,上传课件、视频、文档等教学材料。 课程分类:根据学科、年级、难度等维度进行课程分类,方便学生浏览和选择。 课程排课:管理员可以设置课程的时间表、教学内容和授课教师,并调整上课时间和频率。 课程安排与通知 课程预约:学生可以在线选择并预约感兴趣的课程,系统根据学生的时
内容概要:本文档介绍了英特尔2021年至2024年的网络连接性产品和智能处理单元(IPU)的战略和技术路线图。涵盖了从10GbE到200GbE的不同系列以太网适配器的特性、性能和发布时间。详细列出了各个产品的关键功能,如PCIe接口、安全特性、RDMA支持等。同时,介绍了IPU的发展计划,包括200G、400G和800G的不同代次产品的性能提升和新的功能特点。 适合人群:从事网络工程、数据中心管理、IT架构设计的专业技术人员。 使用场景及目标:本文档主要用于了解英特尔未来几年在以太网适配器和IPU领域的技术和产品规划,帮助企业在采购和部署网络设备时做出决策。同时,为研究人员提供最新技术发展趋势的参考。 其他说明:文档内容涉及的技术细节和时间表可能会有变动,请以英特尔官方发布的最新信息为准。