// 用户点击按钮
button.onclick = function () {
  console.log('按钮被点击')
}

// 用户输入文字
input.oninput = function () {
  console.log('正在输入')
}

// 页面加载完成
window.onload = function () {
  console.log('页面加载完成')
}

<!-- 不推荐：HTML 和 JS 混合 -->
<button onclick="handleClick()">点击</button>

<script>
  function handleClick() {
    console.log('点击了')
  }
</script>

const button = document.getElementById('btn')

// 绑定事件
button.onclick = function () {
  console.log('点击了')
}

// 🔶 问题：只能绑定一个处理器
button.onclick = function () {
  console.log('新的处理器')
}
// 之前的处理器被覆盖

// 移除事件
button.onclick = null

const button = document.getElementById('btn')

// 基本用法
button.addEventListener('click', function () {
  console.log('处理器1')
})

button.addEventListener('click', function () {
  console.log('处理器2')
})
// 两个处理器都会执行

// 带配置项
button.addEventListener(
  'click',
  function () {
    console.log('点击')
  },
  {
    capture: false, // 是否在捕获阶段触发
    once: true, // 只执行一次
    passive: true, // 不会调用 preventDefault
  }
)

// 移除事件（需要相同的函数引用）
function handleClick() {
  console.log('点击')
}
button.addEventListener('click', handleClick)
button.removeEventListener('click', handleClick)

element.addEventListener('click', function (event) {
  // 事件类型
  console.log(event.type) // "click"

  // 触发事件的元素
  console.log(event.target) // 实际点击的元素

  // 绑定事件的元素
  console.log(event.currentTarget) // 绑定处理器的元素
  console.log(this) // 同上（非箭头函数）

  // 时间戳
  console.log(event.timeStamp)

  // 是否可取消
  console.log(event.cancelable)
})

element.addEventListener('click', function (event) {
  // 鼠标位置（相对于视口）
  console.log(event.clientX, event.clientY)

  // 鼠标位置（相对于页面）
  console.log(event.pageX, event.pageY)

  // 鼠标位置（相对于屏幕）
  console.log(event.screenX, event.screenY)

  // 鼠标位置（相对于目标元素）
  console.log(event.offsetX, event.offsetY)

  // 鼠标按键
  console.log(event.button) // 0左 1中 2右
  console.log(event.buttons) // 位掩码

  // ��饰键
  console.log(event.ctrlKey)
  console.log(event.shiftKey)
  console.log(event.altKey)
  console.log(event.metaKey) // Mac: Cmd, Win: Win键
})

input.addEventListener('keydown', function (event) {
  // 按键值
  console.log(event.key) // "Enter", "a", "ArrowUp"

  // 按键代码
  console.log(event.code) // "Enter", "KeyA", "ArrowUp"

  // 修饰键
  console.log(event.ctrlKey)
  console.log(event.shiftKey)
  console.log(event.altKey)
  console.log(event.metaKey)

  // 是否重复（长按）
  console.log(event.repeat)

  // 常见判断
  if (event.key === 'Enter') {
    console.log('按下回车')
  }

  if (event.ctrlKey && event.key === 's') {
    event.preventDefault()
    console.log('Ctrl+S 保存')
  }
})

// <div class="outer">
//   <div class="inner">
//     <button>点击</button>
//   </div>
// </div>

const outer = document.querySelector('.outer')
const inner = document.querySelector('.inner')
const button = document.querySelector('button')

// 捕获阶段监听（从外到内）
outer.addEventListener('click', () => console.log('outer 捕获'), true)
inner.addEventListener('click', () => console.log('inner 捕获'), true)
button.addEventListener('click', () => console.log('button 捕获'), true)

// 点击 button 时输出顺序：
// outer 捕获
// inner 捕获
// button 捕获

// 冒泡阶段监听（默认，从内到外）
outer.addEventListener('click', () => console.log('outer 冒泡'))
inner.addEventListener('click', () => console.log('inner 冒泡'))
button.addEventListener('click', () => console.log('button 冒泡'))

// 点击 button 时输出顺序：
// button 冒泡
// inner 冒泡
// outer 冒泡

// 同时监听捕获和冒泡
outer.addEventListener('click', () => console.log('outer 捕获'), true)
outer.addEventListener('click', () => console.log('outer 冒泡'))

// 点击 button 时输出顺序：
// outer 捕获
// inner 捕获
// button（目标阶段，按注册顺序）
// inner 冒泡
// outer 冒泡

// 阻止链接跳转
link.addEventListener('click', function (event) {
  event.preventDefault()
  console.log('不会跳转')
})

// 阻止表单提交
form.addEventListener('submit', function (event) {
  event.preventDefault()
  // 手动处理表单
})

// 阻止右键菜单
document.addEventListener('contextmenu', function (event) {
  event.preventDefault()
  // 显示自定义菜单
})

// 检查是否可以阻止
if (event.cancelable) {
  event.preventDefault()
}

inner.addEventListener('click', function (event) {
  event.stopPropagation()
  console.log('不会冒泡到 outer')
})

// 阻止同一元素的其他处理器
button.addEventListener('click', function (event) {
  event.stopImmediatePropagation()
  console.log('处理器1')
})

button.addEventListener('click', function (event) {
  console.log('处理器2') // 不会执行
})

element.addEventListener('click', handler) // 点击
element.addEventListener('dblclick', handler) // 双击
element.addEventListener('mousedown', handler) // 按下
element.addEventListener('mouseup', handler) // 释放
element.addEventListener('mousemove', handler) // 移动
element.addEventListener('mouseenter', handler) // 进入（不冒泡）
element.addEventListener('mouseleave', handler) // 离开（不冒泡）
element.addEventListener('mouseover', handler) // 进入（冒泡）
element.addEventListener('mouseout', handler) // 离开（冒泡）
element.addEventListener('contextmenu', handler) // 右键
element.addEventListener('wheel', handler) // 滚轮

element.addEventListener('keydown', handler) // 按下
element.addEventListener('keyup', handler) // 释放
element.addEventListener('keypress', handler) // 已废弃

input.addEventListener('input', handler) // 值改变（实时）
input.addEventListener('change', handler) // 值改变（失焦后）
input.addEventListener('focus', handler) // 获得焦点
input.addEventListener('blur', handler) // 失去焦点
form.addEventListener('submit', handler) // 提交
form.addEventListener('reset', handler) // 重置

window.addEventListener('load', handler) // 页面完全加载
window.addEventListener('DOMContentLoaded', handler) // DOM 加载完成
window.addEventListener('beforeunload', handler) // 页面即将卸载
window.addEventListener('unload', handler) // 页面卸载
window.addEventListener('resize', handler) // 窗口大小改变
window.addEventListener('scroll', handler) // 页面滚动

element.addEventListener('touchstart', handler) // 触摸开始
element.addEventListener('touchmove', handler) // 触摸移动
element.addEventListener('touchend', handler) // 触摸结束
element.addEventListener('touchcancel', handler) // 触摸取消

// 触摸事件对象
element.addEventListener('touchstart', function (event) {
  const touch = event.touches[0] // 第一个触摸点
  console.log(touch.clientX, touch.clientY)
})

// 创建自定义事件
const event = new CustomEvent('myEvent', {
  detail: { message: '自定义数据' },
  bubbles: true, // 是否冒泡
  cancelable: true, // 是否可取消
})

// 监听自定义事件
element.addEventListener('myEvent', function (event) {
  console.log(event.detail.message) // "自定义数据"
})

// 触发自定义事件
element.dispatchEvent(event)

// 简单的事件总线
class EventBus {
  constructor() {
    this.events = {}
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = []
    }
    this.events[event].push(callback)
  }

  off(event, callback) {
    if (!this.events[event]) return
    this.events[event] = this.events[event].filter((cb) => cb !== callback)
  }

  emit(event, data) {
    if (!this.events[event]) return
    this.events[event].forEach((callback) => callback(data))
  }
}

const bus = new EventBus()
bus.on('userLogin', (user) => console.log('用户登录:', user))
bus.emit('userLogin', { name: '张三' })

// 🔶 匿名函数无法移除
element.addEventListener('click', function () {})

// ✅ 具名函数可以移除
function handleClick() {}
element.addEventListener('click', handleClick)
element.removeEventListener('click', handleClick)

class Component {
  constructor(element) {
    this.element = element
    this.handleClick = this.handleClick.bind(this)
    this.element.addEventListener('click', this.handleClick)
  }

  handleClick() {
    console.log('点击')
  }

  // 提供销毁方法
  destroy() {
    this.element.removeEventListener('click', this.handleClick)
    this.element = null
  }
}

// 告诉浏览器不会调用 preventDefault
// 可以优化滚动性能
document.addEventListener('touchmove', handler, { passive: true })

// 如果需要阻止默认行为，不要用 passive
document.addEventListener(
  'touchmove',
  function (e) {
    e.preventDefault()
  },
  { passive: false }
)