事件绑定

事件绑定

1、什么是事件绑定

所谓的事件绑定就是为某个对象的某个事件绑定相应的事件处理程序，我们把这个过程就称之为"事件绑定"。

2、事件绑定的三种形式

① 行内绑定

② 动态绑定

③ 事件监听

3、行内绑定

基本语法：<标签         属性列表…      事件="事件的处理程序" />

由此可知：咱们刚才在常用Javascript事件中演示的都是通过行内绑定实现的。

 

例1：点击div元素，实现更换元素的背景颜色

通过以上形式的绑定（行内绑定）就可以完成相关功能。

 

面试题：你会不会写结构+样式+行为相分离的代码？

结构：HTML代码

样式：CSS代码

行为：Javascript代码

4、动态绑定

例2：使用结构+样式+行为相分离的思想改进例1

要用到的知识点：动态绑定，基本语法：

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

什么是dom对象？

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

以上程序可以完成对结构+样式+行为的分离，其实以上程序还可以进一步简化为如下形式：

5、行内绑定与动态绑定的区别

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

1）行内绑定中的this指向：

运行结果：直接报错，提示this.style为空或不是对象，使用调试工具显示如下：

IE调试几步走：

① 在认为可能出错的位置下一个断点

② 启动调试，单击页面中的程序触发代码的执行，直到出现黄色的小箭头

③ 在右侧监视窗口，写入要监管的变量或对象

通过以上调试可以得出一个结论：在行内绑定中其内部的this指向全局window对象

<div onclick = 'display();'></div>相当于<div onclick = 'window.display();'></div>，记住这样一句话：在Javascript中，谁调用了这个函数，其函数内部的this就指向谁。

 

特别说明：在Javascript中，所有的全局变量或函数都是以属性形式添加到window对象中，如下图所示：

2）动态绑定中的this指向

要使用到的知识点：封装一个$函数，用于获取指定id的dom对象

编写代码，测试动态绑定中的this指向：

由以上案例运行结果可以得出结论：动态绑定中其处理程序内部的this指向了当前正在操作的dom对象。

 

综上所述：

行内绑定中，其内部的this指向了全局window对象

动态绑定中，其内部的this指向了正在操作的dom对象