DOM事件笔记

1. 封装兼容性的绑定事件处理函数 addEvent(elem, type, handle); 方法。
   给一个dom对象添加某种事件类型的处理函数。

   function addEvent(elem, type, handle) {

   if (elem.addEventListener) {

   elem.addEventListener(type, handle, false);

   }else if(elem.attachEvent) {

   elem.attachEvent(type, function () {

   handle.call(elem);

   })

   }else {

   elem['on' + type] = handle;

   }

   }

2. 解除事件处理程序
   1. ele.onclick = false/''/null;
      即给onclick赋一个值为 false 的值。
   2. ele.removeEventListener(type, fn, false);
      类型和函数都必须是add时的同一个（所以如果绑定了匿名函数，则无法解除。因为匿名函数无法被调用）
   3. ele.detachEvent('on' + type, fn);
      类型和函数都必须是attach时的同一个（所以如果绑定了匿名函数，则无法解除。因为匿名函数无法被调用）
3. 事件处理模型：事件冒泡，事件捕获
   1. 事件冒泡：
      结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
   2. 事件捕获：
      结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
   3. 触发顺序，先捕获，后冒泡
      要注意：你发生事件的那个元素的事件的处理程序既不属于事件冒泡，也不属于事件捕获，而是单纯的触发事件，所以发生事件的那个元素的处理顺序是按照代码的顺序来执行。
   4. focus, blur, change, submit, reset, select 等事件不冒泡
      这些事件没有事件冒泡
4. 取消冒泡和阻止默认事件：
   1. 封装取消冒泡的函数 stopBubble(event);

      代码：

      function stopBubble(event) {

      if(event.stopPropagation) {

      event.stopPropagation();

      }else {

      event.cancelBubble = true;

      }

      }

   2. 阻止默认事件：
      默认事件： 表单提交，a标签跳转，右键菜单等很多事件。
      封装阻止默认事件的函数 cancelHandle(event);
      代码：

      function cancelHandle(event) {

      if(event.preventDefault) {

      event.preventDefault();

      }else {

      event.returnValue = false;

      }

      }

5. 事件对象，事件源对象：
   1. 事件对象就是指每个事件发生时产生的一个对象，它是事件处理函数的形参。
      兼容性的写法：var event = e || window.event;
   2. 事件源对象指的是对哪个元素发生了事件，它指的是发生事件的那个元素。
      var target = event.target || event.srcElement;
   3. 事件源对象的用处：事件委托
      事件委托就是利用事件冒泡，和事件源对象进行处理，提高效率，简化代码。
      事件委托实例：

      ul.onclick = function (e) {

      var event = e || window.event;

      var target = event.target || event.srcElement;

      console.log(target.innerText);

      }

6. 鼠标相关事件
   1. 鼠标事件：
      1. click （敲击鼠标事件）
         ​​​​​​​它等于 mousedown+mouseup 所以它是比较迟缓的，是这两个事件组合在一起的结果。
      2. mousedown（按下鼠标事件）移动端是 touchstart 。
      3. mousemove（鼠标移动事件）移动端是 touchmove 。
      4. mouseup（鼠标松开事件）移动端是 touchend 。
      5. 前面的鼠标事件的一个综合例子：拖拽功能
          
      6. contextmenu（右键显示菜单事件）
      7. mouseover （当鼠标进入区域事件）
      8. mouseout （当鼠标移出区域事件）
      9. mouseenter （当鼠标进入区域事件）
         ​​​​​​​和mouseover是一样的，只是它是html5的新规范。
      10. mouseleave （当鼠标移出区域事件）
          和mouseleave是一样，只是它是html5的新规范。
   2. 用e.button来区分鼠标的按键，0（左键）、1（滚动轮）、2（右键）。
   3. DOM3标准规定：click事件只能监听左键。
      ​​​​​​​所以只能用 mousedown 和 mouseup 来判断区分鼠标键。
7. 键盘事件（这些事件在调用时前面都要写 "on" ）
   1. keydown keyup keypress
      1. keypress（键盘按下事件）
      2. keydown（键盘按下事件）
      3. keyup （键盘松开事件）
   2. 什么时候用keydown，什么时候用keypress。
8. 其他事件（这些事件在调用时前面都要写 "on" ）
   1. 文本操作事件
      1. input （操作文本框事件）
      2. change （文本框聚焦前后改变 事件）
      3. focus（鼠标聚焦文本框时触发事件）
      4. blur （鼠标聚焦文本框外时触发事件）
   2. 窗体操作类（window上的事件）
      1. scroll （滚动条滚动事件）
      2. load （当整个页面全部解析完(包括html结构加载完，css渲染完，dom的所有内容全部下载完了之后，整个页面全部就绪后)，触发load事件） （不只是window上有这个事件，但凡能下载都有load这个事件）
         一般用它都是拿来看什么时候页面加载完，或者等页面加载完插入广告。

最后

以上就是高大滑板为你收集整理的DOM事件笔记的全部内容，希望文章能够帮你解决DOM事件笔记所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。