JavaScript第三讲.pptVIP

事件处理----捕捉与冒泡 捕捉和冒泡 好了，现在我们了解了必备的知识以后，开始来分析什么是捕捉什么是冒泡。 简单说捕捉就是自上而下，冒泡就是自下而上。 前面，我们提到了ie是没有捕捉的，所以我们使用火狐来演示什么是冒泡什么 是捕捉。 标准默认 标准捕捉 标准冒泡 第三章 DOM文档对象模型 事件处理 练习题：实现鼠标滑过，背景色变化。 如效果。 第三章 DOM文档对象模型 事件处理 阻止冒泡： 既然有冒泡这种情况，我们是否可以阻止冒泡呢？ 有这样的代码： function stopBubble(e){//阻止事件冒泡的通用方法 if(ee.stopPropagation) e.stopPropagation(); else window.event.cancelBubble=true; } 第三章 DOM文档对象模型 事件处理 阻止冒泡的实际应用： 题目：为页面上的所有标签添加onmouseover和onmouseout事件， 当鼠标滑过 背景色变化，鼠标离开，背景色恢复。 查看实际效果。 第三章 DOM文档对象模型 事件处理----注册事件 通用注册事件 由于ie和标准两个模型的注册事件不同，就给我们带来了很多不便， 于是，我们可以把两种注册事件混合成一个方法，该方法既能够在ie中 使用也能在火狐中使用。混合后的代码如下： function addEvent(obj,name,handler,userCaputure){ if(window.event){ obj.attachEvent(on+name,handler); } else{ obj.addEventListener(name,handler,userCaputure); } } 第三章 DOM文档对象模型 事件处理----注销事件 既然有注册事件，自然会有注销事件 注册有：addEventListener，attachEvent 注销有：removeEventListener，detachEvent 通用注销方法： function removeEvent(obj,name,handler,userCaputure){ if(window.event){ obj.detachEvent(on+name,handler); } else{ obj.removeEventListener(name,handler,userCaputure); } } 第三章 DOM文档对象模型 事件处理----事件对象 我们前面所见过的window.event 就是事件对象，那么该对象还有很多的 属性和方法，下面我们来了解下。 我们了解到ie和火狐的事件对象是不一样的，所以他们的属性和方法也不一样 查看下表: 第三章 DOM文档对象模型 取消冒泡 cancelBubble stopPropagation() / returnValue / / / srcElement IE 说明 标准 … altKey,ctrlKey,shiftKey 取消默认 preventDefault() 鼠标坐标（相对于窗口左上角） clientX，clientY 键盘码 keyCode 事件名称 type 目标 target 事件处理----事件对象 那么这些属性和方法有什么用途呢？ 我们来举例说明： 练习题1：一个文本框，一个按钮，当用户输入文本框，点击按钮，或者按下 回车键的时候，弹出文本框的值。 查看效果. 第三章 DOM文档对象模型 事件处理----事件对象 练习题2：( 要求只能给table添加事件) 如效果。 第三章 DOM文档对象模型 事件处理----常用事件 课本139页 第三章 DOM文档对象模型 事件相关练习 练习题1：悬浮广告 如效果 第三章 DOM文档对象模型 事件相关练习 练习题2：可拖动层 如效果 第三章 DOM文档对象模型 * 只进：是指对于查询处的结果，只能前进，不能后退。例如：前进到了第3条结果，就不能再返回到第一条或第二条结果。 只读：是指只能读取数据，不能修改数据。 第三章 DOM文档对象模型 主要内容： 基本概念 节点引