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}}}。
- 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 对这两种方法都不支持。