事件

@Event

传统事件 onXXX

.适合简单逻辑

.不符合结构 - 样式 - 逻辑分离的开发原则，较少使用

常见事件类型
类别	说明
全局事件	onclick
窗口事件	onresize \| onload
表单事件	oninput \| onsubmit \| onchange
键盘事件	onkeyup \| onkeydown
鼠标事件	onmouseup \| onmousedown \| onmouseover \| onmouseout \| onmouseenter
多媒体事件	onplay

元素属性形式

.事件以 onXXX 的形式作为元素的一个属性写在结构元素上；事件处理逻辑可以写在结构中也可以写在脚本中

.可以携带参数

.只能满足当前元素的需求

.只能处理冒泡阶段

[] 完全耦合 - 全部写在结构中

<div onclick="alert('hi,there.')">点击我</div>

[] 部分耦合 - 结构逻辑分离

<div onclick="fn()">点击我</div>

function fn() {
  alert('hi,there.')
}

[] 部分耦合 - 携带形参；参数类型可以是简单数据类型，也可以是复杂数据类型

<div onclick="fn_para({id:1,name:'glpla'})">点击我</div>

function fn_para(p) {
    console.log(this);
    console.log(p);
}

对象属性形式

.先获取对象再以属性的形式分配事件 onXXX - 更多在脚本中处理

.兼容性好

.只能满足当前元素；且元素只能绑定一个事件

.事件函数可以接受参数；可以使用形参 e 获取事件对象；可以使用 this 获取执行事件函数的元素；也可以显式的指明参数

.需要等页面加载完成 onload 后才能获取元素

.不方便传递参数

[] onXXX 事件 - 默认形参 this 和事件对象 e

let el = document.querySelector('div')
el.onclick = function () {
    console.log(this);
}

let el = document.querySelector('div')
el.onclick = function (e) {
    console.log(e);
    console.log(this);
}

如果使用箭头函数，则 this 指向为 window

事件对象为形参，可以使用任何合法标识符，通常使用 e 或 event

[] 换肤

#f40

#089

.同时指定多个带参事件

<div class="btns">
  <div onclick="changeColor('#f40');changeBg('bg1.jpg')">#f40</div>
  <div onclick="changeColor('#089');changeBg('bg2.jpg')">#089</div>
  <div onclick="changeColor('#890');changeBg('bg3.jpg')">#089</div>
</div>

  let btns = document.querySelector('.btns');
  // function changeColor(color) {
  //   btns.style.color = color;
  // }
  // function changeBg(bg) {
  //   btns.style.backgroundImage = `URL(../imgs/${bg})`;
  // }
  const changeColor = (color) => {
    btns.style.color = color;
  }
  const changeBg = (bg) => {
    btns.style.backgroundImage = `URL(../imgs/${bg})`;
  }