javascript的三种事件模型
Event(事件模型)
Javascript的事件模型
走上.net软件工程师的道路
本章目标
事件流 事件接口 HTML事件 鼠标事件 事件模型
事件
DOM level1(没有事件) DOM level2(一小部分子集) DOM level3(完整的事件模型) 浏览器
IE 专有事件模型 Mozilla FF 与DOM事件标准最为接近
事件中的this
<img src=―‖ onclick=―this.src=‗url‘ ‖> 事件处理函数会被认为是分配给对象的方法。
对老式浏览器隐藏脚本
<!--开始隐藏
脚本代码
//隐藏结束-->
IE： oEvent.cancelBubble=true; FF: oEvent.stopPropБайду номын сангаасgation();
阻止事件源缺省行为
IE： oEvent.returnValue=false; FF: oEvent.preventDefault();
得到事件源对象
IE： oEvent.srcElement; DOM: oEvent. target;
HTML事件
HTML事件句柄1
load/unload/abort(停止加载 )/error(js出 错)/select/change/submit/reset/resize/scroll/focus/blur load/unload/resize/scroll分配给window
window.onload (<body onload=‗‘>最终还是通过window.onload实现，此为js 规定，因为window不能直接控制document，所以借以实现。 document.body.onload在head 部分执行会出现问题。因为此时的body还未产 生，所以应用：window.onload)
javascript的常用事件有哪些
javascript的常⽤事件有哪些javascript常⽤事件：click、dblclick、mouseup、mouseout、keypress、keydown、keyup、error、load、resize、unload、blur、change、focus、reset等。
JavaScript 的⼀个基本特征就是事件驱动。
所谓事件驱动，就是当⽤户执⾏了某种操作或 Javascript 和 html 交互后导致了某种状态改变后，会因此⽽引发⼀系列程序的响应执⾏。
在这⾥，⽤户的操作称为事件，程序对事件作出的响应称为事件处理。
事件处理，是指程序对事件作出的响应。
事件，对 JavaScript 来说，就是⽤户与 Web 页⾯交互时产⽣的操作或 Javascript 和 html 交互后导致发⽣变化某种状态的事情，⽐如移动⿏标、按下某个键、单击按钮等操作以及表⽰ Ajax 的⼯作状态发⽣变化、表⽰动画已经完成运⾏等。
事件处理中涉及的程序称为事件处理程序。
事件处理程序通常定义为函数。
在 Web 页⾯中产⽣事件的界⾯元素，称为事件源。
在不同事件源上可以产⽣相同类型的事件，同⼀个事件源也可以产⽣不同类型的事件。
JS 程序通过指明事件类型和事件源，并对事件源绑定事件处理程序，这样，⼀旦事件源发⽣指定类型的事件，浏览器就会调⽤事件源所绑定的处理程序进⾏事件处理。
所以事件处理涉及的⼯作包括事件处理程序的定义及其绑定。
在 Web 页⾯中，⽤户可进⾏的操作有很多，⽽每⼀种操作都将产⽣⼀个事件。
下⾯给⼤家介绍⼀下javascript常⽤事件。
JavaScript 常⽤事件事件描述⿏标事件 click ⽤户单击⿏标时触发此事件dblclick ⽤户双击⿏标时触发此事件mousedown ⽤户按下⿏标时触发此事件mouseup ⽤户按下⿏标后松开⿏标时触发此事件mouseover 当⽤户将⿏标的光标移动到某对象范围的上⽅时触发此事件mousemove ⽤户移动⿏标时触发此事件mouseout 当⽤户⿏标的光标离开某对象范围时触发此事件mousewheel 当滚动⿏标滚轮时发⽣此事件,只针对 IE 和 Chrome 有效DOMMouseScroll 当滚动⿏标滚轮时发⽣此事件，针对标准浏览器有效键盘事件 keypress 当⽤户键盘上的某个字符键被按下时触发此事件keydown 当⽤户键盘上某个按键被按下时触发此事件keyup 当⽤户键盘上某个按键被按下后松开时触发此事件窗⼝事件 error 加载⽂件或图像发⽣错误时触发此事件load 页⾯内容加载完成时触发此事件resize 当浏览器的窗⼝⼤⼩被改变时触发此事件unload 当前页⾯关闭或退出时触发此事件表单事件 blur 当表单元素失去焦点时触发此事件click ⽤户单击复选框、单选框、普通按钮、提交按钮和重置按钮等按钮时触发此事件change 表单元素的内容发⽣改变并且元素失去焦点时触发此事件focus 当表单元素获得焦点时触发此事件reset ⽤户单击表单上的重置按钮时触发此事件select ⽤户选择了⼀个 input 或 textarea 表单元素中的⽂本时触发此事件submit ⽤户单击提交按钮提交表单时触发此事件。
第七章 JavaScript事件
Page 13
三、事件处理程序
前面我们已经介绍过，响应某个事件的函数就叫事件处理 程序。为事件绑定事件处理程序的方式主要有以下三种： HTML事件处理程序 该方法是直接在HTML标记中指定事件处理程序。如：
或者
例题7-2.html
7-2-1.html
Page 14
三、事件处理程序
* 缺点：HTML与JavaScript代码紧密耦合。如果要更换事件 处理程序，就用改动两个地方：HTML代码和JavaScript代 码。 DOM 0级事件处理程序 ☞ 添加事件处理程序：对象.事件=事件处理程序
二、事件流
单击<div>M事件流中，实际的目标（<div>元素）在捕获阶段捕获接收到事 件。这意味着在捕获阶段，事件从document到<html>再到<body>后就 停止了。下一个阶段是“处于目标”阶段，于是事件在<div>上发生， 并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事 件又传播回文档。
Page 23
四、事件对象
属性/方法 preventDefault() stopImmediatePr opagation() 类型 读/写 说明 取消事件的默认行为，如果cancelable是true ，则可以使用这个方法 取消事件的进一步捕获或冒泡，同时阻止任何 事件处理程序被调用
Function 只读 Function 只读
也就是说，click事件首先在<div>元素上发生，而这个元素就是我们 单击的元素，然后，click事件沿着DOM树向上传播，在每一级节点上 都会发生，直至传播到document对象。如下图：
*所有现代浏览器都支持事件 冒泡，IE9、FF、Chrome、 Safari会将事件一直冒泡到 window对象。
js原生3种自定义事件方法(createEventinitinitMouseUIEven
js原生3种自定义事件方法（createEventinitinitMouseUIEven 在JavaScript中，我们可以使用原生的方式来创建和触发自定义事件。
下面将介绍三种常用的方法：createEvent、initEvent和dispatchEvent。
1. createEvent方法：createEvent方法是用于创建一个新的自定义事件对象。
该方法接受一个参数，用于指定事件类型。
常见的事件类型有"CustomEvent"、"MouseEvent"、"UIEvent"等。
示例代码：```javascriptvar event = document.createEvent("CustomEvent");```2. initEvent方法：initEvent方法是用于初始化自定义事件对象的属性。
该方法接受三个参数，分别是事件类型、是否冒泡以及是否可以取消默认行为。
示例代码：```javascriptevent.initEvent("myEvent", true, true);```3. dispatchEvent方法：dispatchEvent方法是用于触发自定义事件。
该方法接受一个参数，即要触发的事件对象。
示例代码：```javascriptdocument.dispatchEvent(event);```综合示例：```javascript//创建自定义事件对象var event = document.createEvent("CustomEvent");//初始化事件对象event.initEvent("myEvent", true, true);//添加事件监听器document.addEventListener("myEvent", function(e)console.log("自定义事件已触发");});//触发自定义事件document.dispatchEvent(event);```除了上述方法，我们还可以使用其他一些特定类型的事件方法来创建和触发自定义事件，如MouseEvent、KeyboardEvent等。
前端开发与数据库交互考试
前端开发与数据库交互考试（答案见尾页）一、选择题1. 前端开发中常用的HTML和CSS技术是用来做什么的？A. 用于页面布局和样式设计B. 用于实现网页上的动画效果C. 用于开发交互式的Web应用程序D. 用于服务器端的编程2. 在前端开发中，以下哪个选项不是用于响应式设计的布局方式？A. 相对布局B. 绝对布局C. 流式布局D. 网格布局3. 前端开发中，JavaScript的主要作用是什么？A. 处理用户输入B. 提供页面动态效果C. 控制DOM操作D. 执行服务器请求4. 前端开发中，哪种技术可以实现网页的异步加载和更新？A. AJAXB. WebSocketC. FormDataD. localStorage5. 在数据库中，哪个概念描述了关系表中的一列或多列之间的关系？A. 主键B. 外键C. 存储过程6. 数据库管理系统（DBMS）的主要功能是什么？A. 存储数据B. 管理数据C. 提供数据查询D. 执行事务处理7. SQL语言中，用于查询表中所有记录的命令是？A. SELECT * FROM table_name;B. INSERT INTO table_name (column1, column2, ...) VALUES (value1, value2, ...);C. DELETE FROM table_name WHERE condition;D. CREATE TABLE8. 在前端开发中，如何使用JavaScript来验证用户输入数据的合法性？A. 使用正则表达式B. 使用事件监听器C. 使用服务器端验证D. 使用CSS样式设置9. 前端开发中，哪个框架或库常用于构建单页应用程序（SPA）？A. ReactB. AngularC. Vue.jsD. jQuery10. 在数据库管理中，如何使用备份工具来恢复丢失的数据？A. 使用MySQL Workbench进行数据恢复B. 使用phpMyAdmin进行数据恢复C. 使用操作系统命令进行数据恢复D. 使用第三方数据恢复软件11. 前端开发中，哪种技术用于实现页面的动态效果？B. CSSC. JavaScriptD. Python12. 在前端开发中，用于与数据库进行交互的常用技术是？A. AJAXB. WebSocketC. LocalStorageD. SessionStorage13. 前端开发框架中，哪个最受欢迎并广泛应用于各种项目？A. ReactB. AngularC. Vue.jsD. Backbone.js14. 在HTML中，以下哪个元素用于定义一个区域内可编辑的内容？A. <article>B. <section>C. <div>D. <span>15. 前端开发中，用于实现页面布局的CSS属性是？A. widthB. heightC. positionD. float16. 在JavaScript中，以下哪个函数用于将字符串转换为数字？A. parseInt()B. parseFloat()C. isNaN()D. isFinite()17. 在前端开发中，用于显示当前页面的URL地址的是？B. <meta>C. <link>D. <a>18. 前端开发中，哪个技术可以实现网页的多媒体播放？A. HTML5B. CSS3C. JavaScriptD. Flash19. 在前端开发中，用于实现网页表单提交功能的技术是？A. <form>B. <input>C. <button>D. <textarea>20. 前端开发中，以下哪个技术用于实现页面的动态效果？A. HTMLB. CSSC. JavaScriptD. Python21. 前端开发中，CSS样式表通常用于以下哪个目的？A. 控制页面布局B. 处理用户输入数据C. 实现页面动态效果D. 提供程序逻辑22. 在前端开发中，以下哪个技术用于与服务器进行通信？A. AJAXB. WebSocketC. HTMLD. CSS23. 前端开发中，哪种图片格式通常用于展示照片和图标？A. GIFB. PNGC. SVGD. JPEG24. 前端开发中，以下哪个框架不是用于构建用户界面的？A. ReactB. Vue.jsC. AngularD. JavaFX25. 数据库中，以下哪个概念用于组织和管理数据？A. 关系模型B. 非关系模型C. 对象关系模型D. 数据库语言26. 在数据库中，以下哪个术语用于描述数据的结构化集合？A. 表格B. 结构化查询语言（SQL）C. 数据库管理系统（DBMS）D. 数据仓库27. 前端开发中，以下哪个技术用于响应用户的操作？A. 事件监听B. AJAXC. 节流和防抖D. 动画效果28. 数据库中，以下哪个概念用于定义数据之间的关系？A. 索引B. 视图C. 存储过程D. 触发器29. 前端开发中，以下哪个技术用于实现页面的无刷新更新？A. AJAXB. WebSocketsC. LocalStorageD. Cookies30. 前端开发中，哪种不是常见的浏览器内置函数？A. alert()B. prompt()C. confirm()D. console.log()31. 在HTML中，用于插入链接的标签是？A. <a>B. <link>C. <meta>D. <script>32. 前端开发中，CSS样式表通常有哪两种写作方式？A. 内联样式B. 外部样式C. 动态样式D. 事件驱动样式33. 在JavaScript中，以下哪个不是常用的数据类型？A. stringB. numberC. booleanD. object34. 前端开发中，什么是AJAX？A. Asynchronous JavaScript and XMLB. Apache JavaScript ProjectC. JavaScript Object NotationD. Java API for XML35. 在HTML中，新的语义化标签有哪些？A. <header>B. <footer>C. <article>D. <section>36. CSS中，用于设置文本大小的属性是什么？A. font-sizeB. text-sizeC. font-weightD. text-align37. 在JavaScript中，什么是闭包？A. 一个函数在其定义域以外的地方被调用B. 一个函数包含另一个函数C. 一个函数在另一个函数内部被定义D. 一个函数只有一个执行入口38. 前端开发中，哪种布局方式通常用于响应式设计？A. FlexboxB. GridC. PositionD. Table39. 在数据库中，哪种不是常见的关系型数据库管理系统？A. MySQLB. PostgreSQLC. OracleD. MongoDB40. 前端开发中常用的技术有哪些？A. HTMLB. CSSC. JavaScriptD. PHP41. 在前端开发中，用于处理用户输入的数据并显示的是哪个部分？A. HTMLB. CSSC. JavaScriptD. Python42. 数据库中用于存储用户信息的表通常叫什么名字？A. 用户表B. 数据表C. 管理员表D. 账户表43. 前端开发中，用于和服务器进行数据交互的技术是什么？A. AJAXB. WebSocketC. SQLD. Python44. 在数据库中，用于查询数据的SQL语句是什么？A. SELECTB. INSERTC. UPDATED. DELETE45. 前端开发中，用于响应用户操作的技术是什么？A. 事件监听B. 动画效果C. 异步加载D. 跨域请求46. 在前端开发中，用于展示网页布局的是哪一部分？A. HTMLB. CSSC. JavaScriptD. Python47. 数据库中，用于定义数据结构和关系的是哪个部分？A. 表B. 视图C. 索引D. 存储过程48. 前端开发中，用于分割和组织代码的结构是什么？A. 模块化B. 组件化C. 响应式设计D. 容器化49. 在数据库中，用于备份数据的技术是什么？A. SQL备份B. 文件备份C. 物理备份D. 云备份二、问答题1. 什么是DOM？请简述DOM的作用。
js中event的用法
js中event的用法在JavaScript中，事件（event）是指用户与网页或应用程序进行交互时发生的动作或操作。
通过捕捉事件，我们可以执行一些特定的代码来响应用户的操作。
在本文中，我们将介绍JS中事件的基本概念、事件的类型、事件监听器的使用、事件对象的属性和方法以及一些常见的事件示例。
事件的基本概念：在Web开发中，事件是指由用户执行的动作，比如点击鼠标、按下键盘、滚动页面等。
当这些事件发生时，我们可以捕捉并执行一些与之相关的代码。
事件可以在浏览器内部和页面元素之间进行传递。
在JS中，每个事件都有一个对应的事件处理器（event handler），用于处理该事件发生时要执行的代码。
事件的类型：在JS中，有各种各样的事件类型，可以满足不同的需求。
常见的事件类型包括：- 鼠标事件：比如点击（click）、双击（dblclick）、移动（mousemove）、进入（mouseover）和离开（mouseout）等。
- 键盘事件：比如按下一些键（keydown）或释放一些键（keyup）等。
- 表单事件：比如提交表单（submit）、改变输入内容（change）等。
- 页面事件：比如页面加载完成（load）、页面滚动（scroll）、窗口大小改变（resize）等。
- 多媒体事件：比如视频播放（play）和音频暂停（pause）等。
事件监听器的使用：要捕捉事件并执行相应的代码，我们可以使用事件监听器（event listener）或事件处理器。
事件监听器用于“监听”特定的事件，并指定当事件发生时要执行的代码。
在JS中，我们可以使用addEventListener(方法来添加事件监听器。
该方法接受三个参数：事件名称、事件处理函数和一个可选的布尔值，用于指定事件的传播方式。
下面是一个例子，展示如何使用addEventListener(方法来添加一个鼠标点击事件监听器：```javascriptdocument.addEventListener('click', functioalert('鼠标点击了页面！');});```事件对象的属性和方法：在事件处理函数中，我们可以通过事件对象（event object）来访问和操作事件的属性和方法。
JS——各种事件
JS——各种事件⿏标事件⿏标事件指与⿏标相关的事件（滚轮），继承了MouseEvent接⼝。
问：⿏标事件有哪些？click , dblclick , mousedown , mouseup ,mousemove , mouseenter ， mouseover , mouseout , mouseleave , contextmenu( 按下右键)， wheel（滑轮滚动）【后⾯这两个也是，别忘记】mouseenter事件只触发⼀次，在⽗节点内部进⼊⼦节点，不会触发mouseenter事件，但是会触发mouseover事件。
mouseout事件和mouseleave事件，都是⿏标离开⼀个节点时触发。
两者的区别是，在⽗元素内部离开⼀个⼦元素时，mouseleave事件不会触发，⽽mouseout事件会触发。
（mouseover与mouseout这两个O字母开头的事件会受到⿏标在⼦⽗亲之间变化的影响）MouseEvent实例属性有哪些？MouseEvent接⼝继承了Event接⼝，所以拥有Event的所有属性和⽅法。
它还有⾃⼰的属性和⽅法。
screenX （屏幕）， screenY ， clientX（程序窗⼝），offsetX(返回⿏标位置与⽬标节点左侧的padding边缘的⽔平距离（单位像素）) , offsetY, clientY ，pageX,pageY(属性返回与⽂档上侧边缘的距离（单位像素）。
它们的返回值都包括⽂档不可见的部分。
这两个属性都是只读。
) ctrlKey （是否按下了ctrl键，返回布尔）， shiftKey ， altKey ， button（左键的值为0，中间1，右键2）举个例⼦：实例⽅法：getModifierState:⽅法返回⼀个布尔值，表⽰有没有按下特定的功能键。
它的参数是⼀个表⽰的字符串wheel事件：WheelEvent 接⼝继承了 MouseEvent 实例，代表⿏标滚轮事件的实例对象。
javascript鼠标及键盘事件总结及案例
javascript⿏标及键盘事件总结及案例⼀、⿏标事件1、单击事件box.onclick2、双击事件(双击时也会触发单击)box.ondblonclick3、⿏标右键box.oncontextmenu=function(){console.log('右键事件');//取消⿏标的默认事件return false;}4、按下|移动|抬起|⿏标悬浮|⿏标移开|⿏标右键onmousedown ⿏标按下onmousemove ⿏标移动onmouseup ⿏标抬起onmouseover ⿏标悬浮onmouserout ⿏标移开(从⽗集移⾄⼦集，触发out事件，紧接着触发⼦集的over事件，并可以冒泡给⽗集(触发⽗集的over)) oncontextmenu ⿏标右键onmouseenter ⿏标悬浮()onmouseleave ⿏标移开(leave默认⼦集是⽗集的⼀部分，所以从⼦集移到⽗集不会触发,enter事件也不会触发)enter:⽗集enter ⼦集enter (不⽀持冒泡)over:⼦集over ⽗集over(想当于⼦集冒泡给⽗集) (⽀持冒泡)总结：将⽗集和⾃⼰分开考虑盒⼦的悬浮离开事件，⽤over | out组合；将⼦集纳⼊⽗集的考虑当中，只考虑⽗集的相应悬浮离开事件，采⽤ enter | leave组合；单独考虑⼀个盒⼦的悬浮离开事件，都可以使⽤⼆、js的盒模型1、应⽤<style>.box{width:100px;height:100px;background:red;}</style><div class="box"></div><script>var box=document.querySelector('.box')var width=getComputedStyle(box,null).width;console.log(width)//转化成数字类型console.log(+(width.slice(0,3)))</script>==>100px2、数字字符转换var a="1213124"//转化成整型a=+a//如果待单位会转化成NaNa=parseInt(a)//字符的切割a.substr(0,3)==>123 //从0往后取3个单位a.slice(0,2)==>12 //从0取到2，前取后不取3、获取paddingheight:100px;background:red;padding:20px;position:absolute;}body{position:relative;}</style><div class="box"></div><script>var box=document.querySelector('.box')var width=getComputedStyle(box,null).width;console.log(width)//转化成数字类型console.log(+(width.slice(0,3)))var clientW=box.clientWidth//获得padding和width的总和console.log(box.clientWidth)//获得盒⼦的总⾼度(padding+height)console.log(box.clientHeight)//padding+border+widthconsole.log(box.offsetWidth)//padding+height+borderconsole.log(box.offsetHeight)//匹配绝对定位的⽅向实现(获取与定位⽗集的距离)left top console.log(box.offsetTop)console.log(box.offsetLeft)</script>三、⿏标事件的拖拽案例1.v1版本<style>.box{width:100px;height:100px;background:red;border: 10px solid black;position:absolute;}</style><div class='box'></div><script>var box=document.querySelector('.box');box.onmousedown=function(){console.log('按下');box.onmousemove=function(ev){console.log('移动');var x=ev.clientX;var y=ev.clientY;box.style.left=x-10+'px';box.style.top=y-10+'px';}};box.onmouseup=function(){console.log('取消移动');box.onmousemove=null;}</script>2、⿏标拖拽事件v2版本<style>.box{width: 100px;height: 100px;border: 10px solid red;background: black;position:absolute;top: 0;left: 0;}</style><div class="box"></div><script>var box=document.querySelector('.box');box.onmousedown=function (fa) {//将移动⿏标捕捉改成⽂档，是为了⿏标就算脱离box也不会停⽌移动 document.onmousemove=function (ev) {console.log('移动');var x=ev.clientX;var y=ev.clientY;box.style.left=x-dX+'px';box.style.top=y-dY+'px';}};box.onmouseup=function () {console.log('移开');//对⿏标移动事件删除document.onmousemove=null;}</script>四、键盘事件1、键盘按下事件(键盘按下会⼀直触发事件)<style>.box{width:100px;height:100px;background:red;}</style><div class="box"></div><script>var box=document.querySelector('.box');document.onkeydown=function(ev){// console.log(ev.keyCode);console.log(ev.which)}</script>2、键盘按下移动盒模型案例<style>.box{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}</style><div class="box"></div><script>var box=document.querySelector('.box');document.onkeydown=function(ev){console.log(ev.keyCode);switch (ev.keyCode){case 37:box.style.left=box.offsetLeft-10+'px';break;case 38:box.style.top=box.offsetTop-10+'px';break;case 39:box.style.left=box.offsetLeft+10+'px';break;case 40:box.style.top=box.offsetTop+10+'px';break;}}</script>四、javascript其他事件1、onload(⽂档加载事件)<script>//将script标签写在标签前⾯使⽤window.onload=function(){var box=document.querySelector('.box')console.log(box)}</script><div class='box'></div>2、onscroll事件window.onscroll=function(){console.log(window.scrollY);}</script><div class='box'></div><br>*1003、盒⼦显影与⿏标滚动事件的案例1)滚动⼀直触发事件<style>.box{width:100px;height:100px;background:red;position:absolute;top: 0;left: 0;}.btn{width: 50px;height: 50px;background: red;display:none;position: fixed;top: 200px;right: 100px;}</style><div class="box"></div><script>//将script标签写在标签前⾯使⽤window.onload=function(){var box=document.querySelector('.box');console.log(box);}window.onscroll=function(){var btn=document.querySelector('.btn');console.log(window.scrollY);console.log("cc");if (window.scrollY>700){console.log("bb");btn.style.display='block';btn.style.background="black"}if (window.scrollY<=700){btn.style.display='none';}}</script><div class='box'></div><div class="btn"></div>2）只触发⼀次<style>.box{width:100px;height:100px;background:red;position:absolute;top: 0;left: 0;}.btn{width: 50px;height: 50px;background: red;display:none;position: fixed;top: 200px;right: 100px;}</style><div class="box"></div>var isshow=false;window.onscroll=function(){var btn=document.querySelector('.btn'); console.log(window.scrollY);// console.log("cc");if (window.scrollY>700){if (!isshow){console.log("bb");btn.style.display='none';btn.style.background="black";isshow=true;}}else {if (isshow){btn.style.display="block";isshow=false}}}。
javascript自定义事件模型及实现
在js世界里，事件可谓是个大课题，在此讨论的自定义事件也只是冰山一角。
试想这样的场景，页面中有A、B两个模块，B模块显示的时候，会同时隐藏A模块。
按照这个流程的代码，经常会是这样的代码：这样代码的问题在于太过于流程化，B模块内置了对A模块的依赖，耦合度高。
如果要让B模块独处到另外的页面工作，就会找不到A模块而无法使用。
又或者需求变化，B模块显示的时候，同时显示一个新的C模块，那又要去B模块里添加代码，最后B模块只会依赖越来越多，越陷越深，无法自拔啊。
为了让模块间解耦，通常，会把逻辑代码抽离到一个回调函数中，通过配置去指挥代码所需要的处理。
以回调的方式，实现一个原始的类似事件的订阅方式，可以把对外部依赖的代码逻辑通过配置的方式移出模块内，实现上也很简单，可以不依赖于任何机制。
但与此同时，也存在着一定的局限性，比如只能在初始化的时候配置；不能多次添加“监听”；每个需要事件回调的方法都需要添加一个回调事件。
自定义事件如果以“写分享”这么一个事件来比喻，最开始的那种流程式的方式就好比，分享者每周写了一篇分享，并通过邮件A、B、C等N各人，分享者需要自己维护每个同学的邮件地址。
要是有一天，哪个同事离职了，还要从收件人里把他删掉，分享者跟邮件联系人耦合度很高。
而到了采用回调式的方式，就好比分享者发分享时不再需要记得有哪些人，分享者有一个收件人的群组，每次写完就往这个群组里发，不必再关心群组里有哪些人和那些人的去向。
由外部去维护这么一个联系人群组。
但对于时刻想偷懒的人来说，这个还不是最方便了，于是，有了一种新的方式，写好的分享，发表到博客中，有兴趣看分享的人去加关注。
于是，就有了下面的故事：故事描述的正是这种自定义事件的方式。
发分享者不再需要关心自己写完分享后还要做什么什么事情，也无需知道看分享的有谁谁谁，只需要认真写好分享就可以了。
而订阅分享的人，每期都能看到分享，并做相应的动作。
如此一来，分享者和看分享者之间就解耦了。
js事件详解-0-1-2级模型
事件(上)(不好意思,又是标题党)JavaScript事件列表事件解说一般事件onclick 鼠标点击时触发此事件ondblclick 鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件onmouseup 鼠标按下后松开鼠标时触发此事件onmouseover当鼠标移动到某对象范围的上方时触发此事件onmousemove 鼠标移动时触发此事件onmouseout 当鼠标离开某对象范围时触发此事件onkeypress当键盘上的某个键被按下并且释放时触发此事件.onkeydown当键盘上某个按键被按下时触发此事件onkeyup当键盘上某个按键被按放开时触发此事件页面相关事件onabort 图片在下载时被用户中断onbeforeunload当前页面的内容将要被改变时触发此事件onerror 出现错误时触发此事件onload 页面内容完成时触发此事件onmove 浏览器的窗口被移动时触发此事件onresize当浏览器的窗口大小被改变时触发此事件onscroll浏览器的滚动条位置发生变化时触发此事件onstop浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断oncontextmenu 当弹出右键上下文菜单时发生onunload 当前页面将被改变时触发此事件表单相关事件onblur 当前元素失去焦点时触发此事件onchange当前元素失去焦点并且元素的内容发生改变而触发此事件onfocus 当某个元素获得焦点时触发此事件onreset当表单中RESET的属性被激发时触发此事件onsubmit 一个表单被递交时触发此事件了解上面的事件如此简单，那么事件还有什么可讲的呢？问题一：每个事件只能注册一个函数Js代码1var oDiv = document.getElementById("oDiv");2oDiv.onclick = fn1;3oDiv.onclick =fn2;4function fn1() {alert("我被覆盖了！")}5function fn2() {alert("只有我被执行到！")}解决方案一：Js代码6obj.onclick = function () {7 fn1();8 fn2();9 fn3();10};缺陷一：需要将所有函数一次添加进去，不能在运行时添加缺陷二：在事件处理函数中this将指向window,而不是obj解决方案二：Js代码11function addEvent(fn,evtype,obj) {12 //obj是要添加事件的HTML元素对象13 //evtype是事件名字，不包含on前缀，因为每个都有on，所以写个on是多余的14 //fn是事件处理函数15var oldFn;16if (obj["on"+evtype] instanceof Function) {17 oldFn = obj["on"+evtype];//当添加函数时，如果已注册过了，则将其保存起来18 }19 obj["on"+evtype]=function () {20if (oldFn) {21 oldFn.call(this);22 }23 fn.call(this);//使用call方法，使事件处理函数中的this仍指向obj24 };25}这样已经解决了问题，但如何删除事件呢？如果直接将对象的onevtype这类的属性赋值为null将会删除所有的事件处理函数！解决方案二的修改版：先将事件存储起来，存储在对象的__EventHandles属性里面Js代码26eventHandlesCounter=1;//计数器，将统计所有添加进去的函数的个数,0位预留作其它用27function addEvent(fn,evtype,obj) {28if(!fn.__EventID) {//__EventID是给函数加的一个标识，见下面给函数添加标识的部分29 fn.__EventID=eventHandlesCounter++;30 //使用一个自动增长的计数器作为函数的标识以保证不会重复31 }32if (!obj.__EventHandles) {33 obj.__EventHandles=[];//当不存在，也就是第一次执行时，创建一个，并且是数组34 }35if (!obj.__EventHandles[evtype]) {//将所有事件处理函数按事件类型分类存放36 obj.__EventHandles[evtype]={};//当不存在时也创建一个散列表37if (obj["on"+evtype] instanceof Function) {38 //查看是否已经注册过其它函数39 //如果已经注册过，则将以前的事件处理函数添加到下标为0的预留的位置40 obj.__EventHandles[evtype][0]=obj["on"+evtype];41 obj["on"+evtype]=handleEvents;//使用handleEvents集中处理所有的函数42 }43 }44 obj.__EventHandles[evtype][fn.__EventID]=fn;45 //如果函数是第一次注册为事件处理函数，那么它将被添加到表中，函数的标识作为下标46 //如果函数已经注册过相同对象的相同事件了，那么将覆盖原来的而不会被添加两次47function handleEvents() {48var fns = obj.__EventHandles[evtype];49for (var i in fns) {50 fns[i].call(this);51 }52 }53}使用上面的函数已经可以在一个对象添加多个事件处理函数，在函数内部this关键字也指向了相应的对象，并且这些函数都被作了标识，那么移除某个事件处理函数就是轻而易举的了！Js代码54//使用传统方法：obj.onevtype = null;但这样会移除所有的事件处理函数55function delEvent(fn,evtype,obj) {56if(!obj.__EventHandles || !obj.__EventHandles[evtype] || !fn.__EventID) {57return false;58 }59if (obj.__EventHandles[evtype][fn.__EventID] == fn) {60delete obj.__EventHandles[evtype][fn.__EventID];61 }62 }-------------------------------------------------新手的分隔线----------------------------------------------------------------事件(下)事件对象——Event事件对象是用来记录一些事件发生时的相关信息的对象。
JavaScript中常用的事件
JavaScript中常⽤的事件1.onclick事件点击事件（onclick并不是js中的⽅法，onclick只是浏览器提供js的⼀个dom接⼝，让js可以操作dom，所以onclick⼤⼩写都是没问题的，⽐如HTML代码就不⽤区分⼤⼩写）例：<%@pagelanguage="Java"import="java.util.*"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>JavaScript的⼀些常⽤⽅法</title><scripttype="text/javascript">functionmyFunction(){alert("测试onclick点击事件");}</script></head><body><center><buttononclick="myFunction()">点击这⾥</button></center></body></html>onclick通常在下列基本对象中产⽣：button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)2.onload事件可以body执⾏，<bodyonload="alert(123)"></body>,其中onload后⾯可以写⼀个⽅法，如：onload="test()",然后在JavaScript中写⼀个test()⽅法，则在页⾯⼀开始加载的时候会先调⽤这个⽅法<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>JavaScript的⼀些常⽤⽅法</title><scripttype="text/javascript">functiontest(){alert("测试onload⽅法");}</script></head><bodyonload="test()"></body></html>注意：此⽅法只能写在<body>标签之中3.onchange事件事件在内容改变的时候触发，和jQuery中的change()⽅法⼀样当内容改变时触发。
javascript知识点
javascript知识点JavaScript（简称“JS”）是一种直译式脚本语言，是一种动态类型的、弱类型的、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML 网页增加动态功能。
JavaScript知识点包括：1、JavaScript 核心：JavaScript 是一种脚本语言，它支持面向对象的编程，也支持函数式编程，以及命令式编程等多种风格。
JavaScript 的核心包括：语法、变量、运算符、表达式、关键字、语句、注释和函数。
2、DOM（文档对象模型）：DOM 将 HTML 文档分解成一系列可访问的节点，它们可以使用 JavaScript 来操作，例如添加、删除、修改和查找元素。
3、BOM（浏览器对象模型）：BOM 提供了一系列的API，用于访问浏览器的特性，例如窗口、导航历史、计时器等，可以使用 JavaScript 来操作。
4、Ajax：Ajax 是一种异步的 Web 开发技术，可以使用 JavaScript 和 XMLHttpRequest 对象来访问服务器，从而实现异步数据交互和更新网页内容。
5、jQuery: jQuery 是一套前端 JavaScript 库，可以通过简单的 API 来操作 DOM，实现动画效果、事件处理、Ajax 交互等。
6、Node.js：Node.js 是一个基于 JavaScript 语言的服务端开发平台，可以使用 JavaScript 编写服务端应用程序，并且可以与浏览器端的 JavaScript 代码共享同一种 API。
7、AngularJS：AngularJS 是一个前端 JavaScript 框架，可以使用 AngularJS 快速开发 Web 应用，它拥有模块、控制器、视图、指令等概念，使得前端开发变得更加容易。
javascript事件与委托
浏览模式: 标准 | 列表全部文章div 滚动条点击事件处理Submitted by chen0908 on 2012, May 23, 10:21 AM在用div模拟各种效果时候，div拥有滚动条，点击滚动条并不会触发 div的click事件。
(火狐内核可以) 替代解决方案可以把click 换成 Focus事件。
div本身Focus事件是不能被激活的，需要在div上有 tabindex属性。
Tags: 滚动条, click, divCSS&JS学习 | 评论:0 | Trackbacks:0 | 阅读:537for in 在webkit内核下面的特殊Submitted by chen0908 on 2012, May 23, 10:17 AMfor in循环如果遍历的对象的属性名是可以自动转换为数值型的字符串，在webkit下面会自动排序。
var json={"2":2,"4":"4","6":6,"1":1};var html="";for(var a in json){html+=json[a]}alert(html);ie浏览器输入的是 2461，webkit内核输入的是1234 解决方案是把属性名换成不能自动转换成数值的字符串比如说 _2 _4 _6 _1Tags: for in, chrome, webkitCSS&JS学习 | 评论:0 | Trackbacks:0 | 阅读:417javascript 事件委托Submitted by chen0908 on 2011, October 18, 11:59 AM7. 事其中提到了一个非常重要的概念就是事件委托。
事件委托的概念是基于事件触发的冒泡机制的。
XML/HTML代码1.<!DOCTYPE HTML>2.<html>3.<head>4.<meta http-equiv="Content-Type" content="text/html; charset=gb2312">5.<title>冒泡机制demo</title>6.<script src="jquery-1.6.4.min.js"></script>7.<script>8.$(function(){9. $('*').click(function(){10. alert(this.innerHTML);11. })12. })13.</script>14.</head>15.16.<body>17.<div>show <span>me</span></div>18.</body>19.</html>在以前firefox还有一个事件捕捉机制，事件捕捉机制就是先从最顶层的元素一层一层向子元素触发。
eventlistener 原理
eventlistener 原理eventListener原理eventListener是JavaScript中的一个概念，用于监听特定事件的发生，并在事件发生时执行相应的代码。
它是一种常见的编程模式，用于处理用户交互、网络请求和其他与事件相关的任务。
在本文中，我们将深入探讨eventListener的原理及其在JavaScript中的应用。
一、事件驱动编程模型事件驱动编程模型是一种常见的编程范式，它基于事件的发生来驱动程序的执行。
在这种模型中，程序会监听特定的事件，并在事件发生时执行相应的代码。
这种模型与传统的顺序执行模型相比，更加灵活和响应式。
在JavaScript中，可以使用eventListener来实现事件驱动编程模型。
通过添加事件监听器，我们可以指定在特定事件发生时执行的代码，从而实现响应式的交互效果。
二、eventListener的工作原理eventListener的工作原理可以简单地概括为以下几个步骤：1. 选择需要监听的DOM元素：首先，我们需要选择要监听的DOM元素。
可以通过document对象的querySelector方法来选择元素，也可以通过getElementById、getElementsByClassName等方法来选择元素。
2. 添加事件监听器：选择了要监听的DOM元素后，接下来需要添加事件监听器。
可以使用addEventListener方法来添加事件监听器，该方法接受三个参数：事件类型、回调函数和可选的布尔值参数。
事件类型指定要监听的事件，回调函数是事件发生时要执行的代码，布尔值参数用于指定事件是否在捕获阶段触发，默认为false。
3. 监听事件的发生：一旦事件监听器被添加，它就会开始监听指定的事件。
当事件发生时，浏览器会将事件信息传递给事件监听器，并执行回调函数。
4. 执行回调函数：回调函数是事件监听器的核心部分，它定义了事件发生时要执行的代码。
可以在回调函数中进行各种操作，例如修改DOM元素的样式、发送网络请求、更新数据等。
js中的事件循环（EventLoop）机制
js中的事件循环（EventLoop）机制⼀，关于线程javascript从诞⽣之⽇起就是⼀门单线程的⾮阻塞的脚本语⾔。
这是由其最初的⽤途来决定的：与浏览器交互。
单线程意味着，javascript代码在执⾏的任何时候，都只有⼀个主线程来处理所有的任务。
⽽⾮阻塞则是当代码需要进⾏⼀项异步任务（⽆法⽴刻返回结果，需要花⼀定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据⼀定规则去执⾏相应的回调。
JavaScript 的单线程，与它的⽤途有关。
作为浏览器脚本语⾔，JavaScript 的主要⽤途是与⽤户互动，以及操作 DOM。
这决定了它只能是单线程，否则会带来很复杂的同步问题。
⽐如，假定 JavaScript 同时有两个线程，⼀个线程在某个 DOM 节点上添加内容，另⼀个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从⼀诞⽣，JavaScript 就是单线程，这已经成了这门语⾔的核⼼特征，将来也不会改变。
为了利⽤多核 CPU 的计算能⼒，HTML5 提出 Web Worker 标准。
允许 JavaScript 脚本创建多个线程，但是⼦线程完全受主线程控制，且不得操作 DOM。
所以，这个新标准并没有改变 JavaScript 单线程的本质。
⼆，浏览器环境下的事件循环机制1，任务队列js引擎遇到⼀个异步事件后并不会⼀直等待其返回结果，⽽是会将这个事件挂起，继续执⾏执⾏栈中的其他任务。
当⼀个异步事件返回结果后，js会将这个事件加⼊与当前执⾏栈不同的另⼀个队列，我们称之为任务队列。
被放⼊任务队列不会⽴刻执⾏其回调，⽽是等待当前执⾏栈中的所有任务都执⾏完毕，主线程处于闲置状态时，主线程会去查找事件队列是否有任务。
如果有，那么主线程会从中取出排在第⼀位的事件，并把这个事件对应的回调放⼊执⾏栈中，然后执⾏其中的同步代码...，如此反复，这样就形成了⼀个⽆限的循环。
javascript实训报告
javascript实训报告一、实训目的和背景本次实训的目的是为了加深对Javascript语言的理解，并通过实际操作来提高编程能力。
Javascript是一门脚本语言，主要用于网页开发，能够为网页添加动态效果和交互功能。
在互联网技术发展的今天，掌握Javascript的技能对于提升个人竞争力是非常重要的。
二、实训内容本次实训的内容主要包括以下几个方面：1. Javascript基础知识的学习：学习Javascript的基本语法、变量、数据类型、运算符等基础知识，并掌握如何使用Javascript与HTML进行交互。
2. DOM操作：学习如何通过Javascript来操作HTML文档中的元素，包括获取元素、修改元素的属性和内容，以及动态创建和删除元素等。
3. 事件处理：学习Javascript中的事件模型，包括事件的触发和捕获、事件处理函数的编写以及事件对象的应用。
4. 表单验证：学习如何使用Javascript来对表单进行验证，包括对用户输入的数据进行检查，防止非法的输入。
5. Ajax技术：学习使用Javascript中的Ajax技术与服务器进行数据的异步交互，实现页面数据的动态更新。
三、实训成果通过本次实训，我对Javascript的掌握程度有了很大提高。
我学会了使用Javascript操作HTML文档中的元素，修改元素内容和样式，使网页呈现出更好的效果。
我也掌握了事件处理的方法，能够编写合适的事件处理函数，实现网页的交互效果。
在实训过程中，我完成了一个简单的网页，利用Javascript实现了一些基本的功能。
比如，在网页中添加了一个按钮，点击按钮后可以改变网页背景颜色。
我还实现了一个简单的表单验证，对用户输入的数据进行检查，确保输入的是合法的内容。
此外，我还学习了如何使用Ajax技术实现页面数据的异步更新。
通过Ajax，我可以在不刷新整个页面的情况下，向服务器发送请求并获取数据，然后动态地更新页面的内容。
JavaScript事件三要素
JavaScript事件三要素事件三要素包含事件源是指那个元素引发的事件。
⽐如当你点击博客园图标的时候，会跳转到博客园⾸页。
那么这个博客园图标就是事件源。
再或者，可以这样理解，当你对某个元素执⾏动作的时候，会触发⼀系列效果（动画，跳转....），那么这个元素就是事件源事件事件是指执⾏的动作。
例如，点击，⿏标划过，按下键盘，获得焦点。
事件驱动程序事件驱动程序即执⾏的结果。
例如，当你点击博客园图标的时候，会跳转到博客园⾸页。
那么跳转到博客园⾸页就是事件的处理结果。
执⾏事件的步骤1. 获取元素2. 绑定事件3. 书写事件驱动程序例如全部代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><button>点击我有惊喜</button><div id="box"></div><script>var btn = document.getElementsByTagName("button")[0];var box = document.getElementById("box");btn.onclick =function () {box.innerHTML = "<img src=\"https:///timg?image&quality=80&size=b9999_10000&sec=1516692944212&di=38c2e662673923e26603efe1da3d935d&imgtype=0&src=http%3A%2F%%2Fimage%2Fc0 }</script></body></html>。
js事件处理机制
js事件处理机制JavaScript是一种流行的编程语言，广泛运用于现代Web应用程序中。
事件处理机制是JavaScript中一个重要的方面，可以使你的应用程序对用户的交互做出动态响应。
本文将介绍JavaScript事件处理机制，包括事件类型、事件处理程序、事件冒泡和捕获以及事件代理。
1. 事件类型JavaScript可以处理各种类型的事件，包括鼠标操作、键盘操作、窗口操作等，还可以自定义事件。
其中，鼠标事件包括click、dblclick、mousedown、mouseup等；键盘事件包括keydown、keyup、keypress等；窗口事件包括load、unload、resize、scroll等。
2. 事件处理程序当事件发生时，浏览器会自动寻找相应的事件处理程序来执行。
可以通过以下方法指定事件处理程序：（1）HTML事件处理程序：在HTML元素中添加事件属性，如onclick、onload等。
（2）DOM0级事件处理程序：通过JavaScript代码指定事件处理程序，如element.onclick=function(){}。
（3）DOM2级事件处理程序：通过addEventListener方法指定事件处理程序，如element.addEventListener('click', function(){}, false)。
3. 事件冒泡和捕获当一个事件被触发时，它会从事件目标（通常是页面中的元素）开始，沿着DOM树向上传播，可以称之为事件冒泡。
而事件捕获则是从根节点到事件目标的过程。
DOM2级事件定义了两种处理事件的方式：事件冒泡和事件捕获。
默认情况下，事件处理程序会在事件冒泡阶段被触发，但可以通过设置addEventListener方法的第三个参数为true，将事件处理程序绑定在事件捕获阶段。
4. 事件代理事件代理是一种技术，可以减少事件处理程序的数量，提高性能。
通过将事件处理程序绑定在父元素上，可以代理子元素的事件。
填空选择
1、分析下面的JavaScript代码段：var a=15．49;document．write(Math．round(a));输出的结果是()。
A．15 B．16 C．15．5 D．15．4正确答案是: A2、下列哪个函数可以将参数字符串当成Javascript程序代码执行？( ) A．eval() B．escape() C．encodeURI() D．toString()正确答案是: A3、下列关于Javascript的说法中正确的是( )A.所有变量在使用之前必须做声明B.Javascript是面向对象的程序设计语言C.Javascript是解释性语言D.Javascript前身是Oak语言正确答案是: C4、<html><head><title>欢迎您的光临！</title><script language=″JavaScript″>……</script></head><body></body></html>此实例中JavaScript嵌入HTML的方式为( )A．作为应用程序嵌入B．直接嵌入HTML窗口或链接中C．使用SRC属性应用外部脚本文件D．脚本置于<script></script>标记中间正确答案是: D5、赋值V=”6”并执行a=isFinite(V)语句后，a 是( )A. 字符串型B. 日期型C. 数值型D. 布尔型正确答案是: D6、以下哪个表达式将返回假？A．!(3<1) B. (4>=4)&&(5<=2)C. ("a"== "a")&&( "c"!= "d")D. (2<3)||(3<2)正确答案是: B7、若有定义var x=10，则以下哪条语句执行后变量x的值不等于11？A．x++; B. x=11; C. x==11; D. x+=1;正确答案是: C8、下面哪个语句定义了一个名为pageNumber的变量幷赋值为240？A．var PageNumber=240 B. pagenumber=240C. var pageNumber=240D. int pageNumber=240正确答案是: C9、"JavaScript动态网页编程".substring(10)的返回值为（）。
js对象模型的基本概念
JavaScript对象模型（Object Model）是描述JavaScript中对象组织和交互方式的概念集合。
它基于一种类似于树结构的模型来表示和操作对象。
以下是JavaScript对象模型的基本概念：1. 对象（Objects）JavaScript中的对象是键值对的集合，可以包含属性（键）和方法（函数）。
对象可以是预定义的（例如，内置对象如Array、Date）或者自定义的（由开发者创建的对象）。
2. 属性（Properties）对象的属性是具有名称和值的特性。
这些属性可以是数据属性（包含值）或者访问器属性（具有getter和setter方法）。
例如：3. 方法（Methods）方法是与对象关联的函数，它们可以访问对象的属性并执行操作。
例如，上面的4. 构造函数（Constructors）构造函数是用于创建特定类型对象的函数，通过造函数通常用于创建多个相似对象的实例。
5. 原型链（Prototype Chain）JavaScript中的对象之间存在原型链关系。
每个对象都有一个指向其原型的引用，当对象需要访问属性或方法时，会在自身和原型链上进行查找。
6. 类和继承在ES6（ECMAScript 2015）之后，JavaScript引入了类和继承的概念。
类可以看作是对象的模板，通过继承机制实现了属性和方法的共享。
7. JSON（JavaScript Object Notation）JSON是一种轻量级的数据交换格式，它基于JavaScript对象的格式，但与之不同，JSON是一种纯文本表示的数据格式，常用于数据传输和存储。
JavaScript对象模型是JavaScript语言的核心，它提供了灵活的机制来组织和操作数据，使得开发者能够更加高效地编写交互式和动态的网页应用程序。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
事件使得客户端的 JavaScript 有机会被激活，并得以运行。
在一个 Web 页面装载之后，运行脚本的唯一方式，就是响应系统或者用户的动作。
虽然从第一个支持脚本编程的浏览器面世以来，简单的事件被实现为 JavaScript 的一部分；但是大多数最近出现的浏览器都实现了强壮的事件模型，使脚本可以更加智能地处理事件。
现在的问题在于：为了支持各种浏览器，您必须和多个先进的事件模型做斗争，准确地说，是三个。
这三个事件模型分别和下面的文档对象模型（Document Object Model，即 DOM）三巨头结盟：Netscape Navigator 4 (NN4)，Macintosh 和 Windows 系统的Internet Explorer 4 及其更新版本(IE4+)，以及在 Safari 中得到实现的 W3C DOM。
尽管这些模型之间有些地方存在一些本质的差别，但是在一些简易的JavaScript 的帮助下，它们都可以同时适用于同一个文档。
本文主要着眼于相互冲突的事件模型中的两个关键方面：* 把一个事件和 HTML 元素绑定起来的方法。
* 在事件被触发后如何对之进行处理。
事件绑定的方法事件绑定是指构造一个响应系统或者用户动作的 HTML 元素的过程。
在不同的浏览器版本中，有不少于五种事件绑定技术。
下面我们快速地介绍一下这些技术。
事件绑定方法I：绑定元素属性最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。
事件属性名称由事件类型外加一个“on”前缀构成。
尽管HTML属性并不是大小写敏感的，人们还是定义了一个规则，规定事件类型的每一个“词”的首字母大写，比如 onClick 和 onMouseOver。
这些属性也被称为事件处理器，因为它们指示了元素如何“处理”特定的事件类型。
正确的事件处理器属性的值在形式上是被引号包含的 JavaScript 语句。
最常见的值是一条调用某个脚本函数的语句，而被调用的函数在位于文档前部的<SCRIPT> 标识中定义--该标识通常位于 <HEAD> 部分。
举例来说，下面的函数：function myFunc() {// script statements here}可以被定义为一个按键控件的事件处理器，按键的定义如下：<INPUT TYPE="button" NAME="myButton" VALUE="Click Here"onClick="myFunc()">把事件绑定到元素属性上有一个优点，即可以支持开发者把参数传递给事件处理器函数。
接收事件的元素的引用则由一个特殊的参数值--this 关键字来传递。
下面的代码演示一个函数如何借助传入参数，把任意数目的文本框的内容转化为大写：<SCRIPT LANGUAGE="JavaScript">function convertToUpper(textbox) {textbox.value = textbox.value.toUpperCase();}</SCRIPT>...<FORM ....><INPUT TYPE="text" NAME="first_name"onChange="convertToUpper(this)"><INPUT TYPE="text" NAME="last_name"onChange="convertToUpper(this)">...</FORM>事件绑定方法II：绑定对象属性对于 NN3+ 和 IE4+ 这两类浏览器，脚本编程人员可以以脚本语句的方式把事件绑定到对象上，而不是绑定到元素标识的属性上。
每一个负责事件响应的元素对象都为自己能够识别的事件设置了相应的属性。
对象属性名称是元素标识属性的小写形式，比如 onmouseover。
NN4 还接受 interCap（即首字小写，之后的每一个词的首字大写）版本的属性名，但是考虑到跨浏览器的兼容性，所有字母都是小写的名称会更安全一些。
当您把一个函数的引用赋值给一个事件属性的时候，就发生了绑定。
函数的引用是指函数的名称，但是不带函数定义中的括号。
因此，如果要为一个名为myButton 的按键的点击事件（click）进行绑定，使之激活一个定义为 myFunc() 的函数，则其赋值语句如下所示：document.forms[0].myButton.onclick = myFunc;您应该注意一点：在事件触发的时候，没有办法向事件函数传递参数。
本文在稍候对事件处理过程的讨论中还会回顾这个问题。
事件绑定方法III: 绑定 IE4+<SCRIPT FOR> 标识在 IE4+ 中，Microsoft 对 <SCRIPT> 标识实现了自己的扩展，可以将它包含的脚本语句和某个元素的一个事件类型进行绑定。
支持这个绑定的标识属性（还没有被 W3C 批准为 HTML 的一部分）是 FOR 和 EVENT。
FOR 属性的值必须是您为元素的 ID 属性分配的唯一标识符。
然后，您必须把事件的名称（onmouseover，onclick，等等）分配给 EVENT 属性。
在上面的按键实例的基础上，我们必须对按键标识进行修改，使之包含一个 ID 属性：<INPUT TYPE="button" NAME="myButton" ID="button1" VALUE="Click Here">脚本语句并不在函数中，而是在 <SCRIPT> 标识中，如下所示：<SCRIPT FOR="button1" EVENT="onclick">// script statements here</SCRIPT>当然，标识中的语句可以调用页面上其它地方定义的任何函数（或者从.js 文件中导入的函数）。
然而，这种绑定方式意味着您必须为每一个元素和每一个事件创建一个 <SCRIPT FOR> 标识。
您还必须小心，只能把这种绑定方法部署在仅供 IE4+ 浏览器浏览的页面。
其它任何支持脚本编程而又没有实现这个特殊的 <SCRIPT> 标识的浏览器（包括IE3），都将把它作为常规的 <SCRIPT> 标识来处理，并试图在页面装载的时候执行这些脚本语句--这不可避免地引起脚本错误。
事件绑定方法IV：使用 IE5/Windows 的 attachEvent() 方法早在 W3C DOM 工作组磨砺出标准的事件模型之前，attachEvent() 方法已经被实现了，并且可被用于 Windows 版的 IE5 或更新版本的浏览器上的每一个HTML 元素。
attachEvent() 方法的用法如下所示：elemObject.attachEvent("eventName", functionReference);eventName 参数的值是表示事件名称的字符串，比如 onmousedown。
functionReference 参数是一个不带括号的函数引用，和早些时候描述的事件属性方法中一样。
因此对于上面例子的按键对象，可以通过如下的脚本语句把函数绑定到按键的 click 事件：document.getElementById("button1").attachEvent("onclick", myFunc);由于 attachEvent() 方法必须严格工作在 IE5+/Windows 的环境中，所以您既可以使用 W3C DOM 的元素引用方式（如上文所示），也可以使用 IE4+ 的引用方式：document.all.button1.attachEvent("onclick", myFunc);这个方法有一个值得注意的地方：您不能在元素被载入浏览器之前执行这个语句。
该对象的引用在相应的 HTML 按键元素被浏览器创建之前，都是无效的。
因此，要让这样的绑定语句或者在页面的底部运行，或者在 BODY 元素的 onLoad 事件处理器调用的函数中运行。
事件绑定方法V：使用 W3C DOM 的 addEventListener() 方法Safari 使用的是 W3C DOM 级别2定义的事件绑定机制，这个机制和IE5/Windows 的 attachEvent() 方法很类似，但是有自己的语法。
W3C DOM 规范为 DOM 层次中的每一个结点都定义了一个 addEventListener() 方法。
HTML 元素是 DOM 结点中的一类，在一对元素标识内部的文本结点也是一个结点，也能够接收事件。
这一点在 NN6 事件处理过程中经常得到体现，在本文的后面部分您将会看到。
addEventListener() 方法的语法如下所示：nodeReference.addEventListener("eventType", listenerReference, captureFlag);用 W3C DOM 规范中的行话来说，addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。
这个方法的第一个参数是一个声明事件类型的字符串（不带"on"前缀），比如 click，mousedown，和 keypress。
addEventListener() 方法的第二个参数可以和早些时候描述过的函数引用同样对待。
第三个参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。
事件的捕捉和派发---综合起来称为事件的传播--最后由另一篇文章来描述。
对于一个典型的事件侦听器来说，第三个参数应该为 false（假）。
那种绑定方法最好？如果您足够幸运，只需要为某一个操作系统上特定版本的浏览器创建应用程序，则可以为选定的浏览器选择最现代的绑定方式。
但是对于跨浏览器的网站作者来说，选择绑定方法则需要面对实质性的挑战。
如果您只计划支持 IE5/Mac，则可以不考虑 attachEvent() 和addEventListener() 方法，因为 IE5/Mac 对这两种方法都不支持。