JavaScript几种事件绑定的方式

事件绑定的几种方式
在Javascript中,事件绑定一共有3种方式:

① 行内绑定

② 动态绑定

③ 事件监听

1、行内绑定

基本语法:

<标签 属性列表 事件=”事件的处理程序” />

例:

示例代码:
在这里插入图片描述

以上代码就是最典型的行内绑定,虽然可以完成我们需要的功能,但是其把结构+样式+行为都绑定在同一个标签中,不利于后期维护。

2、动态绑定

基本语法:

dom对象.事件 = 事件的处理程序(通常是一个匿名函数)

通过动态绑定这种思想改进上题,效果如下图所示:

在这里插入图片描述
3、行内绑定与动态绑定的区别

在Javascript中,有一个特殊对象叫做this,其随着运行环境的不同,其指向也是不同的!

例1:探究行内绑定中的this指向
在这里插入图片描述

运行结果:this.style为空或不是对象,所以由此可以得出一个结论:在行内绑定中其this并不是指向当前正在操作的dom对象,那请问其指向何方呢?

使用调试工具调试结果如下:
在这里插入图片描述

由此可知:行内绑定中其this指向了全局window对象!

例2:探究动态绑定中的this指向
在这里插入图片描述

运行结果:id为box的div元素背景发生了变化,由此可以得出结论:动态绑定中其this指向了当前正在操作的DOM对象。

综上所述:

行内绑定中,其事件处理中的this指向了全局window对象

动态绑定中,其事件处理中的this指向了当前正在操作的dom对象

4、封装一个自定义函数
在这里插入图片描述
在Javascript中,我们操作的大多数都是dom对象,获取方式都是通过document.的形式,这样代码过于冗余,所以为了解决这个问题,我们封装一个自定义函数,专门用于获取指定id的dom对象。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页