8.2事件的绑定方式 (1).pptx

快速入门8.2事件的绑定方式JavaScript爱国奉献友爱团结和谐爱岗敬业

知晓学习目标learningaims成果分析1知识目标23能力目标素质目标学习事件的绑定方式、使用事件监听式添加事件和移除事件的实现方法。巩固JavaScript基本案例的知识技能。能够完成“使用事件监听方式绑定事件处理程序及移除事件”案例的实现。提高：善于分析问题和解决问题的实践动手能力。形成规范化，标准化的代码编写习惯。增强精益求精、实践创新的精神。重难点重点

概念：事件绑定指的是为某个元素对象的事件绑定事件处理程序。1、事件的绑定方式行内绑定式动态绑定式事件监听式熟记事件的绑定方式知识学习

2、事件的绑定方式——行内绑定式事件的行内绑定式是通过HTML标签的属性设置实现的。标签名事件=事件的处理程序标签名可以是任意的HTML标签，如div标签、button标签等；事件是由on和事件名称组成的一个HTML属性，如单击事件对应的属性名为onclick；事件的处理程序指的是JavaScript代码，如匿名函数等。熟记事件的绑定方式知识学习

2、事件的绑定方式——行内绑定式注意由于开发中提倡JavaScript代码与HTML代码相分离。因此，不建议使用行内式绑定事件。熟记事件的绑定方式知识学习

3、事件的绑定方式——动态绑定式动态绑定式有效解决JavaScript代码与HTML代码混合编写的问题。因此在实际开发中推荐使用事件的动态绑定式。DOM元素对象.事件=事件的处理程序;事件的处理程序一般都是匿名函数或有名的函数。熟记事件的绑定方式知识学习

3、事件的绑定方式——动态绑定式行内绑定式与动态绑定式的异同不同点：实现语法不同，前者通过HTML标签的属性设置，后者在JS中处理DOM对象。相同点：同一个DOM对象的同一个事件只能有一个事件处理程序。熟记事件的绑定方式知识学习

4、事件的绑定方式——事件监听式优点：可给同一个DOM对象的同一个事件添加多个事件处理程序。缺点：具有兼容性问题，一类是早期版本的IE浏览器（如IE6~8），一类遵循W3C标准的浏览器（以下简称标准浏览器）。熟记事件的绑定方式知识学习

4、事件的绑定方式——事件监听式参数type指的是为DOM对象绑定的事件类型，它是由on与事件名称组成的，如onclick。参数callback表示事件的处理程序。DOM对象.attachEvent(type,callback);早期版本的IE浏览器添加事件：熟记事件的绑定方式知识学习

4、事件的绑定方式——事件监听式参数type指的是DOM对象绑定的事件类型，它是由事件名称设置的，如click。参数callback表示事件的处理程序。参数capture默认值为false，表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。DOM对象.addEventListener(type,callback,[capture]);标准浏览器中添加事件：熟记事件的绑定方式知识学习

4、事件的绑定方式——事件监听式当事件监听的处理程序是一个有名的函数时，可移出事件监听。DOM对象.detachEvent(type,callback); //早期版本IE浏览器DOM对象.removeEventListener(type,callback,[capture]);//标准浏览器参数type值的设置要与添加事件监听的事件类型相同，参数callback表示事件处理程序的名称，即函数名。移除事件：熟记事件的绑定方式知识学习

实践技能操作skills代码编写案例：事件监听方式绑定、移除事件

实践技能操作skills代码编写案例讲解：事件监听方式绑定、移除事件

感谢聆听