2021-04-20《js 基础知识复习 5》

事件？

• 什么是事件?
  
  可以被js检测到的行为.

• 事件执行时机?
  
  通常配合函数使用

• 什么是事件流?
  
  事件的执行顺序:从目标向上传播,分两种。
  事件的捕获，事件的冒泡。

• 事件捕获？
  
  从document到下面

• 事件冒泡
  
  从目标向上传播一直到window

• 鼠标类事件？
  
  onmousedown,
  
  onmouseup,
  
  onmouseover,
  
  onmouseout,
  
  onmousemove,(放大镜效果)
  

• 键盘类事件?
  
  必须要获得焦点才可以触发
  onkeyup
  
  onkeydown
  
  可以获取键盘值,通过传递参数
  
  e.keyCode来获得键值

    eee.οnkeyup=function(e)
    {
      // console.log(e.keyCode);
      if(e.keyCode==13)
      {
        console.log();
      }
    }
 

• 其他事件?
  
  onload事件加载完成后立即执行了，立即执行

window.οnlοad=function()
{

}
imgs.οnlοad=function()
{
  //图片加载完毕后显示
}
用法：针对于页面和图片

onfocus:获取焦点

onblur：失去焦点

onscroll:滚动条事件

document.οnscrοll=function()
{
  document.documentElement.scrollHeight=0
}

onchange:内容改变时触发:(用于select选择框)

• 事件处理程序?
  
  解释：可以有很多方式给元素添加事件

html事件处理程序

  缺点：高耦合
  把事件写在html上

0级事件处理程序

 缺点:同样元素的同样事件会被覆盖
 

Dom二级事件处理程序

  dom对象.addEventListener(事件名称，函数，false|true)
    flase:冒泡，
    true：捕获
    缺点：ie8或以下不兼容

• 删除事件？
  
  应用场景：当onmounseup(鼠标放下) 去执行删除onmounsemove事件

  dom对象.事件名称 =null
  dom对象.removeEventListener(‘click’,fn)

• 事件对象
  
  事件对象的属性

事件对象.target:

 btn.onclick = function(e)
 {
  console.log(e.target)
  //返回dom对象
 }
 

clientX和clientY

• 事件委托? (很有活力and非常重要)
  
  解释：本身应该给li 加事件，却给ul加
  
  优点：性能较好，后添加的节点也有效果
  
  应用场景:当拥有原来的li时也依然可以直接删除

• 阻止事件冒泡和阻止默认行为

事件对象.stopPropagation();
事件对象.preventDefault();