关于前端学习:JavascriptDOM事件

40次阅读

共计 4606 个字符,预计需要花费 12 分钟才能阅读完成。

  • 理解事件

    • 事件是指提前与浏览器设定好的一些行为,当用户触发这些行为时,将执行一个事件处理函数
    • 事件三要素:

      1. 事件源:将事件绑定在某个元素身上
      2. 事件类型:触发事件的行为形式
      3. 事件处理函数:当触发行为后,须要执行一个函数
  • 事件绑定的分类

  • DOM 0 级事件:事件源.on 事件类型 = 事件处理函数
    毛病:因为是赋值式函数,所以只能绑定一个事件处理函数
  • DOM 2 级事件:

    • 规范浏览器语法:
      事件源.addEventListener('事件类型', 事件处理函数, 事件执行程序)`
    
      参数:至多两个参数,能够绑定多个事件处理函数,函数由上至下执行,第三个参数设置事件执行程序,false 示意事件冒泡程序执行,true 示意事件捕捉程序执行
    • IE 低版本浏览器语法:
      事件源.attachEvent('on 事件类型', 事件处理函数)
    
      只有两个参数,能够绑定多个事件处理函数,函数由下至上执行
  • 事件的解绑

    • DOM 0 级事件的解绑
      事件处理函数是赋值式函数,所以事件解绑间接从新赋值为 null 即可
      语法: 事件源.on 事件类型 = null
    • DOM 2 级工夫的解绑
      留神点:DOM 2 级事件解绑时,事件处理函数须要是一个具名函数
    规范浏览器的事件解绑
      事件源.removeEventListener('事件类型', 事件处理函数)
    
    IE 低版本浏览器的事件解绑
      事件源.detachEvent('on 事件类型', 事件处理函数)
  • DOM 2 级事件绑定与解绑的兼容

    // 捕捉段落元素
    var p1 = document.getElementById("p1");
    // 定义事件处理函数 1
    var f1 = function () {p1.style.background = 'blue';};
    // 定义事件处理函数 2
    var f2 = function () {
      p1.style.background = 'red';
      // 兼容 IE 低版本浏览器
      if (p1.detachEvent) {p1.detachEvent("onmouseover", f1);  // 登记事件 mouseover
          p1.detachEvent("onmouseout", f2);   // 登记事件 mouseout
      }
      // 兼容规范浏览器
      else {p1.removeEventListener("mouseover", f1);  // 登记事件 mouseover
          p1.removeEventListener("mouseout", f2);   // 登记事件 mouseout
      }
    };
    // 兼容 IE 低版本浏览器
    if (p1.attachEvent) {p1.attachEvent("onmouseover", f1); // 绑定事件 mouseover
      p1.attachEvent("onmouseout", f2);  // 绑定事件 mouseover
    }
    // 兼容规范浏览器
    else {p1.addEventListener("mouseover", f1); // 绑定事件 mouseover
      p1.addEventListener("mouseout", f2);  // 绑定事件 mouseover
    }
  • DOM 操作罕用事件

  • 鼠标事件:

    • 鼠标左键单击事件:click
    • 左键双击单击事件:dblclick
    • 右键单击事件:contextmenu
    • 滚轮滚动事件:mousewheel
    • 鼠标任意键按下事件:mousedown
    • 鼠标按键抬起事件:mouseup
    • 鼠标挪动事件:mousemove
    • 鼠标移入事件:mouseover
    • 鼠标移出事件:mouseout
    • 鼠标移入事件(不会进行事件流传):mouseenter
    • 鼠标移出事件(不会进行事件流传):mouseleave
  • 键盘事件:(只有表单元素、document、window 触发)

    • 键盘按下事件 (不辨别中英文):keydown
    • 键盘抬起事件 (不辨别中英文):keyup
    • 键盘按下事件 (字符必须确定输出后才触发)keypress
  • 浏览器事件:(事件源为 window)

    • 页面加载事件:load
    • 页面滚动事件:scroll
    • 监督窗口尺寸变动事件:resize
    • 网络断开:offline
    • 网络复原:online
    • 哈希值变动:hashchange
  • 表单事件:(只能绑定给表单元素)

    • 表单内容扭转(聚焦前与失焦后内容不同):change
    • 表单输出内容:input
    • 表单聚焦:focus
    • 表单失焦:blur
    • 表单提交(只能绑定给 form 标签):submit
    • 表单重置(只能绑定给 form 标签):reset
  • 拖拽事件:(一般元素拖拽事件须要增加 draggable="true"属性)
    残缺的拖拽事件须要 拖拽元素 和 指标元素

    • 开始拖拽(绑定给拖拽元素):dragstart
    • 拖拽挪动(绑定给拖拽元素):drag
    • 完结拖拽(绑定给拖拽元素):dragend
    • 拖拽元素进入指标元素(绑定给指标元素):dragenter
    • 拖拽元素来到指标元素(绑定给指标元素):dragleave
    • 拖拽元素在指标元素内挪动(绑定给指标元素):dragover
    • 拖拽元素在指标元素内撒手(绑定给指标元素):drop
  • 触摸事件:(只能在挪动端失效)

    • 触摸开始:touchstart
    • 触摸挪动:touchmove
    • 触摸完结:touchend
  • 其余事件

    • 过渡完结(过渡几个属性就触发几次):transitionend
    • 抉择开始(框选文档时触发):slectstart
    • 窗口暗藏于显示(只能绑定给 Document):visibilitychange
  • 获取事件对象——event

  • 获取事件对象的办法

    div.addEventListener('click',function(event){
      // 兼容解决
      // 事件处理函数中的 event 形参中蕴含事件对象信息
      // window.event 是兼容 IE 的语法
      event=event||window.event
      console.log(event)
    })
  • 事件对象信息之 鼠标事件信息

    • 获取鼠标按下的按键:button 属性
      语法:event.button
      属性值为 0 示意鼠标左键,属性值为 1 示意是滚轮键,属性值为 2 示意鼠标右键
    • 获取鼠标光标的地位:
      1. 光标到可视窗口左上角间隔(不包含页面卷去的宽高)
      语法:

       X 轴坐标:event.clientX
      Y 轴坐标:event.clientY
      
      body.addEventListener('mousemove',function(event){
          event=event||window.event
          console.log(event.clientX,event.clientY)
      })


      2. 光标到文档流左上角间隔(包含页面卷去的宽高)

      // IE8 以下不反对
      X 轴坐标:event.pageX
      Y 轴坐标:event.pageY
      
       body.addEventListener('mousemove',function(event){
          event=event||window.event
          console.log(event.pageX,event.pageY)
       })


      3. 光标到元素左上角间隔(元素外部有子元素时受到影响)

       X 轴坐标:event.offsetX
      Y 轴坐标:event.offsetY
      
      // 增加 pointer-event:none 款式,光标到事件源元素左上角间隔将不会收到影响
      
      div.addEventListener('mousemove',function(event){
          event=event||window.event
          console.log(event.offsetX,event.offsetY)
      })

  • 事件对象信息之 键盘事件信息

    • 获取按下的键值(IE8 以下不反对):key 属性
      语法:event.key
    • 获取按下的键值码(FireFox 低于 20 的版本不反对,须要应用which 属性):keyCode 属性
      语法:event.keyCode
      兼容解决语法:event.keyCode||event.which
    • 判断按下的是不是 Ctrl、Shift、Alt、Win

      1. ctrlKey 属性 示意 ctrl 键
      2. shiftKey 属性 示意 shift 键
      3. altKey 属性 示意 alt 键(mac 上示意 options 键)
      4. metaKey 属性 示意 win 键(mac 上示意 command 键)
        按键按下后属性值为 true,否则为 falase
  • 事件流传

    • 当在一个元素触发一个事件时,会依照构造父级程序一层一层往上流传,直到 window 完结流传
    • 当触发一个事件时,会依照构造父级程序向上传递给同类型事件
    • 事件对象信息中的 path 属性示意以后事件流传的门路
    • 获取事件流传的门路(不反对 IE 低版本):event.path
      返回值:事件流传的门路
  • 事件的指标

    • 事件指标指精确触事件的元素,通过 targe属性可获取事件指标
    • 获取事件指标:event.target||event.srcElement
      返回值:事件触发的元素
  • 事件的冒泡和捕捉

    • 依照 指标 到 window 的程序执行所有事件叫做事件的冒泡
    • 依照 window 到 指标 的程序执行所有事件叫做事件的捕捉
    • addEventListener()的第三个参数设置事件执行程序
    • false 示意事件冒泡程序执行,true 示意事件捕捉程序执行
  • 阻止事件流传

    • 当元素触发行为时,为了避免执行多个元素的事件处理函数,咱们须要阻止事件的流传
    规范浏览器语法:形参名.stopPropagation()
    IE 低版本浏览器:ecacelBubble = true
    
    兼容语法①:if (event.stopPropagation){event.stopPropagation()
    }
    else{event.ecacelBubble = true}
    兼容语法②:try{event.stopPropagation()
    }
    catch(err){event.ecacelBubble = true}
    
    
    // 应用案例
    div.addEventListener('click',function(event){
      event=event||window.event
      event.stopPropagation()
      console.log('div 触发事件')
    })
    body.addEventListener('click',function(event){
      event=event||window.event
      event.stopPropagation()
      console.log('body 触发事件')
    })
  • 事件委托

    • 事件委托是指 利用事件冒泡,将子元素的事件绑定在一个独特的父元素身上
    • 事件委托的长处:缩小元素的事件绑定;缩小 DOM 的操作,进步性能;对增加的元素也可执行事件,不须要从新绑定事件
    • 事件委托的注意事项:事件委托须要委托给独特的构造父级;事件处理函数中应用事件指标去判断;留神事件指标的兼容解决;如果判断的是 nodeName 或 tagName 须要应用大写
  • 阻止浏览器的默认行为

    浏览器默认行为指 浏览器本省就有的事件行为

    • a 标签自带点击行为
    • form 标签自带表单提交行为
    • 内容框选 自带框选成果行为
    • 鼠标右键 自动弹出菜单

    阻止浏览器的默认行为语法:

    • 规范浏览器:形参名.preventDefault()
    • IE 低版本:形参名.returnValue = false
    • 兼容解决语法:
    语法①:if (event.preventDefault){event.preventDefault()
    }
    else{event.returnValue = false}
    语法②:try{event.returnValue = false}
    catch(err){event.preventDefault()
    }
    return false

正文完
 0