三种绑定事件

2019-06-02  本文已影响0人  stringtoString

其实三种事件的绑定还是比较易学的,主要还是多敲语法,每种类型练习三五遍基本就可以掌握了。

1,dom0级绑定事件

绑定事件:元素 + on+ 事件 = 执行条件语句函数

优点: 简单,具有跨浏览器的优势

缺点:只能绑定一次事件处理程序

解绑:将事件置空

2,封装绑定dom2级函数

不封装状态:元素+ addEventListener(事件类型, 处理程序函数, 布尔值)

前言:DOM2级事件定义了两个方法,用于处理绑定和删除事件处理程序的操作

事件类型: 'click'

处理程序的函数: function () {}

是否在捕获阶段调用事件处理程序

 true: 在捕获阶段调用事件处理程序

false: 在冒泡阶段调用事件处理程序

优点:可以多次绑定不同的事件处理程序,并且会按照它们的绑定顺序执行

解绑:元素+ addEventListener(事件类型, 事件处理函数, 布尔值)

通过上面方式绑定的事件只能使用removeEventListener()来移除

移除的时候传入的参数与绑定处理程序的时使用的参数需要相同,那么问题来了,你的处理程序函数是匿名函数将无法移除,也就是说最好处理程序函数使用有名函数

3,  IE浏览器特殊绑法

IE实现了与DOM中类似的两个方法: attachEvent() 和 detachEvent()

IE只支持事件冒泡

attachEvent()与使用DOM0级方法的主要区别,在于事件处理程序的作用域

在使用DOM0级方法的情况下,事件处理程序会在其所属元素的作用域内运行

在使用attachEvent()方法情况下,事件处理程序会在全局作用域中运行,因此this等于window, attachEvent()也可以绑定多个事件处理程序函数,但是它的执行顺序与addEventListener的执行顺序相反

绑定事件:元素.attachEvent(事件类型,事件处理函数)

解绑:元素.detachEvent(事件类型,事件处理函数)

条件必须提供相同的参数

事件处理程序函数也必须是有名函数

上一篇下一篇

猜你喜欢

热点阅读