DOM事件

鼠标事件监听

DOM事件_第1张图片

键盘事件监听

DOM事件_第2张图片

表单事件监听 

DOM事件_第3张图片

常见的页面事件监听

DOM事件_第4张图片

事件传播

事件传播顺序:从内到外(冒泡阶段)onxxx这样写法只能监听冒泡阶段

DOM事件_第5张图片

DOM事件_第6张图片

addEventListener()方法第三个参数如果为true监听捕获阶段,false监听冒泡阶段(默认)

最内层盒子跟书写顺序有关(谁写前面谁就先执行),外面的盒子跟书写顺序无关(结果都是先捕获后冒泡)

DOM事件_第7张图片

事件对象e/event 

DOM事件_第8张图片

使用e.offset属性注意点:内部不能再有比它小的元素,否则位置属性会以小元素左上角为原点

DOM事件_第9张图片

keyCode特殊记忆 

DOM事件_第10张图片

e.preventDefault()方法:阻止事件的默认动作

案例:制作一个文本框,只能让用户在其中输入小写字母和数字,其他字符输入没有效果




    
    Title


  

DOM事件_第11张图片




    
    Title
    


0

e.stopPropagation()阻止事件传播

案例:制作一个弹出层:点击按钮显示弹出层,点击网页任意地方,弹出层关闭




    
    Title
  


  
  

事件委托

批量添加事件监听




    
    事件委托


  
  • 列表项
  • 列表项
  • 列表项
  • 列表项
  • 列表项
  • 列表项
  • 列表项
  • 列表项

每一个事件监听注册都会消耗一定的系统内存,而批量添加事件会导致监听数量太多,内存消耗非常大,实际上,每个

  • 事件处理函数都是不同的函数,这些函数本身也会占用内存

    新增元素动态绑定事件

    
    
    
        
        事件委托
    
    
    
      

      DOM事件_第12张图片

      事件委托详解

      DOM事件_第13张图片

      DOM事件_第14张图片 

      
      
      
          
          事件委托2
      
      
        
      • 列表项
      • 列表项
      • 列表项

       DOM事件_第15张图片

      
      
      
          
          事件委托2
      
      
      
      
      • 列表项
      • 列表项
      • 列表项

      DOM事件_第16张图片

      onmouseenter:这个属性天生不冒泡的。相当于你事件处理函数附加给了哪个DOM节点,就是哪个DOM节点自己触发的事件,没有冒泡过程。类似于e.currentTarget属性

      onmouseover:这个属性天生是冒泡的。 类似于e.target属性

      使用事件委托时要注意:不能委托不冒泡的事件给祖先元素

      使用事件委托时需要注意的事项

      DOM事件_第17张图片

       

      
      
      
          
          事件委托2
      
      
      
      
      • 我是列表项
      • 我是列表项
      • 我是列表项

      DOM事件_第18张图片

      如果最内层元素li还有额外的元素span,则点击span我是 时候,只会执行我是样式为红色

       

    • 你可能感兴趣的:(js,前端,javascript,html5)