JavaScript基础知识（一）

尝试汇总下JavaScript的基础知识

本文包括：

• JavaScript简介（1）

• 以上代码直接在HTML代码里定义了一个onclick触发showFn方法，这样的事件处理程序缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。当然其优点是不需要操作DOM来完成事件的绑定。

  DOM0级事件就是将一个函数赋值给一个事件处理属性，比如：

  以上代码我们给button定义了一个id，通过JS获取到了这个id的按钮，并将一个函数赋值给了一个事件处理属性onclick，这样的方法便是DOM0级处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。

  DOM0级事件处理程序的缺点在于一个处理程序无法同时绑定多个处理函数，比如我还想在按钮点击事件上加上另外一个函数。
  2.DOM2级事件
  DOM2级事件在DOM0级事件的基础上弥补了一个处理程序无法同时绑定多个处理函数的缺点，允许给一个处理程序添加多个处理函数。代码如下：

  `
  
  

  DOM2级事件定义了addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含3个参数，分别是绑定的事件处理属性名称（不包含on）、处理函数和是否在捕获时执行事件处理函数。如果我们还需要添加一个鼠标移入的方法，只需要：

  btn.addEventListener('mouseover', showFn, false);
  这样点击按钮和鼠标移入时都将触发showFn方法。

  需要注意的是IE8级以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent来实现：

  btn.attachEvent('onclick', showFn); // 绑定事件 
  btn.detachEvent('onclick', showFn); // 解绑事件 
  

  这里我们不需要传入第三个参数，因为IE8级以下版本只支持冒泡型事件。

  3.DOM3级事件
  DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

  • UI事件，当用户与页面上的元素交互时触发，如：load、scroll
  • 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
  • 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
  • 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
  • 文本事件，当在文档中输入文本时触发，如：textInput
  • 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
  • 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
  • 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

  同时DOM3级事件也允许使用者自定义一些事件。

  DOM事件流
  上文中讲到了addEventListener的第三个参数为指定事件是否在捕获阶段执行，设置为true表示事件在捕获阶段执行，而设置为false表示事件在冒泡阶段执行。那么什么是事件冒泡和事件捕获呢？可以用下图来解释：

  事件冒泡与事件捕获
  1.事件冒泡
  所谓事件冒泡就是事件像泡泡一样从最开始生成的地方一层一层往上冒，比如上图中a标签为事件目标，点击a标签后同时也会触发p、li上的点击事件，一层一层向上直至最外层的html或document。下面是代码示例：

  
      事件冒泡
  
  
  
  
  

  上面的代码运行后我们点击a标签，首先会弹出'我是目标事件'提示，然后又会弹出'事件冒泡至DIV'的提示，这便说明了事件自内而外向上冒泡了。

  那么我们如何阻止事件冒泡呢？这里就涉及事件的Event对象中的stopPropagation方法，如下：

  child.addEventListener('click', function(e) {
      alert('我是目标事件');
      e.stopPropagation();
  }, false);
  

  加上stopPropagation方法后，我们再次点击a标签就不会触发div上的click事件了。

  2.事件捕获
  和事件冒泡相反，事件捕获是自上而下执行，我们只需要将addEventListener的第三个参数改为true就行。

  
      事件冒泡
  
  
  
  

  此时我们点击a标签，首先弹出的是'事件冒泡至DIV'，其次弹出的是'我是目标事件'，正好与事件冒泡相反。

  
  
  image

  1.3浏览器对象模型（BOM）

  Internet Explorer 3 和 Netscape Navigator 3 有一个共同的特色，那就是支持可以访问和操作浏览器窗口的浏览器对象模型（BOM，Browser Object Model）。开发人员使用 BOM 可以控制浏览器显示的页面以外的部分。而 BOM 真正与众不同的地方（也是经常会导致问题的地方），还是它作为 JavaScript 实现的一部分但却没有相关的标准。这个问题在 HTML5 中得到了解决，HTML5 致力于把很多 BOM 功能写入正式规范。HTML5 发布后，很多关于 BOM 的困惑烟消云散。
  从根本上讲，BOM 只处理浏览器窗口和框架；但人们习惯上也把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分。下面就是一些这样的扩展：

  • 弹出新浏览器窗口的功能；
  • 移动、缩放和关闭浏览器窗口的功能；
  • 提供浏览器详细信息的 navigator 对象；
  • 提供浏览器所加载页面的详细信息的 location 对象；
  • 提供用户显示器分辨率详细信息的 screen 对象；
  • 对 cookies 的支持；
  • 像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。

  由于没有 BOM 标准可以遵循，因此每个浏览器都有自己的实现。虽然也存在一些事实标准，例如要有 window 对象和 navigator 对象等，但每个浏览器都会为这两个对象乃至其他对象定义自己的属性和方法。现在有了 HTML5，BOM 实现的细节有望朝着兼容性越来越高的方向发展。

  2.标签之间再包含额外的 JavaScript 代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。另外，通过