JavaScript程序设计第五章事件处理.pptx

JavaScript程序设计与应用 事件处理 目 录事件处理方式事件对象事件处理高级应用事件概述 目 录事件处理方式事件对象事件处理高级应用事件概述 一、什么是事件事件概述 事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。二、事件三要素1、事件源（浏览器或页面元素)：浏览器、body、p等。 2、事件触发类型（动作）: 浏览器事件如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。HTML 元素事件如点击按钮、拖动图片等。3、事件处理程序（响应）:事件处理器是与特定的文本和特定的事件相联系的 JavaScript 脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。 目 录事件处理方式事件对象事件处理高级应用事件概述 一、注册事件方式内置函数事件处理方式给元素添加事件称为注册事件或绑定事件，注册事件有两种方式：传统方式和绑定事件侦听器1、传统方式利用on开头的事件 onclick缺点：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。2、绑定事件侦听器利用addEventListener(type，listener[,useCapture)方法注册事件。 type:不带on的事件类型字符串，例如click、mouseover等;listener：事件处理程序，事件发生时会调用该监听函数;useCapture：可选参数，是一个布尔值，默认为falseW3C标准推荐方式IE9之前不支持这个方法，可以使用attachEvent（）代替特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。 二、删除事件方式内置函数事件处理方式1、传统注册方式eventTarget.onclick = null;2、绑定事件侦听器的方式eventTarget.removeEventListener(type，listener)； 目 录事件处理方式事件对象事件处理高级应用事件概述 一、什么是事件对象内置函数事件对象 注册事件时系统自动生成的一个包含事件相关的一系列信息数据的集合，它会传递给事件处理程序。同时，这个对象有很多属性和方法。鼠标触发事件的得到的是鼠标的相关信息，键盘触发事件得到的是键盘的相关信息。二、使用事件对象 eventTarget.onclick = function(event) { }eventTarget.addEventListener(‘click’, function(event) { }//event:事件对象，可以自己命名，通常命名为event、e、evt 三、事件对象的常见属性和方法内置函数事件对象 四、鼠标事件对象内置函数事件对象 内置函数事件对象五、键盘事件的常用方法 目 录事件处理方式事件对象事件处理高级应用事件概述 一、DOM事件流内置函数事件处理高级应用1、事件流指的是页面中事件接收的顺序。2、事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程即使DOM事件流捕获阶段 (从根节点开始顺着目标节点构建一条事件路径，即事件由页面元素接收，逐级向下，到具体的元素)目标阶段 (到达目标节点，即元素本身)冒泡阶段 (从目标节点顺着捕获阶段构建的路径回去， 即跟捕获相反具体元素本身，逐级向上，到页面元素) 内置函数事件处理高级应用3、事件流中的注意事项JavaScript代码中只能执行捕获或者冒泡的一个阶段传统绑定方式和IE早期浏览器只支持冒泡addEventListen()方法的第三个参数是布尔值，true表示事件在捕获阶段调用事件处理程序，false则在冒泡阶段调用事件处理程序。实际开发中很少使用事件捕获，后面会讲到冒泡的应用有些事件没有冒泡，例如onblur、onfoucs等 二、事件委托内置函数事件处理高级应用 有时候需要绑定的子节点很多，一个个地添加事件处理非常繁琐，这时可以将事件绑定在这些节点的父节点上，利用事件冒泡的原理，触发子节点时父节点也可以接收到事件，同时也会影响到每一个子节点。1、事件委托的原理2、事件委托的优点利用事件委托，只操作了一次DOM ,提高了程序的性能。 单击此处添加副标题谢谢聆听