JS事件绑定
工具/原料
JS
方法/步骤
1
1、什么是事件绑定所谓的事件绑定就是为某个对象的某个事件绑定相关的事件处理程序。2、事件绑定的几种方式在Javascript中，事件绑定一共有3种方式：① 行内绑定② 动态绑定③ 事件监听3、行内绑定基本语法：<标签 属性列表 事件=”事件的处理程序” />例： 示例代码：
2
以上代码就是最典型的行内绑定，虽然可以完成我们需要的功能，但是其把结构+样式+行为都绑定在同一个标签中，不利于后期维护。
动态绑定
基本语法：dom对象.事件 = 事件的处理程序（通常是一个匿名函数） 问题：什么是dom对象?在Javascript中，通过document对象获取的都是dom对象。 通过动态绑定这种思想改进上题，效果如下图所示：
行内绑定与动态绑定的区别
1
在Javascript中，有一个特殊对象叫做this，其随着运行环境的不同，其指向也是不同的！ 例1：探究行内绑定中的this指向
2
运行结果：this.style为空或不是对象，所以由此可以得出一个结论：在行内绑定中其this并不是指向当前正在操作的dom对象，那请问其指向何方呢？使用调试工具调试结果如下：
3
由此可知：行内绑定中其this指向了全局window对象！ 例2：探究动态绑定中的this指向
4
运行结果：id为box的div元素背景发生了变化，由此可以得出结论：动态绑定中其this指向了当前正在操作的DOM对象。 综上所述：行内绑定中，其事件处理中的this指向了全局window对象 动态绑定中，其事件处理中的this指向了当前正在操作的dom对象