2015秋前端开发课件-js ui事件模型

1、8-JavaScript事件模型创建可用的界面2015 Spring, xian本章内容JavaScript事件模型事件注册HTML特性，DOM属性和方法事件对象跨浏览器事件处理捕捉和冒泡对象自定义对象JavaScript事件模型事件模型DOM事件模型提供了一种方式，让用户与浏览器环境交互DOM事件模型由事件和附着在DOM对象上的事件监听器组成DOM ElementEvent ListenerClick meOn Click Listener事件类型DOM提供的常见事件类型集合，使用于99%的时间鼠标事件触摸事件表单事件键盘事件DOM事件DOM事件类型的全列表 也可以自定义事件类型常见事件类型

2、鼠标事件clickhovermouseupmousedownmouseovermouseout键盘事件keydownkeypresskeyup常见事件类型(2)UI事件loadabortselectresizechange焦点事件blurfocusfocusinfocusout常见事件类型(3)触摸事件touchstarttouchendtouchcanceltouchleavetouchmove事件注册事件处理开发者能够为特殊事件类型和DOM元素，注册一个事件处理器/监听器注册可以完成由：HTML特性使用DOM元素属性使用DOM事件处理器作为HTML特性通过给事件处理器属性进行简单赋值，可以

3、附着事件处理器值是纯JavaScript，且不总是函数Click MeClick Mefunction buttonClickFunction() console.log(You click the Button);使用HTML特性注册事件处理器 演示使用DOM元素属性使用标准的DOM事件在确定DOM元素上，并赋引用给函数可以是匿名Click mevar button = document.getElementById(click-button);button.onclick = function onButtonClick() console.log(你点击了按钮);使用DOM元素属性 演示

4、使用DOM附加事件处理器到DOM上的标准方法基本语法是：示例domElement.addEventListener(eventType, eventHandler, isCaptureEvent)var button = document.getElementById(click-button);button.addEventListener(click, function () console.log(You clicked me); , false);使用DOM注册事件处理器 演示事件对象得到事件数据事件对象事件处理器通过函数参数访问事件对象事件对象包含相关信息：事件类型事件目标当键盘事件

5、触发按下的键当鼠标事件触发按下的鼠标键鼠标在屏幕上的位置事件对象(2)事件对象可访问，作为仅有的函数处理器参数但是，IE并不能传递事件对象保存事件对象在window.event幸运的是可以简单修复function onButtonClick(event) console.log(event.target); console.log(event.type); console.log( + event.clientX + , + event.clientY + );button.addEventListener(click, onButtonClick, false); function onBu

6、ttonClick(event) if(!event) event = window.event; / Your code事件对象 演示跨浏览器事件处理器记住某个浏览器？跨浏览器兼容性addEventListener并不是任何地方都支持IE的老版本有自己的方法来附加事件处理器attachEvent(on + eventType, handler)使用特征检测：domElement.attachEvent(on + eventType, eventHander);/ Up to IE8if (document.attachEvent) domElement.attachEvent();/ IE

7、9, IE 10, Firefox, Chrome, Opera, Safarielse if (document.addEventListener) domElement.addEventListener(); / Reeeally old browserselse domElementon + eventType = handler; 跨浏览器事件处理可以在一个方法中转换创建有三个参数的函数目标元素事件类型事件处理器使用浏览器支持的方法跨浏览器事件处理器 演示捕捉和冒泡事件自顶向下和其他方法事件链当用户点击HTML元素时，事件也触发了该元素的所有父节点按钮仍然是目标，但点击事件触发了所有的

8、父节点事件在链中触发了所有元素 Click Me 点击触发触发触发触发事件链 演示两类事件链有两类事件链捕捉和冒泡冒泡处理器冒泡给父节点先执行的处理器是在目标上然后是其父节点，父节点的父节点，等捕捉处理器沿着事件链向下先执行的处理器在所有父节点上最后执行的处理器在目标上捕捉捕捉沿着事件链向下先执行的处理器在所有父节点的其中一个上HTMLBODYDIVBUTTON4213用户单击按钮冒泡冒泡沿着事件链向上先执行的处理器是在目标上HTMLBODYDIVBUTTON1234用户单击按钮捕捉和冒泡 演示自定义事件自定义事件创建自定义事件使用CustomEvent()构造器示例：创建自定义事件tripl

9、eclick得到body元素来附加自定义事件和addEventListenervar event = new CustomEvent(eventType); var event = new CustomEvent(tripleClick); var body = document.getElementsByTagName(body)0;body.addEventListener(tripleClick, function() alert(You click three times);, false);自定义事件(2)触发自定义事件使用：示例body.dispatchEvent(event);(function() var button = document.getElementById(btn-click); var counter = 0; button.addEventListener(click, func