事件处理（Event）

// 绑定点击事件
$('#btn').click(function() {
    alert('点击了！')
})

// 双击
$('#item').dblclick(function() {
    console.log('双击了')
})

// keydown（按下）
$('#input').keydown(function(e) {
    console.log('按下的键:', e.key, '键码:', e.keyCode)
    if (e.keyCode === 13) {  // 回车键
        console.log('回车键')
    }
})

// keyup（释放）
$('#input').keyup(function(e) {
    // 常用于实时搜索
    var keyword = $(this).val()
    if (keyword) {
        search(keyword)
    }
})

// keypress（输入字符）
$('#input').keypress(function(e) {
    console.log(String.fromCharCode(e.charCode))  // 获取输入的字符
})

$('#box')
  .mouseenter(function() {
      $(this).addClass('hover')
  })
  .mouseleave(function() {
      $(this).removeClass('hover')
  })
  .mousedown(function() {
      console.log('按下')
  })
  .mouseup(function() {
      console.log('释放')
  })

// 提交表单
$('form').submit(function(e) {
    e.preventDefault()  // 阻止默认提交
    var data = $(this).serialize()  // 序列化表单
    console.log(data)
})

// 输入框变化
$('#input').change(function() {
    console.log('值改变了')
})

// 实时输入（每敲一个键都触发）
$('#input').input(function() {
    console.log('当前值:', $(this).val())
})

// 获得/失去焦点
$('#input').focus(function() {
    $(this).addClass('focused')
})
$('#input').blur(function() {
    $(this).removeClass('focused')
})

// ❌ 问题：动态添加的元素不会绑定事件
$('li').click(function() { /* 不会对新增的 li 生效 */ })
$('#add-btn').click(function() {
    $('#list').append('<li>新项目</li>')  // 新 li 没有 click 事件
})

// ✅ 解决：使用事件委托
$('#list').on('click', 'li', function() {
    // 这里的函数对 #list 内所有 li（包括后来添加的）都生效
    console.log('点击了:', $(this).text())
})

$('a').click(function(e) {
    e.preventDefault()      // 阻止默认行为（如链接跳转）
    e.stopPropagation()     // 阻止事件冒泡（不会传给父元素）
    e.stopImmediatePropagation()  // 阻止其他同类型事件也执行

    console.log('链接点击被拦截')
})

$('#input').keydown(function(e) {
    // e 是事件对象
    console.log(e.type)          // 事件类型: "keydown"
    console.log(e.target)        // 触发事件的元素
    console.log(e.currentTarget) // 当前绑定事件的元素
    console.log(e.key)           // 按键名称（现代浏览器）
    console.log(e.keyCode)       // 键码（传统）
    console.log(e.which)         // jQuery 封装的通用键码
    console.log(e.pageX, e.pageY) // 鼠标坐标（鼠标事件）
})

// 只触发一次
$('#btn').one('click', function() {
    alert('只显示一次')
    // 之后再点不会触发
})

$('#username').blur(function() {
    var val = $(this).val()
    if (val.length < 3) {
        $(this).next('.error').text('用户名至少3个字符').show()
    } else {
        $(this).next('.error').hide()
    }
})

$('#form').submit(function(e) {
    e.preventDefault()
    if (validate()) {
        this.submit()
    }
})

$(document).keydown(function(e) {
    // Ctrl + S 保存
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault()
        save()
    }
    // ESC 关闭弹窗
    if (e.key === 'Escape') {
        closeModal()
    }
})

var $drag = $('#drag-box')
var isDragging = false
var offsetX, offsetY

$drag.mousedown(function(e) {
    isDragging = true
    offsetX = e.pageX - $drag.offset().left
    offsetY = e.pageY - $drag.offset().top
    $('body').css('cursor', 'grabbing')
})

$(document).mousemove(function(e) {
    if (isDragging) {
        $drag.css({
            left: e.pageX - offsetX,
            top: e.pageY - offsetY
        })
    }
}).mouseup(function() {
    isDragging = false
    $('body').css('cursor', 'default')
})

$('#todo-form').submit(function(e) {
    e.preventDefault()
    addTodo($('#todo-input').val())
})

// 使用事件委托处理动态添加的任务
$('#todo-list').on('click', '.todo-item', function() {
    $(this).toggleClass('completed')
})

$('#todo-list').on('click', '.delete-btn', function(e) {
    e.stopPropagation()  // 阻止冒泡，不触发 toggle
    $(this).closest('.todo-item').remove()
})