JavaScript-事件监听、事件对象与事件流

什么是事件

• 事件是在编程时系统内发生的动作或者发生的事情
• 比如用户在网页上单击一个按钮

什么是事件监听？

• 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事
  件
• 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

事件监听三要素

• 事件源： 那个dom元素被事件触发了，要获取dom元素
• 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
• 事件调用的函数： 要做什么事

事件监听

L0 绑定

语法：元素对象.on事件 = function() { }

  <button>点击</button>

 	const btn = document.querySelector('button')
	btn.onclick = function(){
   
		alert('点击')
	}

L2 绑定

语法：元素对象.addEventListener(‘事件类型’,要执行的函数)

  <button>点击</button>

    // 需求： 点击了按钮，弹出一个对话框
    // 1. 事件源   按钮  
    // 2.事件类型 点击鼠标   click 字符串
    // 3. 事件处理程序 弹出对话框
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
   
      alert('你早呀~')
    })

区别

on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

vue绑定

  <button onclick="hi()">点击</button>

    function hi(){
   
      alert('你好呀~')
    }

事件类型

鼠标事件

鼠标出发

类型	触发
click	鼠标点击
mouseenter	鼠标经过
mouseleave	鼠标离开
dblclick	鼠标双击

键盘事件

键盘触发

类型	触发
keydown	键盘按下触发
keyup	键盘抬起触发

焦点事件

表单获得光标

类型	触发
focus	获得焦点
blur	失去焦点

文本事件