javascript前端开发课程二绑定.pdfVIP

Javascript 中的 ：第二讲 绑定 （给 处理方法） 珠峰培训 2011-6 绑定的三种方式 1. 把方法写在HTML代码的 属性里 2. 写在JS获取到的HTML对象的属性中 3. 写在HTML里和写在JS对象属性里的区别和 优缺点 4. 2级DOM的 绑定方法 5. 2级DOM的 绑定方法 的优点 6. 2级DOM的 绑定方法的浏览器兼容性问 题 把方法写在HTML代码的 属性里 ⚫ 方式一：div id=“div1” onclick=“fn()”/div ⚫ 方式二：div style=height:50px; background:red; onclick=if(window.num) num++;else num=1;alert(click#+num); alert(this);/div ⚫ 优点1：简单易懂 ⚫ 优点2 ：适用于任何浏览器 ⚫ 缺点：HTML代码和JS混在一起，不简洁不利于 ，不便于模 块化 提问：上面代码中的num是那个作用域里的变量 写在JS获取到的HTML对象的属性中 ⚫ .ge ementById(‘div1’).onclick=fn ⚫ 方法名后面为什么不加括号 （不能写成fn() ） ⚫ 优点是什么 ⚫ 缺点一：后面绑定的方 覆盖前面的方法，比如： oDiv.onclick=fn1;oDiv.onclick=fn2;则起作用的只是fn2 。 这个缺点的解决方法：oDiv.onclick=function(){fn1();fn2();} ⚫ 缺点二： 的处理方法和这个 的元素分离，交互时有可能 该元素还没有加载，所以常 window.onload=function(){oDiv.onclick=fn;} 第一种绑定式的一些重要特征 ⚫ 并非使用HTML的 属件绑定的方式等于一 个字符串，而是隐式的定义了一个方法。（用 typeof检测） ⚫ 作用域问题，或者说this关键字的问题 ⚫ 复习作用域和作用域链等知识 1、方法在定义它们的作用域中运行，而非调用他们的作用域中运行。 2、直接把JS 写在HTML的 属性里作用域的特点 （见示例，重 在理解HTML对象的作用域） 3、直接把定义好的方法写在HTML的 属性里的作用域特点 第二种绑定方式的重要特点 ⚫ 成了一个JS对象的属性值，宿主发生了变生 ，this 的指向也就发生了变化 ⚫ 方法名后面加括号和不加括号的区别 ⚫ 这样绑定方式叫DOM 0级绑定 2级DOM中的高级 处理 1. 的三个阶段：捕获、冒泡和目标阶段 2. 的意义和 （ 冒泡或捕 获） 3. 2级DOM中的 绑定1：标准浏览器的做法 4. 2级DOM中的 绑定2 ：IE浏览器的做法 5. 2级DOM中 绑定3：IE浏览器的不足 的演示 （示例一） ⚫ IE中的冒泡 ⚫ 其它浏览器中是三个阶段都有 的简单应用 （示例二） ⚫ 可以把所有的 放到 这一级来处 理，更方便，性能更高 的 ⚫ 修改示例2使 不能得到onclick ⚫ 的代码： e=e||window.event; ⚫ if(e.