（中职）JavaScript项目式实例教程项目八电子课件工信版

（中职）JavaScript项目式实例教程项目八电子课件工信版 项目八 自制滚动条 —— 事件的高级应用  JavaScript项目式实例教程 如图8.1所示，页面上的方框中显示了一篇文章，旁边有一个自制的竖向滚动条。用户可以按住鼠标左键上下拖动滚动条中的滑块或者通过控制鼠标滚轮浏览方框中的文章。 项目情境 图8.1 自制滚动条  JavaScript项目式实例教程 掌握事件流和事件绑定。 掌握阻止浏览器默认行为的方法。 掌握鼠标滚轮事件的处理方法。 学习目标  JavaScript项目式实例教程 如图8.2所示，页面上左右两边各有一个条幅广告，点击任何一个广告条幅中的“X”链接都将两幅广告条同时关闭。 任务1 关闭广告对联 图8.2 关闭广告对联  JavaScript项目式实例教程 1、事件流 在项目四中，我们已经学习了事件的概念，我们也一直在使用事件。但是，都是一个对象响应一个事件，这是一种单一事件处理机制。实际上，在浏览器中，可以同时有多个对象响应同一个事件。 例如，在一个表单中有一个提交按钮，当点击按钮时，实际上也点击了表单和表单所在的网页，所以，有时候不仅仅只对按钮做事件处理。此时，事件会按照一个特定的顺序进行传播，依次执行相应的事件处理函数。这种处理机制就好像事件在不同的对象间流动一样，所以我们把它形象的称之为“事件流”。 在不同的浏览器中，这种事件的流动顺序或者说一个或多个对象响应事件发生的先后顺序是不一样的。 在IE中采用的是冒泡型事件处理机制，而在Netscape或FF火狐浏览器中采用的是捕获型事件处理机制。 【相关知识】  JavaScript项目式实例教程 2、冒泡型事件 冒泡型事件的基本思想是，事件按照从最特定的事件目标到最不特定的事件目标（document对象）的顺序触发。 3、捕获型事件 捕获型事件触发的过程则正好和冒泡型事件触发过程相反。在捕获型事件中，事件从最不精确的对象（document对象）开始触发，然后到最精确的对象。 4、DOM事件流 DOM事件流则是W3C制定一个标准规范，它同时支持两种事件流模式，不过是先发生捕获型事件流，再发生冒泡型事件流。需要特别指出的是，在DOM事件流中，文本节点也触发事件（IE中不支持）。 【相关知识】  JavaScript项目式实例教程 5、为事件绑定监听函数 1）传统的绑定方法 这是我们前面章节一直在使用的方法，写法为如下形式： 对象.事件=匿名函数 或者 对象.事件=函数名 这种绑定方式简单，但是一次只能绑定一个事件处理函数，如果重复绑定，会产生覆盖。传统绑定方法只会在事件冒泡中运行，这种方法对所有的浏览器都适用。 【相关知识】  JavaScript项目式实例教程 2）W3C标准绑定方法 这种绑定方式是用addEventListener方法绑定监听事件，写法为如下形式： 对象.addEventListener(事件名称,函数,是否捕获) 其中，参数“事件名称”不要加“on”；参数“函数”可以是匿名函数，也可以是一个已经定义的函数名称；参数“是否捕获”取值为true或者false，表示事件处理函数是否在捕获阶段触发，为true表示触发，为false表示不触发。 这种绑定方式同时支持事件处理的捕获和冒泡两个阶段，同一个对象的同一个事件可以绑定多个事件处理函数。但是，必须注意，这种方法在IE9.0以下版本浏览器中不能被识别。 【相关知识】  JavaScript项目式实例教程 3）IE事件绑定方法 这种绑定方式是用attachEvent方法绑定监听事件，写法为如下形式： 对象.attachEvent(事件名称,函数) 其中，参数“事件名称”要加“on”，参数“函数”可以是匿名函数，也可以是一个已经定义的函数名称。 这种绑定方式只支持事件处理的冒泡阶段，同一个对象的同一个事件可以绑定多个事件处理函数。但是，必须注意，这种方法在IE9.0及以上版本浏览器、FF火狐等浏览器中不能被识别。 【相关知识】  JavaScript项目式实例教程 6、解除事件绑定函数 通过addEventListener方法绑定的事件处理函数，必须使用removeEventListener方法才能解除，而且要求参数与绑定事件处理函数时addEventListener方法的参数完全一致（包括参数“捕获”）。 通过attachEvent方法绑定的事件处理函数，必须使用detachEvent方法才能解除，而且要求参数与绑定事件处理函数时attachEvent方法的参数完全一致。 【相关知识】  JavaScript项目式实例教程 1、在<body>标签内部输入以下代码，创建两个DIV，在每个DIV中各放置一个用户关闭的空的超级链接。 <body>