HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5面试题 ——> WEB前端面试真题 - 事件绑定的基本方法,什么是事件

WEB前端面试真题 - 事件绑定的基本方法,什么是事件

2015/04/27 14:32:46 | 作者:HTML5学堂(码匠) | 分类:HTML5面试题 | 关键词:WEB前端,面试题,事件绑定,什么是事件

说说JavaScript的事件绑定方法并举例

HTML5学堂 :对于事件,向来是公司衡量开发者水平常用的问题。每个面试者虽然都能够回答出这个问题的答案,但是详细程度不同的答案内容,直接“暴露”了应聘者的水平。在回答这个面试题时,一方面,回答的逻辑应当清晰;另一方面,回答的内容应当包含DOM0级、DOM2级(事件监听器)的基本事件绑定,还可以适当的介绍基本的兼容。

1、面试题种类

JavaScript、事件

2、面试题考核知识点

事件绑定发展沿革,不同种类的事件绑定

3、面试题注意点

首先,能够想到事件绑定的三次发展变化,以及不同事件绑定具有什么特点,再次,在提到DOM2级事件绑定的时候,最好是把两者的具体区别也书写一下。同时,关于解除绑定的方法也一并书写出来更合适~

欢迎沟通交流~HTML5学堂

4、面试题参考答案

在最初,是使用HTML事件处理程序的,也就是说,某个元素(如div),支持的每一种事件,都可以使用一个与相应事件处理程序同名的HTML特性来制定(也就是标签的一个属性),这个特性的值就是能够执行的JavaScript代码。例如:

  1. <div onclick='alert("H5course")'>H5course</div>

但是,HTML事件处理程序的很多问题:

首先,HTML代码域JavaScript代码紧密的耦合在一起,没有实现相互分离,在进行代码的更新与维护的时候就显得异常困难。

第二,扩展事件处理程序的作用域链在不同浏览器当中会导致不同的结果。

第三,如果不采用调用函数的方式,而是像例子中那样直接书写代码,那么代码的通用性很差,会使得整站的代码量很大,通用性差。如果提取出来,存放在函数当中,那么,会面临另一个问题——当函数还没有被定义,只是HTML、CSS代码加载完毕,用户进行点击,会完全没有反应。

 

基于上面的这些问题,人们逐渐的去完善了事件处理程序,此时出现了DOM0级事件处理程序。(第四代WEB浏览器中出现)

DOM0级事件处理程序是什么样子的呢?其实它就是我们平时最为常用的事件绑定,如下面这个例子:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件-H5course</title>
  6. </head>
  7. <body>
  8.     <p id='btn'>DOM0级事件处理程序</p>
  9. </body>
  10. <script>
  11.     var btn = document.getElementById('btn');
  12.     btn.onclick = function(){
  13.         alert(this.innerHTML);
  14.     }
  15. </script>

在DOM0级事件处理程序推出之后,广为各个用户的使用,但是,却出现了这样一个问题,当我希望为同一个元素/标签绑定多个同类型事件的时候(如,为上面的这个p标签绑定3个点击事件),是不被允许的。那么,此时,出现了另一种事件处理程序,就是DOM2级的事件处理程序,在DOM2级当中,定义了两个基本方法,用于处理指定(即绑定)和删除事件处理程序的操作,分别是addEventListener()和removeEventListener(),IE9+、FireFox、Safari、Chrome和Opera都是支持DOM2级事件处理程序的。对于IE8-,则使用的是IE专有的事件处理程序:两个类似的方法——attachEvent()与detachEvent()。

addEventListener()和removeEventListener()中的第三个参数,表示的是在哪个事件阶段进行事件处理,如果是false,则指的是冒泡阶段;如果是true,则指的是捕获阶段。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端