事件绑定的几种方式Javascript

1、1.事件绑定的几种方式

在Javascript中，事件绑定一共有3种方式：

① 行内绑定

② 动态绑定

③ 事件监听

3、行内绑定

基本语法：

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

例：<input  type=’button’  onclick=’display()’ />

示例代码：

2、2.动态绑定

基本语法：

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

问题：什么是dom对象?

在Javascript中，通过document对象获取的都是dom对象。

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

3、3.行内绑定与动态绑定的区别

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

例1：探究行内绑定中的this指向

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

使用调试工具调试结果如下：

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

5、5.例2：探究动态绑定中的this指向

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

6、6.封装一个自定义函数

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