JavaScript的DOM事件详解

目录

• 1、事件对象
• 2、事件流
• 3、事件委托
• 4、综合案例
• 总结

1、事件对象

【获取事件对象】

• 什么是事件对象：是个对象，这个对象里有事件触发时的相关信息。
• 事件对象的语法

元素.addEventListener('click',function(e){})

【事件对象常用属性】

• type：获取当前的事件类型
• clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
• offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
• key：用户按下的键盘的值

【案例】：

2、事件流

【解释】： 事件流是指事件完整执行过程中的流动路径

【图解】：

【说明】：

• 捕获阶段是从父到子
• 冒泡阶段是从子到父

【什么是事件冒泡】 ：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。

事件冒泡是默认存在的。

【案例解释】

【事件捕获概念】： 从DOM的根元素开始去执行对应的事件。

【语法】

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

【说明】

• addEventListener第三个参数传入true代表是捕获阶段触发
• 若传入false代表冒泡阶段触发，默认就是false
• 原来的写法没有捕获只有冒泡阶段

【阻止事件的流动】

语法：

事件对象.stopProPagation()

说明：

• 阻止事件的流动，在捕获和冒泡阶段都有效
• mouseover 和 mouseout 会有冒泡效果
• mouseenter 和 mouseleave 没有冒泡效果(推荐)

【阻止事件的默认行为】

语法：

e.preventDefault()

3、事件委托

【解释】： 将事件委托于其他元素进行处理。

【优点】： 给父级元素添加事件可以极大的优化性能

【原理】： 利用事件冒泡的特点，给父级元素添加事件，子元素可以触发

【语法】： 事件对象.target可以获取得到真正触发事件的元素

4、综合案例

**【需求】：**点击录入按钮，可以增加学生信息

  
  
  
  
  


  
新增学员
  

    姓名：
    年龄：
    性别: 
      男
      女
    
    薪资：
    就业城市：
      北京
      上海
      广州
      深圳
      曹县
    
    录入
  
  
就业榜
  

    

      

        
学号
        
姓名
        
年龄
        
性别
        
薪资
        
就业城市
        
操作
      
    
    

    
  
  

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!