龙空技术网

JS事件处理程序

尚硅谷教育 106

前言:

现在兄弟们对“调用前台js方法”都比较着重,兄弟们都需要分析一些“调用前台js方法”的相关知识。那么小编同时在网上汇集了一些关于“调用前台js方法””的相关资讯,希望姐妹们能喜欢,大家一起来了解一下吧!

JS事件处理程序

之前一直对事件处理程序这个概念不是很清楚,正好趁着看js高程这本书,来总结一下。

事件处理程序是跨浏览器的,也就是说不通的浏览器处理事件处理程序不通(主要就是IE)。

事件处理程序,分为HTML事件处理程序,DOM0/DOM2级事件处理程序,以及IE事件处理程序。

一、什么是事件处理程序:

  说起事件处理程序,需要首先理解什么是事件,事件就是用户或浏览器自身执行的某种动作。例如click,load等事件。

二、HTML事件处理程序

  有两种方式处理HTML事件处理程序,第一种是直接在html标签中定义,第二种在js中写函数。

  HTML事件处理程序都有一个event变量,通过event可以直接访问事件对象。

  HTML事件的缺点:

  1、如果页面没有完全加载完毕会出错。

  2、HTML与JS紧密耦合。

  3、不同浏览器出现差异。

三、DOM0级事件处理程序

  我们经常使用的 element.onclick = function(){},这种方式的事件处理程序就是DOM0级事件处理程序

  DOM0级事件处理程序,是通过js指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。

  DOM0级和HTML相比,有两个优点:

  1、简单

  2、跨浏览器优势(所有浏览器都支持)

四、DOM2级事件处理程序

DOM2级事件,定义了两种方方法来处理定义和删除事件处理程序:addEventListener()removeEventListener() .

这两种方法都包含三个参数,属性名,方法,和一个boolean值。如果布尔值是false,表示在冒泡阶段调用事件处理程序,如果是true表示的是在捕获阶段处理事件处理程序。默认值是false。

五、IE事件处理程序

IE实现了与DOM中类似的两个方法,attachEvent()和detachEvent()。这两个方法接收相同的参数,事件处理程序名称和事件处理函数。

在IE浏览器中使用attachEvent()和DOM0级事件处理程序的主要区别是作用域方面。DOM0级事件处理程序的作用域是在当前元素上,而attachEvent则是全局作用域,也就是说tihs指向window。

attachEvent同样也是支持处理多个事件处理程序,但是它与DOM有个明显的区别就是后定义的代码先执行。

使用attachEvent和DOM2有同样的问题,如果把函数写在里面的话是无法取消事件监听函数的。

六、跨浏览器的事件处理程序

为了兼容IE,在开发过程中只能使用跨浏览器的事件处理程序

阅读更多内容

JS循环的执行机制

前端JS高阶面试题

JS实现继承有几种方法

JS重复输出一个给定的字符串

AngularJS引导程序

标签: #调用前台js方法 #js事件处理流程