说明

关于事件的解释，详见 链接

常用事件

• on() 向元素添加事件处理程序
• off() 移除通过 on() 方法添加的事件处理程序
• bind() 向元素添加事件处理程序

事件对象

详见 链接

• event.currentTarget 在事件冒泡阶段内的当前 DOM 元素
• event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据
• event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素
• event.isDefaultPrevented() 返回指定的 event 对象上是否调用了 event.preventDefault()
• event.isImmediatePropagationStopped() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
• event.isPropagationStopped() 返回指定的 event 对象上是否调用了 event.stopPropagation()
• event.namespace 返回当事件被触发时指定的命名空间
• event.pageX 返回相对于文档左边缘的鼠标位置
• event.pageY 返回相对于文档上边缘的鼠标位置
• event.preventDefault() 阻止事件的默认行为
• event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
• event.result 包含由被指定事件触发的事件处理程序返回的最后一个值
• event.stopImmediatePropagation() 阻止其他事件处理程序被调用
• event.stopPropagation() 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
• event.target 返回哪个 DOM 元素触发事件
• event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
• event.type 返回哪种事件类型被触发

on用法绑定事件

$(selector).on(event,childSelector,data,function)

参数：

• event 必需。规定要从被选元素添加的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。

  • click：点击事件
  • focusin
  • focusout
  • load
  • resize
  • scroll
  • unload
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout
  • mouseenter
  • mouseleave
  • change
  • select
  • submit
  • keydown
  • keypress
  • keyup
  • contextmenu

• childSelector 可选。$(selector) 的子元素

• data 可选。规定传递到函数的额外数据。
• function 可选。规定当事件发生时运行的函数。

例子

$("#deptTable").on("click","button[data-type='modify']",{},function (e) {
    let $btn = $(e.target)
    let dataId = $btn.attr("data-id")
    location.href="dept_show.html?id="+dataId
})

例子2

给 ul 的子元素 li 绑定 click 事件

$("ul").on("click","li",function(){

})

on事件的简化写法

使用 on() 绑定事件的写法比较繁琐，jQuery提供 常用的事件 的简化写法

简化写法的事件有，详见 菜鸟教程：

• blur() 添加/触发失去焦点事件
• change() 添加/触发 change 事件
• click() 添加/触发 点击 事件
• dblclick() 添加/触发 双击 事件
• focus() 添加/触发 focus 事件
• focusin() 添加事件处理程序到 获取焦点 事件
• focusout() 添加事件处理程序到 失去焦点 事件
• hover() 添加两个事件处理程序到 hover 事件
• ready() 规定当 DOM 完全加载时要执行的函数
• resize() 添加/触发 resize 事件
• scroll() 添加/触发 scroll 事件
• select() 添加/触发 select 事件

键盘事件：

• keydown() 添加/触发 键盘按下 事件
• keypress() 添加/触发 键盘按下弹起 事件
• keyup() 添加/触发 键盘弹起 事件

鼠标事件：

• mouseenter() 添加/触发 鼠标移入 事件
• mouseleave() 添加/触发 鼠标移出 事件
• mousedown() 添加/触发 鼠标按下 事件
• mousemove() 添加/触发 鼠标移动 事件
• mouseup() 添加/触发 mouseup 事件
• contextmenu() 添加事件处理程序到 contextmenu 事件

click事件（推荐）

$(selector).click(data,function)

参数：

• data 可选。规定传递到函数的数据。
• function 当事件发生时运行的函数。

例子

html：

<button id="btn">测试</button>

js：

<script>
    $("#btn").click(function () {
        console.log('123')
    })
</script>

传递参数给事件函数

应用场景：多个按钮绑定同一个事件函数，用于区分各个按钮

<button id="btn">测试</button>
<button id="btn2">测试2</button>

<script>
    // 事件函数。形参e，是jquery对象
    function fun(e) {
        console.log(e.data) // e.data就是传递的数据
    }
    // 应用场景：多个按钮绑定同一个事件函数，用于区分各个按钮
    // 第一个参数：传递到事件函数的参数
    $("#btn").click('1',fun)
    $("#btn2").click('2',fun)
</script>

参考：：
https://www.runoob.com/jquery/event-on.html
https://www.runoob.com/jquery/jquery-ref-events.html