javaScript和Ajax基础_第三章.pptVIP

第三章 JavaScript事件模型 目标 了解JavaScript事件模型 掌握Event对象 掌握常见事件类型 编写事件处理程序 JavaScript事件模型 事件流 DOM事件流 事件冒泡 事件捕获 事件监听器 事件监听器 传统事件处理程序指派方式 现代事件处理程序指派方式 JavaScript 事件 传统事件处理程序指派方式 在XHTML标记的事件处理属性中指定 在JavaScript中指定事件处理程序 优点：兼容 缺点：一个事件只能指定一个监听器 现代事件处理程序指派方式 IE浏览器方式 attachEvent(“onclick”,函数) detachEvent(“onclick”,函数) DOM方式 addEventListener(“click”,函数,bCapture); removeEventListener(“click”,函数,bCapture); 兼容问题的解决 事件处理程序的返回值 默认行为 Return false Event对象 事件对象 IE的event对象 DOM的event对象 event对象 IE的window.event DOM的event参数 oDiv.onclick=function(oEvent){ }; arguments[0] 跨浏览器代码 event对象属性和方法 相同点 Type ----事件的类型，如onlick中的click keyCode-shiftKey,altKey,ctrlKey：返回一个布尔值 clientX,clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置 screenX,screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要 不同点 srcElement和target：事件源，就是发生事件的元素 keyCode和charCode： 返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符 。(firefox2不支持 event.keycode，可以用 event.which替代 ) returnValue属性和preventDefault()：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作 cancelBubble属性和stopPropagation：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素 兼容性问题 事件类型 鼠标事件 键盘事件 HTML事件 鼠标事件 属性 clientX, clientY type target或srcElement shiftKey,altKey,ctrlKey button 事件发生顺序 键盘事件 属性 keyCode charCode target或srcElement shiftKey,altKey,ctrlKey 事件发生顺序 字符键 非字符键 HTML事件 load和unload resize scroll 总结 冒泡和捕获模型 监听器的添加于删除 event对象 跨浏览器的JavaScript代码编写 常用事件 * 7-* 鼠标按下 onMouseDown 鼠标弹起 onMouseUp 表单提交事件 onSubmit 网页文档加载事件 onLoad 鼠标移动，表示在DIV层等上方移动 onMouseMove 鼠标移出，即离开图片等所在的区域 onMouseOut 鼠标悬停，即鼠标停留在图片等的上方 onMouseOver 失去焦点，表示文本框等失去鼠标光标。 onBlur 获得焦点，表示文本框等获得鼠标光标。 onFocus 文本内容或下拉菜单中的选项发生改变 onChange 鼠标单击 onClick 说明 事件名