前端-王卓凡-20230522

箭头函数

• 语法：() => {}
• 如果参数只有一个的时候,小括号可以省略
• 没有 arguments 内置对象
• this：箭头函数没有自己的this, 它的this就是父级的this指向
• 如果代码块中只有一行返回值，大括号和return都可以省略
• 
  
  

classList 属性

•         classList属性有三个方法
• add('属性')  添加属性
• remove('属性')  移除属性
• toggle('属性') 切换,有就移除，没有就添加
• 
  
  

事件的高级应用事件的监听（添加）

• 能够添加方法并且不影响原来的方法
• 元素.addEventListeener(参数一，参数二，参数三)
  • 参数一为事件名，不需要要加on
  • 参数二，回调函数
  • 参数三布尔值（可以省略）
    
    
• 
  
  
  

事件的解绑

• 能够移除指定的方法
• 元素.removeEventListener(参数一，参数二)
  • 参数一:事件名
  • 参数二:事件程序
    
    
• 
  
  

事件流

• 事件流:事件在元素节点之间特定的顺序传播，这一过程就是DOM事件流,分为三个阶段
• 事件的阶段
  • 捕获阶段 - 由外到内
    • 顺序： box3 <- box2 <- box1 <- body <- html <- document
      
      
  • 目标阶段 - 触发事件的节点
  • 冒泡阶段 - 由内到外
    • 顺序：box3 -> box2 -> box1 -> body -> html -> document
      
      
    
    
• 事件默认以冒泡阶段执行
• 如果事件绑定 （元素.addEventListeener(参数一，参数二，参数三)）中参数三为true，则执行捕获阶段，即以相反顺序执行
  
  

事件对象的各种方法

• 添加事件时，函数的括号里可以放事件名，可以在函数内来引入事件对象，一般用e代指，事件对象可以使用许多自带的方法和属性
  
  

阻止事件冒泡

• 事件对象.stopPropagation可以阻止事件冒泡
  • 
    
    
  
  

阻止默认事件

• 事件对象.preventDafault,可以阻止原本默认有的事件，比如a超链接的跳转
• 
  
  

禁止选中和右键

• 选中事件 'selectstart'
• 右键事件 'contextmenu'
  • 选中事件后通过preveentDafault()来阻止事件
    
    
• 
  
  

target属性

• 事件委托:把事件绑定到父元素身上
• 特点:后来追加的子元素依然具有绑定的事件行为
• 事件对象.target，可以获得追加的子元素
• 
  
  

三组坐标

• 可视区域坐标
  • 浏览器的可视区域，不随浏览器和滚动条的变化而变化
  • e.clientX  横坐标 e.clientY 纵坐标
    
    
    
• 文档中的坐标
  • 文档的区域，不随浏览器变化，随着滚动条变化
  • e.pageX 横坐标  e.pageY  纵坐标
    
    
  
  

• 显示器的坐标
  • 整个屏幕的可视区域，随浏览器的位置变化而变化
  • e.screenX 横坐标  e.screenY 纵坐标
    
    
  
  

输入框获得焦点

• 元素名.cocus(),使用方法后能直接获得对应输入框的焦点，一般配合键盘事件使用