JS视频:事件第二讲:DOM 0级事件处理的方式

作者:日期:2011-06-21 22:21:41 点击:316

本讲是珠峰培训javaScript前端开发课程第四部分的第二讲,根据PPT的大纲如下:

序:事件绑定的三种方式:

  • 1.把方法写在HTML代码的事件属性里
  • 2.写在JS获取到的HTML对象的属性中
  • 3.写在HTML里和写在JS对象属性里的区别和优缺点
  • 4.2级DOM的事件绑定方法
  • 5.2级DOM的事件绑定方法 的优点
  • 6.2级DOM的事件绑定方法的浏览器兼容性问题

一:第一种事件绑定方式:把方法写在HTML代码的事件属性里

  1. 方式一:<div id=“div1” onclick=“fn()”></div>
  2. 方式二:<div style="height:50px; background:red;" onclick="if(window.num) num++;else num=1;alert('click#'+num); alert(this);"></div>
  3. 优点1:简单易懂
  4. 优点2:适用于任何浏览器
  5. 缺点:HTML代码和JS混在一起,不简洁不利于维护,不便于模块化
  6. 提问:上面代码中的num是那个作用域里的变量

二:第二种事件绑定方式:写在JS获取到的HTML对象的属性中(DOM 0级)

Document.getElementById(‘div1’).onclick=fn
方法名后面为什么不加括号(不能写成fn())
优点是什么
缺点一:后面绑定的方法会覆盖前面的方法,比如:oDiv.onclick=fn1;oDiv.onclick=fn2;则起作用的只是fn2。
这个缺点的解决方法:oDiv.onclick=function(){fn1();fn2();}
缺点二:事件的处理方法和这个事件的元素分离,交互时有可能该元素还没有加载,所以常window.onload=function(){oDiv.onclick=fn;}

三:第一种绑定式的一些重要特征

  1. 并非使用HTML的事件属件绑定的方式等于一个字符串,而是隐式的定义了一个方法。(用typeof检测)
  2. 作用域问题,或者说this关键字的问题
  3. 复习作用域和作用域链等知识
    1、方法在定义它们的作用域中运行,而非调用他们的作用域中运行。
    2、直接把JS脚本写在HTML的事件属性里作用域的特点(见示例,重在理解HTML对象的作用域)
    3、直接把定义好的方法写在HTML的事件属性里的作用域特点

四: 第二种绑定方式的重要特点

  1. 成了一个JS对象的属性值,宿主发生了变生,this的指向也就发生了变化
  2. 方法名后面加括号和不加括号的区别
  3. 这样绑定方式叫DOM 0级绑定

上一篇: JS视频:事件第一讲:概述

下一篇: JS视频:事件第三讲:事件的传播、冒泡、捕获等