Microsoft Word - 06.doc

Size: px

Start display at page:

Download "Microsoft Word - 06.doc"

厄域芮
5 years ago
Views:

1 事件可以说是 JavaScript 最引人注目的特性, 因为它提供了一个平台, 让用户不仅可以浏览页面中的内容, 而且能够跟页面进行交互本章围绕 JavaScript 处理事件的特性进行讲解, 主要包括事件流事件的监听事件的类型以及浏览器的兼容性问题等浏览器在最初开始支持事件时, 同一个事件仅仅只有一个元素能够响应, 而到了 IE 4 和 Netscape Navigator 4 时代,Microsoft Netscape 这两家公司都认为仅支持单一事件是不够的, 因此纷纷提出了事件流 (event flow) 的概念本节主要介绍事件流的相关背景, 为后续章节打下基础浏览器中的事件模型分为两种 : 捕获型事件和冒泡型事件由于 IE 浏览器不支持捕获型事件, 因此这里主要讲解冒泡型事件冒泡型 (dubbed bubbling) 事件指的是事件按照从最特定的事件目标到最不特定的事件目标的顺序逐一触发, 如例 6.1 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " DTD/xhtml1-transitional.dtd"> <title> 冒泡型事件 </title> function add(stext){ var odiv = document.getelementbyid("display"); odiv.innerhtml += stext; // 输出单击顺序 <body onclick="add('body<br>');"> <div onclick="add('div<br>');"> <p onclick="add('p<br>');">click Me</p> </div> <div id="display"></div> 以上代码为 <p> 标记 <div> 标记标记都添加了 onclick 函数, 用来处理单击鼠标的事件, 运行页面, 并单击 <p> 标记中的文字, 效果如图 6.1 所示, 会发现 3 个 onclick 函数都被触发了, 且触发的顺序为 <p> 标记, 它的父标记 <div>, 以及最后的标记

2 从例 6.1 中可以看到, 单击鼠标的事件像冒泡一样从 DOM 层次结构的最底端往上一级级升, 如图 6.2 所示 document 4 body 3 div 2 p 1 图 6.1 冒泡型事件图 6.2 冒泡过程在 IE 7 中甚至标记都可以添加 onclick 函数, 修改代码如下 : <html onclick="add('html<br>');"> 这时 IE 7 上的运行结果如图 6.3 所示, 冒泡过程中多了一步但是这个事件在 Firefox 上的出现顺序与 IE 浏览器有出入,Firefox 上事件出现在事件之前, 如图 6.4 所示图 6.3 标记的 onclick 函数图 6.4 Firefox 上的冒泡顺序在 Netscape Navigator 4 时代, 还有一种捕获型事件 (event capturing), 它与冒泡型事件正好是相反的, 即从不精确的对象到最精确的对象如果设置了捕获型事件, 前面的例子将会反向进行, 如图 6.5 所示这种事件也被称作自顶向下事件模型, 因为它是从 DOM 层次的顶端开始向下延伸的由于 IE 浏览器不支持这种类型的事件, 因此读者只需要了解有这样一种事件即可

3 document 1 body 2 div 3 p 4 图 6.5 捕获型事件从上一节的例子可以看到, 页面中的事件都需要一个函数来响应, 这类函数通常称之为事件处理函数 (event handler), 或者从另外一个角度来看, 这些函数都在实时监听着是否有事件发生, 称之为事件监听函数 (event listener) 然而对于不同的浏览器而言, 事件监听函数的调用区别比较大, 本节分别讨论各个浏览器的事件监听方法通常对于简单的事件, 没有必要编写大量复杂的代码, 直接在 HTML 的标签中就可以分配事件处理函数, 而且通常兼容性很好, 例如 : <p onclick="add('p<br>');">click Me</p> 这是例 6.1 中的 <p> 标签, 直接添加 onclick 函数进行事件的监听在 HTML 中几乎所有的标签都有 onclick 方法另外, 还可以在标签中直接采用 JavaScript 语句, 例如 : <p onclick="alert(' 我被点击了 ');">Click Me</p> 这种方法在主流的浏览器中的兼容性也十分地强, 在 Firefox 中的运行结果如图 6.6 所示, 单击 <p> 标签直接弹出对话框图 6.6 直接添加监听函数另外, 考虑到结构行为的分离, 通常采用如例 6.2 所示的方法来实现事件监听, 这种方法也是实际中运用比较多的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd">

4 <title> 监听函数 </title> var op = document.getelementbyid("myp"); op.onclick = function(){ alert(' 我被点击了 '); // 找到对象 // 设置事件监听函数 <div> <p id="myp">click Me</p> </div> 以上代码没有在 HTML 文档结构中采用任何 JavaScript, 仅仅只是设置了 <p> 标签的 id 属性然后在代码段中为该标记添加了和以下代码所示的匿名函数 op.onclick = function(){ alert(' 我被点击了 '); // 设置事件监听函数同时将这段函数放到了 window 对象的 onload 函数中, 这也保证了 DOM 结构在完全建立后再搜索 <p> 节点该例的运行结果如图 6.7 所示以上介绍的这两种方法都十分便捷, 在处理一些小功能时通常被广大开发者所喜爱但是对于同一个事件, 它们都只能添加一个函数例如对于 <p> 标记的 onclick 函数, 利用这两种方法都只能有一个函数因此,IE 浏览器有了自己的解决办法, 同时标准 DOM 则规定了另外一种方法在 Microsoft 公司的 IE 浏览器中, 每个元素都有两个方法来处理事件的监听, 分别是 attachevent() 和 detachevent() 从它们的函数名称就能看出来,attachEvent() 是用来给某个元素添加事件处理的函数, 而 detachevent() 则是用来删除元素上的事件监听的函数, 它们的语法如下 : [object].attachevent("event_handler", fnhandler); [object].detachevent("event_handler", fnhandler); 图 6.7 onclick 函数其中 event_handler 表示事件的名称, 如 onclick onload onmouseover 等,fnHandler 即为监听函数的名称

上一节的示例中可以用 attachevent() 方法替代添加监听函数, 而当单击了一下以后, 可以用 detachevent() 将监听函数删除, 使其不再响应单击事件, 如例 6.3 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

5 上一节的示例中可以用 attachevent() 方法替代添加监听函数, 而当单击了一下以后, 可以用 detachevent() 将监听函数删除, 使其不再响应单击事件, 如例 6.3 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title>ie 的监听函数 </title> function fnclick(){ alert(" 我被点击了 "); op.detachevent("onclick",fnclick); // 单击了一次后删除监听函数 var op; op = document.getelementbyid("myp"); // 找到对象 op.attachevent("onclick",fnclick); // 添加监听函数 <div> <p id="myp">click Me</p> </div> 通过以上的代码可以清晰地看到 attachevent() 和 detachevent() 的使用方法, 在 IE 7 中运行的结果如图 6.8 所示在用户单击了一次 <p> 标记后, 监听函数被删除, 再单击则没有对话框弹出, 这也是前面的方法所无法实现的正如前面提到的, 这种方法可以为同一个元素添加多个监听函数, 如例 6.4 所示图 6.8 IE 的监听函数 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title> 多个监听函数 </title> function fnclick1(){ alert(" 我被 fnclick1 点击了 "); function fnclick2(){ alert(" 我被 fnclick2 点击了 "); var op; op = document.getelementbyid("myp"); // 找到对象 op.attachevent("onclick",fnclick1); // 添加监听函数 1 op.attachevent("onclick",fnclick2); // 添加监听函数 2

6 <div> <p id="myp">click Me</p> </div> 这样在单击标签 <p> 时两个函数便同时调用了, 如图 6.9 所示这里还需要注意两个函数调用的顺序, 在 IE 7 中实测, 后加入的函数 fnclick2() 先被调用了, 而先加入的 fnclick1 是后调用的图 6.9 多个监听函数尽管 fnclick2() 先调用, 但并不意味着这两个函数是严格意义上的先后, 在 fnclick2() 开始运行后 fnclick1() 马上也开始运行, 因为它们都实时监听着 <p> 标记的 onclick 事件为了证明这一点, 可以在 fnclick2() 中加入 detachevent() 语句来删除 fnclick1(), 代码如下 : function fnclick2(){ alert(" 我被 fnclick2 点击了 "); op.detachevent("onclick",fnclick1); // 删除监听函数 1 可以看到第一次单击 <p> 标签时显示弹出了我被 fnclick2 点击了, 确定后又弹出了我被 fnclick1 点击了, 之后的再次单击才是只有 fnclick2() 生效, 读者可以自行试验与 IE 浏览器的两个方法对应, 标准 DOM 也定义了两个方法分别来添加和删除监听函数, 即 addeventlistener() 和 removeeventlistener() 与 IE 不同之处在于这两个函数接受 3 个参数, 即事件的名称要分配的函数名和是用于冒泡阶段还是捕获阶段第 3 个参数如果是捕获阶段则为 true, 否则为 false, 语法如下 : [object].addeventlistener("event_name", fnhandler, bcapture); [object].removeeventlistener("event_name", fnhandler, bcapture); 这两个函数的使用方法与 IE 的基本类似, 只不过需要注意 event_name 中的名称是 click mousemove 等, 而不是 IE 中的 onclick 或者 onmousemove 另外, 第 3 个参数 bcapture 通常设置为 false, 即冒泡阶段, 如例 6.5 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title> 标准 DOM 的事件监听 </title>

function fnclick1(){ alert(" 我被 fnclick1 点击了 "); //op.removeeventlistener("click",fnclick2,false); // 删除监听函数 2 function fnclick2(){ alert(" 我被 fnclick2 点击了 "); var op; op = document.

7 function fnclick1(){ alert(" 我被 fnclick1 点击了 "); //op.removeeventlistener("click",fnclick2,false); // 删除监听函数 2 function fnclick2(){ alert(" 我被 fnclick2 点击了 "); var op; op = document.getelementbyid("myp"); // 找到对象 op.addeventlistener("click",fnclick1,false); // 添加监听函数 1 op.addeventlistener("click",fnclick2,false); // 添加监听函数 2 <div> </div> <p id="myp">click Me</p> 例 6.5 直接由例 6.4 修改而来, 可以看到同样可以为同一个对象的相同事件添加多个监听函数, 但运行结果却有较大的区别在 Firefox 中与 IE 正好相反, 先添加的监听函数 fnclick1() 先运行, 后添加的 fnclick2() 后运行, 如图 6.10 所示图 6.10 标准 DOM 浏览器的监听函数如果在先添加的函数 fnclick1() 中使用 removeeventlistener() 将 fnclick2() 删除, 就会发现标准 DOM 中的监听函数是严格按顺序执行的, 即执行完 fnclick1() 后才执行 fnclick2(), 因此 fnclick1() 中的 removeeventlistener() 会使得 fnclick2() 不再运行, 这与 IE 浏览器也是比较大的区别, 读者可以自行试验浏览器中的事件都是以对象的形式存在的, 同样 IE 浏览器与标准 DOM 浏览器之间在获取事件对象上也存在差别在 IE 浏览器中事件对象是 window 对象的一个属性 event, 访问时通常采用如下方法 op.onclick = function(){ var oevent = window.event; 尽管它是 window 对象的属性, 但 event 对象还是只能在事件发生时被访问, 所有的事件处理函数执行完之后, 该对象就消失了

8 而标准的 DOM 中规定 event 对象必须作为惟一的参数传给事件处理函数, 因此在类似 Firefox 浏览器中访问事件对象通常将其作为参数, 代码如下 : op.onclick = function(oevent){ 因此为了兼容两种浏览器, 通常采用下面的方法 op.onclick = function(oevent){ if(window.event) oevent = window.event; 浏览器在获取了事件对象后就可以通过它的一系列属性和方法来处理各种具体事件了, 例如鼠标事件键盘事件和浏览器事件等表 6.1 罗列了事件常用的属性和方法, 供读者具体使用时查询 IE 标准 DOM 类型可读 / 可写说明 altkey altkey Boolean R/W 按下 Alt 键则为 true, 否则为 false button button Integer R/W 鼠标事件, 值对应按下的鼠标键, 详见节 cancelbubble cancelbubble Boolean IE 中 R/W, 标准 DOM 中 R IE 中设置为 true 可取消事件向上冒泡, 标准 DOM 中只读 -- stoppropagation() Function N/A 可以调用该方法来阻止事件向上冒泡 clientx chilenty clientx clienty Integer IE 中 R/W, 标准 DOM 中 R 鼠标指针在客户端区域的坐标, 不包括工具栏滚动条等 ctrlkey ctrlkey Boolean 同上按下 Ctrl 键则为 true, 否则为 false fromelement relatedtarget Element 同上鼠标指针所离开的元素 toelement relatedtarget Element 同上鼠标指针正在进入的元素 -- charcode Integer R 按下按键的 Unicode 值 keycode keycode Integer R/W -- detail Integer R 鼠标按键被单击的次数 IE 中 keypress 事件表示按下按键的 Unicode 值, keydown/keyup 事件为按键的数字代号标准 DOM 中 keypress 时为 0, 其余为按下按键的数字代号 returnvalue -- Boolean R/W 设置为 false 时可取消事件的默认行为 -- preventdefault() Function N/A 可以调用该方法来阻止事件的默认行为 screenx screeny screenx screeny Integer IE 中 R/W, 标准 DOM 中 R 鼠标指针相对于整个计算机屏幕的坐标值 shiftkey shiftkey Boolean 同上按下 Shift 键则为 true, 否则为 false srcelement target Element 同上引起事件的元素 / 对象 type type String 同上事件的名称从表 6.1 中可以看出, 两类浏览器处理事件还是有一些相似之处的, 例如 type 属性便是各种浏览器所兼容的, 它表示获取的事件类型, 返回类似 click mousemove 之类的值 var stype = oevent.type; 这对于同一个函数处理多种事件时十分有用, 如例 6.6 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd">

<title> 事件的类型 </title> function handle(oevent){ var odiv = document.getelementbyid("display"); if(window.event) oevent = window.event; if(oevent.type == "click") odiv.

9 <title> 事件的类型 </title> function handle(oevent){ var odiv = document.getelementbyid("display"); if(window.event) oevent = window.event; if(oevent.type == "click") odiv.innerhtml += " 你点击了我 &nbsp "; else if( oevent.type == "mouseover") odiv.innerhtml += " 你移动到我上方了 &nbsp "; var oimg = document.getelementsbytagname("img")[0]; oimg.onclick = handle; oimg.onmouseover = handle; <img src="01.jpg" border="0"> <div id="display"></div> // 处理兼容性, 获得事件对象 // 检测事件名称以上代码为图片 <img> 添加了两个事件响应函数, 而这两个事件采用的却是同一个函数, 在这个函数中首先考虑兼容性获得事件对象, 然后利用 type 属性判断事件的名称运行结果如图 6.11 所示图 6.11 事件的类型在检测 Shift Alt Ctrl 这 3 个按键时, 两类浏览器使用的方法也完全一样, 都具有 shiftkey altkey 和 ctrlkey 这 3 个属性, 代码如下 : var bshift = oevent.shiftkey; var balt = oevent.altkey; var bctrl = oevent.ctrlkey; 另外, 在获取鼠标指针位置上两类浏览器都有两套值可用, 分别为 clientx clienty 和 screenx screeny 其中 clientx 和 clienty 表示鼠标指针在客户端区域的位置, 不包括浏览器的状态栏菜单栏等, 代码如下, 效果如图 6.12 所示 var iclientx = oevent.clientx; var iclienty = oevent.clienty;

13 所示 var iscreenx = oevent.screenx; var iscreeny = oevent.screeny; (screenx, screeny) 图 6.

10 (clientx, clienty) 图 6.12 clientx 和 clienty 而 screenx 和 screeny 则指的是鼠标指针在整个计算机屏幕的位置, 代码如下, 效果如图 6.13 所示 var iscreenx = oevent.screenx; var iscreeny = oevent.screeny; (screenx, screeny) 图 6.13 screenx 和 screeny 在这两种获取鼠标指针位置的方法中坐标的原点都是各自的左上角,x 轴的正方向为从左到右,y 轴的正方向为从上到下, 如图 6.14 所示很多时候, 开发者希望知道事件是由哪个对象触发的, 即事件的目标 (target) 假设为 <p> 元素分配 onclick 事件处理函数, 触发 click 事件时 <p> 就被认为是目标

11 (0,0) x y 图 6.14 坐标系在 IE 浏览器中目标包含在 event 对象的 srcelement 属性中, 代码如下 : var otarget = oevent.srcelement; 而在标准的 DOM 浏览器中, 目标则包含在 target 属性中, 代码如下 : var otarget = oevent.target; 完整代码如例 6.7 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title> 事件的目标 </title> function handle(oevent){ if(window.event) oevent = window.event; // 处理兼容性, 获得事件对象 var otarget; if(oevent.srcelement) // 处理兼容性, 获取事件目标 otarget = oevent.srcelement; else otarget = oevent.target; alert(otarget.tagname); // 弹出目标的标记名称 var oimg = document.getelementsbytagname("img")[0]; oimg.onclick = handle; <img src="02.jpg" border="0"> 由于事件目标的属性在两类浏览器上不同, 因此代码首先必须保证兼容性, 通常的做法就是直接将对象作为 if 语句的条件, 代码如下 : if(oevent.srcelement) otarget = oevent.srcelement; else otarget = oevent.target; // 处理兼容性, 获取事件目标这种方法在其他属性中也是常用的, 代码的运行结果如图 6.15 所示当单击图片时对话框显示了事件的目标 IMG

12 图 6.15 对象的目标对于用户而言, 最常用的事件无非是鼠标键盘和浏览器, 本节对这 3 种事件分别进行介绍, 使读者对处理具体的事件问题有一个总体的概念 click dbclick 鼠标事件是用户最常用的事件, 通常包括表 6.2 中所列的几种事件名称说明 mousedown mouseout mouseover mouseup mousemove 单击鼠标左键时触发双击鼠标左键时触发单击任意一个鼠标按键时触发鼠标指针在某个元素上, 移出该元素边界时触发鼠标指针移到另一个元素上时触发松开鼠标任意一个按键时触发鼠标指针在某个元素上移动时持续触发表 6.2 中的这些事件几乎每个都被频繁使用, 下面的例 6.8 简单地描述了鼠标事件的类型, 也可以用来测试各种鼠标事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1-transitional.dtd"> <title> 鼠标事件 </title> function handle(oevent){ if(window.event) oevent = window.event; // 处理兼容性, 获得事件对象 var odiv = document.getelementbyid("display"); odiv.innerhtml += oevent.type + "<br>"; // 输出事件名称 var oimg = document.getelementsbytagname("img")[0]; oimg.onmousedown = handle; // 将鼠标事件除了 mousemove 外都监听

13 oimg.onmouseup = handle; oimg.onmouseover = handle; oimg.onmouseout = handle; oimg.onclick = handle; oimg.ondblclick = handle; <img src="03.jpg" border="0" style="float:left; padding:0px 8px 0px 0px;"> <div id="display"></div> 以上代码将除了 mousemove 外的所有鼠标事件都予以监听, 这样便可以很清楚地看到鼠标在图片上的动作所触发的一系列事件例如单击鼠标左键会先触发 mousedown, 然后是 mouseup, 最后才是常用的 click 事件, 如图 6.16 所示而如果是双击鼠标左键, 两类浏览器又再次发生了区别, 标准的 DOM 浏览器会按照 mousedown mouseup click mousedown mouseup click dblclick 的顺序触发, 即两次单击合成一次双击在 Firefox 中的效果如图 6.17 所示图 6.16 鼠标的 click 事件图 6.17 鼠标的双击 dblclick 事件而双击事件在 IE 浏览器中的触发顺序为 mousedown mouseup click mouseup dblclick, 即一次单击紧接着 mouseup, 然后判断为双击对于其他鼠标事件的触发过程, 情况也是十分类似的, 读者可以利用该程序自己测试, 这里就不一一讲解鼠标事件中另外一个重要的属性就是 button, 它表示鼠标按键的键值非常遗憾的是 IE

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/ xhtml1-transitional.dtd"> <title>button 属性 </title> function TestClick(oEvent){ var odiv = document.

14 Firefox 这两个浏览器对该属性的支持大相径庭, 具体如表 6.3 所示 button 的值 IE 中的按键 Firefox 中的按键 0 未按下按键左键 1 左键中键 ( 滑轮 ) 2 右键右键 3 同时按下左右键不支持组合键, 未按下任何键时 button 值为 4 中键 ( 滑轮 ) undefined 5 同时按下左中键 6 同时按下右中键 7 同时按下左中右键简单的测试程序如例 6.9 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title>button 属性 </title> function TestClick(oEvent){ var odiv = document.getelementbyid("display"); if(window.event) oevent = window.event; odiv.innerhtml += oevent.button; // 输出 button 的值 document.onmousedown = TestClick; window.onload = TestClick; // 测试未按下任何键 <div id="display"></div> 以上代码简单地将鼠标事件 mousedown 的 button 值进行输出由于 mousedown 在按任何按键时都能响应, 因此能很好地描述 button 的各项值, 其中 window.onload 测试未按下任何按键时 button 的值在 IE 中的运行结果如图 6.18 所示实际测试中会发现, 当同时按下两个按键时, 都会显示两个值, 前一个是其中某个按键的值, 后一个才是两个按键同时按下时的值这也是因为任何双击都不可能做到 1 毫秒不差, 浏览器非常灵敏的缘故同时按下 3 键则会显示 3 个值, 道理是一样的而以上代码在 Firefox 浏览器中的运行效果如图 6.19 所示, 初始化时为 undefined, 之后只有这 3 个值图 6.18 IE 中 button 属性的值图 6.19 Firefox 中的 button 属性值

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/ xhtml1-transitional.dtd"> <title> 键盘事件 </title> function handle(oevent){ if(window.

15 除了鼠标之外, 与用户打交道最多的恐怕就是键盘了键盘的事件种类不多, 仅 3 种事件, 具体如表 6.4 所示 keydown keypress keyup 事件说明按下键盘上某个按键时触发, 一直按住某键则会持续触发按下某个按键并产生字符时触发, 即忽略 Shift Alt Ctrl 等功能键释放某个按键时触发尽管所有的元素都支持键盘事件, 但通常键盘事件只有在文本框中才显得有实际的意义, 测试程序如例 6.10 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title> 键盘事件 </title> function handle(oevent){ if(window.event) oevent = window.event; // 处理兼容性, 获得事件对象 var odiv = document.getelementbyid("display"); odiv.innerhtml += oevent.type + " "; // 输出事件名称 var otextarea = document.getelementsbytagname("textarea")[0]; otextarea.onkeydown = handle; // 监听所有键盘事件 otextarea.onkeyup = handle; otextarea.onkeypress = handle; <textarea rows="4" cols="50"></textarea> <div id="display"></div> 与例 6.8 一样, 该例对所有的键盘事件都进行监听, 可以看到按下某个会产生字符的按键时, 触发的顺序为 keydown keypress keyup IE 7 和 Firefox 中运行效果分别如图 6.20 和图 6.21 所示, 两类浏览器中的显示结果是相同的图 6.20 IE 7 键盘事件图 6.21 Firefox 键盘事件

对于键盘事件而言, 最重要的并不是事件的名称, 而是所按的是什么键由于 IE 浏览器没有 charcode 属性, 而 keycode 只有在 keydown keyup 事件发生时才与标准 DOM 的 keycode 相同, 在 keypress 事件中等同于 charcode, 因此常采用如下方法 oevent.charcode = (oevent.type == "keypress")?

16 对于键盘事件而言, 最重要的并不是事件的名称, 而是所按的是什么键由于 IE 浏览器没有 charcode 属性, 而 keycode 只有在 keydown keyup 事件发生时才与标准 DOM 的 keycode 相同, 在 keypress 事件中等同于 charcode, 因此常采用如下方法 oevent.charcode = (oevent.type == "keypress")? oevent.keycode : 0; 之所以通常不采用 keycode 是因为它表示键盘按键, 而不是输出的字符, 因此输出 a 和 A 时,keyCode 的值是相等的,charCode 则以字符为区分另外, 在 keypress 事件中, 标准 DOM 的 keycode 值始终为 0, 如例 6.11 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title> 键盘事件 </title> function handle(oevent){ if(window.event){ oevent = window.event; // 处理兼容性, 获得事件对象 // 设置 IE 的 charcode 值 oevent.charcode = (oevent.type == "keypress")? oevent.keycode : 0; var odiv = document.getelementbyid("display"); // 输出测试 odiv.innerhtml += oevent.type + ": charcode:" + oevent.charcode + " keycode:" + oevent.keycode + "<br>"; var otextarea = document.getelementsbytagname("textarea")[0]; otextarea.onkeypress = handle; otextarea.onkeydown = handle; <textarea rows="4" cols="50"></textarea> <div id="display"></div> 在 IE 浏览器中先输入小写字母 a, 再按 Shift 键输入一个大写字母 A, 可以看到 charcode 和 keycode 在不同事件类型中的值, 如图 6.22 所示可以看到只有 keypress 事件的 charcode 能够很好地区分键值 ( a 为 97, A 为 65) 第 3 行为按 Shift 键,charCode 不予显示 keycode 并不能区分大小写, a 和 A 都输出了 65 在 Firefox 中的情况类似,charCode 的值较明显地反映了输出字符, 而 keycode 却不能运行在 keypress 事件中, 如图 6.23 所示图 6.22 IE 中的 charcode 和 keycode

17 图 6.23 Firefox 中的 charcode 和 keycode 对于浏览器而言, 各种 HTML 对象同样有着自己的事件, 有一些也是用户常常会接触到的, 例如 load error 和 select 等一些常用的 HTML 事件如表 6.5 所示事件说明 load unload error select change submit focus blur 页面完全加载后在 window 对象上触发, 图片加载完成后在其上触发页面完全卸载后在 window 对象上触发, 图片卸载完成后在其上触发脚本出错时在 window 对象上触发, 图像无法载入时在其上触发选择了文本框的一个或多个字符时触发文本框失去焦点时, 并且在它获取焦点后内容发生过改变时触发单击提交按钮时在表单 form 上触发任何元素或窗口获取焦点时触发任何元素或窗口失去焦点时触发载入事件 load 是最常用的事件之一, 因为在页面载入完成之前,DOM 的框架还没有搭建完毕, 因此任何相关操作都不能发生给 window 对象分配 load unload 事件等同于标记的 onload onunload 方法, 即 : alert("page Loaded."); 等同于 : <body onload="alert('page Loaded.');"> unload 事件与 load 正好相反, 发生在页面卸载的时候, 使用频率不高, 但一些电子商务的网站通常在用户关闭窗口后弹出对话框表示感谢欢迎再次光临等效果, 就是采用 unload 事件实现的有时为了某些原因需要屏蔽鼠标的右键, 让用户不能使用它的快捷功能, 而只能使用网页本身提供的功能本例介绍两种方法以分别实现不同的屏蔽效果

如 6.4.1 节中所描述, 鼠标事件中 button 的值在各个浏览器上大相径庭, 但非常幸运的是按下鼠标右键时值都为 2, 因此屏蔽鼠标右键最直接的方法莫过于在 button 值为 2 的时候进行相应的处理, 如例 6.12 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

onmousedown = block; <p> 屏蔽鼠标右键 </p> 以上代码在 IE 浏览器中的运行结果如图 6.24 所示单击鼠标右键时弹出了对话框, 因此右键的菜单被变相屏蔽了不过非常可惜的是, 这种想当然的方法在 Firefox 中再次遇到了困难 Firefox 并没有因为变相地弹出对话框而屏蔽掉右键的菜单, 如图 6.25 所示图 6.24 屏蔽鼠标右键图 6.

18 如节中所描述, 鼠标事件中 button 的值在各个浏览器上大相径庭, 但非常幸运的是按下鼠标右键时值都为 2, 因此屏蔽鼠标右键最直接的方法莫过于在 button 值为 2 的时候进行相应的处理, 如例 6.12 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title> 屏蔽鼠标右键 </title> function block(oevent){ if(window.event) oevent = window.event; if(oevent.button == 2) alert(" 鼠标右键不可用 "); document.onmousedown = block; <p> 屏蔽鼠标右键 </p> 以上代码在 IE 浏览器中的运行结果如图 6.24 所示单击鼠标右键时弹出了对话框, 因此右键的菜单被变相屏蔽了不过非常可惜的是, 这种想当然的方法在 Firefox 中再次遇到了困难 Firefox 并没有因为变相地弹出对话框而屏蔽掉右键的菜单, 如图 6.25 所示图 6.24 屏蔽鼠标右键图 6.25 Firefox 中的情况从图 6.25 中可以看到, 确实弹出了警告对话框, 但右键菜单也在其上弹了出来, 这是浏览器兼容性方面的问题接下来将要介绍的第 2 种方法能够解决这个兼容性问题其实鼠标右键会触发另外一个事件, 即右键菜单 contextmenu 事件如果希望彻底屏蔽鼠标右键, 最有效的办法就是屏蔽 document 对象的 contextmenu 事件这里需要应用 IE 浏览器的

returnvalue 属性和标准 DOM 的 preventdefault() 方法, 如例 6.13 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

dtd"> <title> 屏蔽鼠标右键 </title> function block(oevent){ if(window.event){ oevent = window.event; oevent.

oncontextmenu = block; <p> 屏蔽鼠标右键 </p> 以上代码将右键菜单完全屏蔽了, 而且在两个浏览器中的效果都很好, 运行结果如图 6.26 所示图 6.

19 returnvalue 属性和标准 DOM 的 preventdefault() 方法, 如例 6.13 所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <title> 屏蔽鼠标右键 </title> function block(oevent){ if(window.event){ oevent = window.event; oevent.returnvalue = false; // 取消默认事件 else oevent.preventdefault(); // 取消默认事件 document.oncontextmenu = block; <p> 屏蔽鼠标右键 </p> 以上代码将右键菜单完全屏蔽了, 而且在两个浏览器中的效果都很好, 运行结果如图 6.26 所示图 6.26 屏蔽鼠标右键 contextmenu 事件在自定义右键菜单时也常常使用, 即屏蔽系统菜单后自定义一个 <div> 块来显示新的菜单, 读者可以自己试验在节的例 3.26 中介绍了无需表格的菜单的制作方法, 但该例的菜单只有一级, 实际网页中常常需要多级菜单本节在原例的基础之上加入了 JavaScript 代码, 实现两级菜单的单击显隐, 最终效果如图 6.27 所示图 6.27 伸缩的两级菜单

20 首先并不一定所有的一级菜单都有子菜单 ; 其次考虑到代码的通用性, 一级菜单和二级菜单的项数随时都可能变化, 因此 HTML 框架如例 6.14 所示 <div id="navigation"> <ul id="listul"> <li><a href="#">home</a></li> <li><a href="#">news</a> <ul> <li><a href="#">lastest News</a></li> <li><a href="#">all News</a></li> </ul> </li> <li><a href="#">sports</a> <ul> <li><a href="#">basketball</a></li> <li><a href="#">football</a></li> <li><a href="#">volleyball</a></li> </ul> </li> <li><a href="#">weather</a> <ul> <li><a href="#">today's Weather</a></li> <li><a href="#">forecast</a></li> </ul> </li> <li><a href="#">contact Me</a></li> </ul> </div> 以上 HTML 框架直接由原来的例 3.26 修改而来, 可以看到首尾两个一级菜单没有子菜单, 而中间的 3 个都有子菜单考虑到子菜单的样式风格应该区别于一级菜单, 因此将原来的 CSS 样式都加入子选择器代码如下 : #navigation > ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; #navigation > ul > li { border-bottom:1px solid #ED9F9F; /* 添加下划线 */ #navigation > ul > li > a{ display:block; /* 区块显示 */ padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515; /* 左边的粗红边 */ border-right:1px solid #711515; /* 右侧阴影 */ #navigation > ul > li > a:link, #navigation > ul > li > a:visited{ background-color:#c11136;

21 color:#ffffff; #navigation > ul > li > a:hover{ /* 鼠标经过时 */ background-color:#990020; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ 这样的话原先设置的 CSS 样式只能作用到一级菜单, 此时显示效果如图 6.28 所示如果读者对子选择器有不清楚的地方, 可参考节为了配合一级菜单, 可为二级菜单也添加相应的 CSS 样式风格, 代码如下 : /* 子菜单的 CSS 样式 */ #navigation ul li ul{ list-style-type:none; margin:0px; padding:0px 0px 0px 0px; #navigation ul li ul li{ border-top:1px solid #ED9F9F; #navigation ul li ul li a{ display:block; padding:3px 3px 3px 0.5em; text-decoration:none; border-left:28px solid #a71f1f; border-right:1px solid #711515; #navigation ul li ul li a:link, #navigation ul li ul li a:visited{ background-color:#e85070; color:#ffffff; #navigation ul li ul li a:hover{ background-color:#c2425d; color:#ffff00; 这些样式风格都是基于一级菜单的, 具体的设置细节这里不再重复, 方法与一级菜单的完全相同, 读者可参照例 3.26 中的讲解此时显示效果如图 6.29 所示图 6.28 修改 CSS 图 6.29 二级菜单考虑到二级菜单伸缩的两种不同状态, 为其分别添加两个 CSS 样式应用于其中的 <ul> 标记上, 代码如下 :

22 #navigation ul li ul.myhide{ /* 隐藏子菜单 */ display:none; #navigation ul li ul.myshow{ /* 显示子菜单 */ display:block; 而 HTML 部分也做相应的修改, 为二级菜单的 <ul> 标记添加 class 属性, 并设置为 myhide, 使得初始化加载页面时二级菜单隐藏, 例如 : <li><a href="#">news</a> <ul class="myhide"> <li><a href="#">lastest News</a></li> <li><a href="#">all News</a></li> </ul> </li> 此时显示效果如图 6.30 所示图 6.30 初始化隐藏二级菜单由于一级菜单和二级菜单在实际运用中项数变化较大, 因此所有的事件控制均采用动态加载的方法, 即放在 window.onload 函数中 : //... 首先找到一级菜单中所有的 <li> 元素, 即 <ul id="listul"> 中的所有子 <li>( 不包括孙 <li>), 然后对于每一个 <li> 判断其是否拥有二级菜单, 即 <li> 是否包含 <ul>, 如果包含则说明有二级菜单, 可为其添加 onclick 事件, 代码如下 : var oul = document.getelementbyid("listul"); var ali = oul.childnodes; // 子元素 var oa; for(var i=0;i<ali.length;i++){ // 如果子元素为 li, 且这个 li 有子菜单 ul if(ali[i].tagname == "LI" && ali[i].getelementsbytagname("ul").length){ oa = ali[i].firstchild; // 找到超链接 oa.onclick = change; // 动态添加单击函数

23 之所以要在 for 循环中再次判断 ali[i].tagname == "LI", 是为了兼容在 Firefox 中空格也为子元素的特点, 这点在前面的章节中也反复提到了通过 DOM 对 <li> 的遍历, 无论以后菜单的项数怎么变化, 只需要修改 HTML 框架即可, JavaScript 部分则不需要再改动而 change 函数的思路很简单, 即通过 classname 属性, 单击鼠标时切换二级菜单中 <ul> 的风格样式即可, 代码如下 : function change(){ // 通过父元素 li, 找到兄弟元素 ul var oseconddiv = this.parentnode.getelementsbytagname("ul")[0]; //CSS 交替更换来实现显隐 if(oseconddiv.classname == "myhide") oseconddiv.classname = "myshow"; else oseconddiv.classname = "myhide"; 这样便完成了整个菜单单击鼠标的伸缩效果, 完整代码在光盘第 6 章 \6-13.html 文件中, 读者可以自行查阅在 Firefox 中的运行效果如图 6.31 所示, 与 IE 中完全相同图 6.31 伸缩的菜单对于三级或更多级的菜单, 其制作原理与二级菜单是完全相同的, 读者可以自行练习其制作

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1