JQuery教程:绑定事件 作者:马育民 • 2022-09-14 10:44 • 阅读:10057 # 说明 关于事件的解释,详见 [链接](https://www.malaoshi.top/show_1IX1HrZV1dq2.html "链接") ### 常用事件 - on() 向元素添加事件处理程序 - off() 移除通过 on() 方法添加的事件处理程序 - bind() 向元素添加事件处理程序 ### 事件对象 详见 [链接](https://www.malaoshi.top/show_1IX33PW25zMb.html "链接") - 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提供 **常用的事件** 的简化写法 简化写法的事件有,详见 [菜鸟教程](https://www.runoob.com/jquery/jquery-ref-events.html "菜鸟教程"): - 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: ``` 测试 ``` js: ``` ``` ### 传递参数给事件函数 应用场景:多个按钮绑定同一个事件函数,用于区分各个按钮 ``` 测试 测试2 ``` ``` ``` 参考:: https://www.runoob.com/jquery/event-on.html https://www.runoob.com/jquery/jquery-ref-events.html 原文出处:http://malaoshi.top/show_1IX42t1NRCQ1.html