JavaScript事件
我的记录（JavaScript事件）JavaScript 事件冒泡简介及应用实例
一、什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。
二、事件冒泡有什么作用
（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
【集中处理例子】
（2）让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。
【同时捕获同一事件例子】
三、需要注意什么
●事件捕获其实有三种方式，
事件冒泡只是其中的一种：
（1）IE从里到外（inside→outside）的冒泡型事件。
（2）Netscape4.0从外到里（outside→inside）的捕获型事件。
（3）DOM事件流，先从外到里，再从里到外回到原点
（outside→inside→outside）的事件捕获方法（似乎对象将触发两次事件处理，这有什么作用？鄙人不懂！）。
●不是所有的事件都能冒泡。
以下事件不冒泡：blur、focus、load、unload。
●事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。
如Netscape4.0采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。
●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。
在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。
●阻止冒泡并不能阻止对象默认行为。
比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。
四、阻止事件冒泡
通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。
【不想激活的事件被激活例子】
style="width:100px; height:100px; background:#000; padding:50px">
style="width:100px; height:100px; background:#CCC">
下面是本人在网上抄的一个方法，把这个方法放在精准目标对象处理程序结尾，本事件触发处理结束后，事件将不在进行冒泡处理。
【阻止事件冒泡例子】
事例：
Bubble in JavaScript DOM
DOM树的结构是：
UL
- LI
- A
- SPAN
鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（mouseover）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。
如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。
输出结果：
在IE中：
[ addEvent() ]
事件绑定的3中常用方法：传统绑定、W3C绑定方法、IE绑定方法。但是，在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法，一下是比较知名的几种方法：
一个好的addEvent()方法应当达到哪些要求：
a、支持同一元素的同一事件句柄可以绑定多个监听函数；
b、如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册后的所有注册都被忽略；
c、函数体内的this指向的应当是正在处理事件的节点（如当前正在运行事件句柄的节点）；
d、监听函数的执行顺序应当是按照绑定的顺序执行；
e、在函数体内不用使用event = event || window.event; 来标准化Event对象；
一、John Resig 所写的addEvent() 函数：
https://www.360docs.net/doc/1214751598.html,/projects/flexible-javascript-events/
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
这个函数如此简单易懂，的确非常令人惊讶。那么我们还是要看看上面的五点要求：对于第一点满足了；
对于第三点和第五点，肯定也满足了；
对于第二点，并没有满足，因为addEventListener()会忽略重复注册，而attachEvent()则不会忽略；
但是第四点，并没有满足，因为Dom标准没有确定调用一个对象的时间处理函数的顺序，所以不应该想当然的认为它们以注册的顺序调用。
但是这个函数仍然是一个非常优秀的函数。
二、Dean Edward 所写的addEvent() 函数：
https://www.360docs.net/doc/1214751598.html,/weblog/2005/10/add-event2/
function addEvent(element, type, handler) {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
}
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true;
event = event || fixEvent(window.event);
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
该函数使用了传统的绑定方法，所以它可以在所有的浏览器中工作，也不会造成内存泄露。
但是对于最初提出的5点，该函数只是满足了前四点。只有最后一点没有满足，因为在JavaScript中对for/in语句的执行顺序没有规定是按照赋值的顺序执行，尽管大部分时刻是按照预期的顺序执行，因此在不同的JavaScript版本或实现中这一语句的顺序有可能不同。
三、Dean Edward 的addEvent() 函数的改进
Array.prototype.indexOf = function( obj ){
var result = -1 , length = this.length , i=length - 1;
for ( ; i>=0 ; i-- ) {
if ( this[i] == obj ) {
result = i;
break;
}
}
return result;
}
Array.prototype.contains = function( obj ) {
return ( this.indexOf( obj ) >=0 )
}
Array.prototype.append = function( obj , nodup ) {
if ( !(nodup && this.contains( obj )) ) {
this[this.length] = obj;
}
}
Array.prototype.remove = function( obj ) {
var index = this.indexOf( obj );
if ( !index ) return ;
return this.splice( index , 1);
};
function addEvent(element , type , fun){
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = [];
if(element['on' + type]) {
handlers[0] = element['on' + type];
}
}
handlers.append( fun , true)
element['on' + type] = handleEvent;
}
function removeEvent(element , type , fun) {
if (element.events && element.events[type]) {
element.events[type].remove(fun);
}
}
function handleEvent(event) {
var returnValue = true , i=0;
event = event || fixEvent(window.event);
var handlers = this.events[event.type] , length = handlers.length;
for ( ; i < length ; i++) {
if ( handlers[i].call( this , event) === false ){
returnValue = false;
}
}
return returnValue;
}
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() { this.cancelBubble = true;
};
javascript事件列表
if(window.event) oEvent = window.event; //处理兼容性，获得事件对象if(oEvent.type == "click") //检测事件名称
JSevent.srcElement的应用
event.srcElement：引发事件的目标对象，常用于onclick事件。
event.fromElement：常用于onmouseout和onmouseover事件
event.toElement：常用于onmouseout和onmouseover事件
onmouseover时，srcElement相当于toElement
onmouseout时，srcElement相当于fromSrcElement
===========================================}
ff是不能用这个event.srcElement
如：
这个测试通过，解决了必须给事件函数传event的问题
屏蔽鼠标右键
如一：
屏蔽鼠标右键
如二：
屏蔽鼠标右键
伸缩的菜单
控制台输出： keydown keypress keyup 2、浏览器的兼容性
(1)FireFox、Opera、Chrome 事件对应的函数有一个隐藏的变量e，表示发生事件。 e有一个属性e.which指示哪个键被按下，给出该键的索引值（按键码）。 静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。eg： [html]view plaincopyprint? 1. 2. FireFox、Opera、Chrome中输入：a 输出：按键码：97 字符：a (2)IE IE不需要e变量，window.event表示发生事件。 window.event有一个属性window.event.keyCode指示哪个键被按下，给出该键的索引值（按键码）。 静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。eg： [html]view plaincopyprint?
JavaScript试题集
.单选题 1. 我们可以在下列哪个HTML元素中放置javascript代码？ A.< script > B.< javascript > C.< js > D.< scripting > ★标准答案：A 2. 预测以下代码片段的输出结果: var str ; alert(typeof str); A.. string ; B.. undefined; C.. object ; D.. String; ★标准答案：B 3. 下列哪个不是Javascript中注释的正确写法：（） A.< !-- …… -- > B. *……*/ D. /* …… */ ★标准答案：A 4. 以下哪项不属于Javascript的特征？ 是一种脚本语言 是事件驱动的 代码需要编译以后才能执行
是独立于平台的 ★标准答案：C 5. 关于以下两个陈述的描述中，正确的是：（） 陈述1：Javascript是弱类型语言 陈述2：Javascript的常用类型包括：int、string、boolean A.陈述1正确，陈述2错误 B.陈述1错误，陈述2正确 C.两个陈述都正确 D.两个陈述都错误 ★标准答案：A 6. 阅读下面的JavaScript代码： < HTML > < BODY > < SCRIPT LANGUAGE="JavaScript" > function f(y) { var x=y*y; return x; } for(x=0;x< 5;x++) { y=f(x); (y); } < /SCRIPT > < /BODY > < /HTML > 输出结果是（）。 1 2 3 4 1 4 9 16 1 4 9 16 25 D.以上答案都不对 ★标准答案：B 7. 在Javascript中，需要声明一个整数类型的变量num，以下哪个语句能实现上述要求？ num;
关于javascript事件
A 事件流（event flow ） 事件模型分为两种：冒泡型事件、捕获型事件。 冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。 捕获型（event capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。 捕获型事件也被称作自顶向下（DOM层次）的事件模型。 由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。 B 事件监听 i > 通用监听方法 示例一：
给浏览器添加监听方法，分为两种：IE 中的监听方法、标准DOM 的监听方法。 ii > IE 中的监听方法 在IE 浏览器中，每个元素都有两个方法来处理事件的监听。分别是：attachEvent( )和detachEvent( )。 附加事件方法：[object].atta chEvent(“事件名”，方法名); 分离事件方法：[object].detachEvent(“事件名”，方法名); 如：o_p.detachEvent(“onclick”,click_A); 示例：
●使用这种方式可以为同一元素添加多个监听函数； ●在IE 浏览器中，函数的执行顺序与函数的添加顺序相反； ●在IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用； iii > 标准DOM 的监听方法 在使用标准DOM 的浏览器中，每个元素也有两个方法来处理事件的监听。分别是：addEventListener( )和removeEventListener( )。
添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型); 移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型); 注意： 这里的“事件名”不能带on ，如：click（如果是onclick 则错误！） “事件模型”为boolean 类型，通常设置为false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件） 示例：
11讲_JavaScript事件分析
Company name WEB 前端开发技术 HTML JavaScript CSS WEB 前端开发技术 第11章JavaScript 事件分析 计算机科学与技术系
Web前端开发技术主要内容 计算机科学与技术系 ?掌握事件、事件类型的概念 ?掌握事件处理的机制 ?掌握事件名称与句柄的关系 ?学会编写各类的事件响应程序
计算机科学与技术系 Web前端开发技术11.1 事件编程 事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。 事件-事件是可以被JavaScript侦测到的行为(ACTION)。 事件源Window Form Mouse key 事件 单击事件 双击事件 事件句柄 Onclick ondblclick 编写事件 处理代码
Web 前端开发技术事件驱动案例导入 计算机科学与技术系
计算机科学与技术系 Web 前端开发技术 11.1 事件编程（续） 1.网页访问中常见的事件 鼠标单击：例如单击button 、选中checkbo x 和radio 等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table 的范围； 键盘按键：当按下按键或释放按键时；页面或图像载入：例如页面body 被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；确认表单：例如当准备提交表单的内容。 事件类型：1.鼠标事件2.键盘事件3.浏览器事件
Javascript事件
获取事件对象的全家 事件对象的获取很简单，很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的，Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定 view sourceprint? 1var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论，你也许会看到以前没有看到过的获取方式。 1，第一种添加事件的方式，直接在html的属性中写JS代码 view sourceprint? 1
javascript试题
在HTML中，表单中的input元素的（）属性用于指定表单元素的名称。 A. value B. name C. type D. caption 当表单各项填写完毕，鼠标单击提交按钮时可以触发（）事件。 A. onenter B. onsubmit C. onmouseDrag D. onmouseOver 分析下面的JavaScript代码段，输出结果是（）。 var a=15.59; document.write(Math.round(a)); A. 15 B. 16 C. 15.5 D. 15.4 要求用JavaScript实现下面的功能：在一个文本框中内容发生改变后，单击页面的其他部分将弹出一个消息框显示文本框中的内容。下面语句正确的是（）。 A. B. C. D. 假定今天是2006年4月1日星期六，请问下列JavaScript代码在页面上的输出结果是（）。var time=new Date(); document.write(time.getDate()); A. 2006 B. 4 C. 1 D. 6 下面描述正确的是（）。 A. switch语句用于重复执行一个语句块的操作 B. switch语句根据表达式的值执行若干语句块之一，如果没有匹配项，则执行默认语句块中的语句 C. switch语句表达式中的值不能与后面case语句中的常量相匹配时将出现运行错误 D. switch语句又叫循环语句 分析如下JavaScript代码，b的值为（）。 var a=1.5 ,b; b=parseInt(a); A. 2 B. 0.5 C. 1 D. 1.5 在HTML中，使用JavaScript中的浏览器对象实现在当前窗口打开链接"https://www.360docs.net/doc/1214751598.html,"的javascript语句是（）。 A. window.open("https://www.360docs.net/doc/1214751598.html,"); B. document.write("https://www.360docs.net/doc/1214751598.html,"); C. location.replace("https://www.360docs.net/doc/1214751598.html,"); D. location.reload("https://www.360docs.net/doc/1214751598.html,"); 如果今天是2006年5月14日，分析下列JavaScript代码运行后，在网页上显示（）。 var now = new Date(); var year = now.getYear(); var month = now.getMonth(); var date = now.getDate(); document.write(year+" "+month+" "+date); A. 2006 05 14 B. 2006 5 14 C. 2006 04 14 D. 2006 4 14 在HTML中有如下代码，运行后页面显示结果为（）。
javascript的三种事件模型
事件使得客户端的 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,页面自动加载事件详解
javaScript,页面自动加载事件详解 篇一：javascript 动态添加事件 往往我们需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几 种方法，我们也常常混合使用。 方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript：alert('测试');"); 这里利用 setAttribute 指定 onclick 属性，简单，很好理解， 但是： IE 不支持， IE 并不是不支持 setAttribute 这个函数， 而是不支持用 setAttribute 设 置某些属性， 包括对象属性、 集合属性、 事件属性， 也就是说用 setAttribute 设置 style、 onclick、 onmouseover 这些属性在 IE 中是行不通的。 LEO:在 IE6 下尝试成功 方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); } 同样也可写在一起 obj.addEventListener("click", function(){alert("测试");}, false); 注意 attachEvent 的事件带 on，如 onclick，而 addEventListener 不带 on，如 click。 顺便说一下 addEventListener 的第三个参数（虽然很少用） useCapture - 如果为 true， 则 useCapture 指示用户希望启动捕获。启动捕获后，所有指定类型的事件将在被指派到树中 其下面的任何 EventTargets 之前指派给已注册的 EventListener。 正在通过树向上 bubbling 的 事件将不触发指定的使用捕获的 EventListener。 1 / 11
JavaScript事件处理
JavaScript事件处理,使用框架和Cookies 2008-01-04 20:53 事件处理 事件处理概述 事件处理是对象化编程的一个很重要的环节，没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以这样表示：发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句，但是我们一般用特定的自定义函数（function）来处理事情。 指定事件处理程序 指定事件处理程序有三种方法： 方法一直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是： <标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]> 让我们来看看例子：
这样的定义标记，能使文档读取完毕的时候弹出一个对话框，写着“网页读取完成，请慢慢欣赏”；在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候弹出“再见”。 方法二编写特定对象特定事件的 JavaScript。这种方法用得比较少，但是在某些场合还是很好用的。方法是： 例： 方法三在 JavaScript 中说明。方法： <事件主角 - 对象>.<事件> = <事件处理程序>;JAVASCRIPT常用对象参考
JavaScript常用对象参考 分类：WEB2008-08-2116:09160人阅读评论(0)收藏举报 JavaScript常用对象参考 Math document body selection window screen location history Date String Event Math对象 E返回欧拉常数e的值 LN1010的自然对数的值 LN22的自然对数的值 LOG2E基数为2的e的对数的值 LOG10E基数为10的e的对数的值 PI圆周率pai的值:3.14159265358979 SQRT1_2返回0.5的平方根 SQRT2返回2的平方根 abs(number)计算number的绝对值 cos(number)计算余弦值 acos(number)计算反余弦值 sin(number)计算正弦值 asin(number)计算反正弦值 tan(number)计算正切值 atan(number)计算反正切值 atan2(x,y)根据指定的坐标返回一个弧度值 ceil(number)返回大于或等于number的整数 floor(number)返回小于或等于number的整数 exp(value)计算以e为基数的value次方的值 log(value)是exp(value)的反方法 max(num1,num2,…)返回两个或多个参数中的最大值 min(num1,num2,…)返回两个或多个参数中的最小值 pow(m,n)计算m的n次方 random()生成0到1的随机数[0,1).生成n到m之间的随机数n+(m-n)*Math.random() round(number)取整(四舍五入) sqrt(number)开平方运算 document write() writeln() open()"打开文档以收集write或writeln方法的输 出:document.open([sURL][,sName][,sFeatures][bReplace]) sName:_blank,_media,_parent,_search,_self,_top sURL:可选项,字符串表达式,用于指定打开文档或窗口的URL地址sFeatures:可选项,字符串表达式,用于指定打开窗口的属性sReplace:true or false;" sFeatures:fullscreen,height,width,left,top,location,resizable,scrollbars,status,toolbar close()关闭输出流 createElement(tag)根据指定标记创建一个HTML标签getElementById(id)获得指定id的HTML元素removeChild(e)移除一个指定的子元素e replaceChild(new,e ) 用new元素替换子元素e appendChild(e)增加一个子元素e(最后) insertBefore(new,e ) 在子元素e前面插入一个new元素
javascript自定义事件模型及实现
在js世界里，事件可谓是个大课题，在此讨论的自定义事件也只是冰山一角。 试想这样的场景，页面中有A、B两个模块，B模块显示的时候，会同时隐藏A模块。按照这个流程的代码，经常会是这样的代码： 这样代码的问题在于太过于流程化，B模块内置了对A模块的依赖，耦合度高。如果要让B模块独处到另外的页面工作，就会找不到A模块而无法使用。又或者需求变化，B模块显示的时候，同时显示一个新的C模块，那又要去B模块里添加代码，最后B模块只会依赖越来越多，越陷越深，无法自拔啊。 为了让模块间解耦，通常，会把逻辑代码抽离到一个回调函数中，通过配置去指挥代码所需要的处理。
以回调的方式，实现一个原始的类似事件的订阅方式，可以把对外部依赖的代码逻辑通过配置的方式移出模块内，实现上也很简单，可以不依赖于任何机制。 但与此同时，也存在着一定的局限性，比如只能在初始化的时候配置；不能多次添加“监听”；每个需要事件回调的方法都需要添加一个回调事件。 自定义事件 如果以“写分享”这么一个事件来比喻，最开始的那种流程式的方式就好比，分享者每周写了一篇分享，并通过邮件A、B、C等N各人，分享者需要自己维护每个同学的邮件地址。要是有一天，
哪个同事离职了，还要从收件人里把他删掉，分享者跟邮件联系人耦合度很高。 而到了采用回调式的方式，就好比分享者发分享时不再需要记得有哪些人，分享者有一个收件人的群组，每次写完就往这个群组里发，不必再关心群组里有哪些人和那些人的去向。由外部去维护这么一个联系人群组。 但对于时刻想偷懒的人来说，这个还不是最方便了，于是，有了一种新的方式，写好的分享，发表到博客中，有兴趣看分享的人去加关注。于是，就有了下面的故事：
JavaScript试题集7
一. 单选题 1. 我们可以在下列哪个HTML 元素中放置javascript 代码？ A.< script > B.< javascript > C.< js > D.< scripting > ★标准答案：A 2. 预测以下代码片段的输出结果: var str ; alert(typeof str); A.. string ; B.. undefined; C.. object ; D.. String; ★标准答案：B 3. 下列哪个不是Javascript 中注释的正确写法：（ ） A.< !-- …… -- > B.//…… C./*……*/ D. /* …… */ ★标准答案：A 4. 以下哪项不属于Javascript 的特征？ A.Javascript 是一种脚本语言 B.Javascript 是事件驱动的 C.Javascript 代码需要编译以后才能执行 D.Javascript 是独立于平台的 ★标准答案：C 5. 关于以下两个陈述的描述中，正确的是：（ ） 陈述1：Javascript 是弱类型语言 陈述2：Javascript 的常用类型包括：int 、string 、boolean A.陈述1正确，陈述2错误 B.陈述1错误，陈述2正确 C.两个陈述都正确 D.两个陈述都错误 ★标准答案：A 6. 阅读下面的JavaScript 代码： < HTML > < BODY > < SCRIPT LANGUAGE="JavaScript" > function f(y) { var x=y*y; return x; } for(x=0;x< 5;x++) { y=f(x); document.writeln(y); } < /SCRIPT > < /BODY > < /HTML > 输出结果是（）。 A.0 1 2 3 4 B.0 1 4 9 16 C.0 1 4 9 16 25 D.以上答案都不对 ★标准答案：B 7. 在Javascript 中，需要声明一个整数类型的变量num ，以下 哪个语句能实现上述要求？ A.int num;
通过代码实例跟我学JavaScript ——JavaScript事件编程(第1部分)
1.1通过代码实例跟我学JavaScript ——JavaScript事件编程（第1部分）1.1.1JavaScript事件编程 1、HTML标签中的事件 （1）什么是事件？ 事件可能是用户在页面中某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键，事件也还可能是Web 浏览器中发生的事情，比如说某个Web 页面加载完成，或者是用户滚动窗口或改变窗口大小、点击一个超链接等。 因此，用户对网页中的标签的一些特定“操作”（这些操作通常直接对应鼠标的动作）和系统的行为统称为事件。 （2）不同的标签有不同类型的事件 在Macromedia Dreamweaver 工具中可以利用动态帮助获得某个HTML标签的事件定义，如下图所示。 （3）事件编程 可以为不同的标签添加相关的事件响应的程序代码，称为事件编程从而可以监听特定事件的发生，并对相关的事件做出响应。 2、事件处理程序的引入——为某个标签绑定事件响应函数 如何使一段JavaScript程序和事件发生联系？一般采用“on事件名”的方式对事件处理
程序进行引入，同时它也是JavaScript规定的对应事件处理程序的句柄（Event Handler）的名字。例如onClick、onFocus、onSubmit等等。可以采用下面的方式来引入事件：（1）第一种引入方式 事件处理程序的句柄名以属性名的形式在HTML文本中某些适当的标记中出现，而对应的属性值是由网页编写者提供的JavaScript程序段（或事件处理函数名），从而实现将HTML 标签与JavaScript语言相对应起来。该方式适用于对事件处理程序的静态设置。 ； （2）第二种引入方式 将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性，该方式适用于对事件处理程序的动态设置。 document.forms[0].userAge.onchange= isNumberInput； 注意：事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标签记的属性名的松散要求是一致的。 （3）对同一个事件追加多个不同的事件响应函数 前面的两种事件绑定关联的方式，都不支持追加多事件监听响应的功能要求。例如，原本某个标签元素对象已经有了onchange事件监听了，如果还想再追加一个onchange事件监听响应函数，则无法达到。 此时，可以用attachEvent ()（针对IE浏览器）或者addEventListener(针对DOM标准的浏览器)。下面为代码示例； if (target.addEventListener) { target.addEventListener(eventTypeString , eventHandlerFunction, useCapture); } else if (target.attachEvent) { target.attachEvent(eventTypeString , eventHandlerFunction); } else{ window.alert("不能正确地进行事件绑定！"); }