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,笔记)