事件

作者: baby熊_熊姐 | 来源:发表于2017-08-03 10:17 被阅读17次

    Doctype(文档类型)

    浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。

    包含混杂模式和标准模式

    • 标准模式(standards mode):浏览器根据标准规约来渲染页面。
    • 混杂模式(quirks mode):浏览器采用更加宽松的、向后兼容的方式来渲染页面。默认模式

    事件

    事件流

    • 事件冒泡:事件开始由最具体的元素接收,然后逐级向上传播。支持性良好,兼容早期版本
    • 事件捕获:不太具体的节点更早接收事件,而最具体的节点最后接收事件。新版本浏览器支持,建议优先使用事件冒泡
    • 事件流:事件捕获阶段、目标阶段、冒泡阶段

    事件处理程序

    • DOM0级:btn.onClick = fn
    • DOM2级:btn.addEventListener('click', fn, boolean), false表示冒泡阶段执行,true表示捕获阶段执行。btn.removeEventListener('click', fn, boolean), 移除事件处理, fn必须是同一个函数引用
    • IE事件处理:btn.attachEvent('onClick', fn), btn.dettachEvent('onClick', fn)

    跨浏览器的事件处理

    var EventUtil = {
       //添加事件监听
       addHandler: function(element, type, handler){
          if(element.addEventListener){
              element.addEventListener(type, fn, false)
          } else if (element.attachEvent){
             element.attachEvent("on" + type, handler)
          } else {
            element["on"+type] = handler
          }
       },
      // 移除事件监听
      removeHandler: function(element, type, handler){
         if(element.removeEventListener){
            element.removeEventListener(type, handler, false)
         } else if (element.detachEvent){
            element.detachEvent("on"+type, handler)
         } else {
            element["on"+type] = handler
         }
      },
      // 获取事件本身
      getEvent: function(event){
         return event || window.event
      },
      // 获取目标元素
      getTarget: function(event){
         return event.target || event.srcElement
      },
      // 阻止默认事件
     prevenDefault: function(event){
        if (event.preventDefault){
          event.preventDefault();
        } else {
          event.returnValue = false
        }
     },
    // 阻止事件冒泡
    stopPropagation: function(event){
       if(event.stopPropagation){
           event.stopPropagation();
       } else {
           event.cancelBubble = true;
       }
    }
    }
    

    相关文章

      网友评论

          本文标题:事件

          本文链接:https://www.haomeiwen.com/subject/gmvulxtx.html