1. 阻止事件冒泡

1.1 事件流：

事件是有传递性的，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，层叠在你点击范围的所有元素都会触发事件。捕获阶段：由外向内。冒泡阶段：由内向外。

1.2 为什么要阻止事件冒泡：

当只在指定的节点上添加事件，而不想让其传递到外层节点触发事件，这样我们就需要阻止事件冒泡。

1.3 阻止事件冒泡的方法 ---> 通过事件对象e

e.stopPropagation( ); ---> google 火狐（重点）
e.cancelBubble = true; ---> ie

兼容写法：

      if (e.stopPropagation) { //判断e有没有这个方法，如果有调用这个方法，否则else调用另外一种方法。方法也是属性的一种，只是方法的值是一个函数。
          e.stopPropagation();  
      } else {
          e.cancelBubble = true;
      }
复制代码

2. 阻止默认行为

2.1 默认行为

① a标签的跳转
② 表单的提交
③ 表单的重置
④ 图片的拖拽
⑤ 右击菜单

2.2 阻止默认行为的方法

方式一：return false;

方式二：通过事件对象 e

e.preventDefault( ) ---> google 火狐（重点）
e.returnValue = false ---> ie

兼容写法：

  if (e.preventDefault) { //判断e有没有这个方法，如果有调用这个方法，否则else调用另外一种方法。方法也是属性的一种，只是方法的值是一个函数。
      e.preventDefault();  
  } else {
      e.returnValue = false;
  }

3. AddEventListener与RemoveEventListenter

事件监听器，是JS事件中的一种事件触发机制，我们可以通过添加事件监听器的方式给元素添加事件及执行函数。

优点：onclick=fn , 这种语法,事件容易被覆盖,而不能绑定多次事件，让一个事件可以扩展功能。

AddEventListener与RemoveEventListenter共有三个参数

第一个参数:事件类型
第二个参数:回调函数
第三个参数:第三个参数,为false冒泡；为true表示,捕获 {once:true}(只执行一次) 或者 {capture:true} 或者直接true

注意: AddEventListener添加的函数与removeEventListener移出的方式，必须是同一个,才有效

4. getComputedStyle()和currentStyle

setoffWidth和setoffHight是获取自身的宽高，但是不能获取隐藏元素的宽高

而window.getComputedStyle()这个方法来获取元素当前的样式

需要两个参数

第一个:要获取样式的元素
第二个:可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

1.可以通过getComputedStyle(对象，null).样式名的形式来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如:没有设置width,它不会获取到auto,而是一个长度
2.为了更方便的使用可以加入正则表达式获取样式名，利用getComputedStyle(样式元素, null)[样式名]的形式来获取样式

5. 自执行函数

自执行函数，也称立即调用函数。自执行函数,自运行函数,自己会运行起来的函数，而{}就是创建了一个新的对象

写法： (function(){})()

① 第1个小括号里面放匿名函数； ② 第2个小括号表示调用，可以往里面传参

全局的变量和函数有什么问题?

全局容易被污染被其他的覆盖或修改

6. document.documentElement.scrollTop

获取滚动条位置：document.documentElement.scrollTop

获取当前页面的滚动条纵坐标位置：document.documentElement.scrollTop;

当HTML失去DTD文档声明头的解决方案:

事件下