事件是浏览器或用户在页面上发生的交互动作,比如点击、鼠标移动、键盘输入等。事件通常由浏览器触发,也可以由用户的交互引起,在 JavaScript 中,可以使用事件监听器(event listener)捕捉和响应特定的事件。事件是方法的一部分。
事件分类 | 事件名称 | 事件描述 |
---|---|---|
鼠标事件 | ||
click | 鼠标单击触发 | |
dblclick | 鼠标双击触发 | |
mouseenter | 鼠标指针进入元素触发 | |
mouseleave | 鼠标指针离开事件触发 | |
hover | 鼠标进入和鼠标移开这两种交互动作触发 | |
mouseover | 鼠标进入元素或子元素时触发 | |
mouseout | 鼠标指针离开元素或子元素时触发 | |
mousemove | 鼠标移动事件时触发 | |
mouseup | 鼠标按键释时触发 | |
mousedown | 鼠标按下时触发 | |
event.which | 监视是哪个键触发键盘和鼠标事件 | |
event.pageY | 鼠标相对于页面的垂直坐标 | |
event.pageX | 鼠标相对于页面的水平坐标 | |
contextmenu | 鼠标右键时触发的上下文菜单事件方法 | |
键盘事件 | ||
keypress | 键盘按下事件 | |
keydown | 捕获键盘按键按下事件 | |
keyup | 键盘按键释放事件 | |
event.which | 监视是哪个键触发键盘和鼠标事件 | |
表单事件 | ||
submit | 处理表单提交事件 | |
change | 元素值发生改变时触发的事件方法 | |
focus | 元素得到焦点触发事件 | |
focusin | 元素得到焦点(包含子元素)触发 | |
focusout | 元素(包含子元素)失去焦点触发 | |
blur | 元素失去焦点时触发 | |
select | 捕获输入框中选择文本事件 | |
文档/窗口事件 | ||
load | 元素加载完成事件 | |
resize | 捕获浏览器窗口大小改变事件 | |
scroll | 捕获元素滚动事件 | |
ready | 文档加载后执行的代码事件 | |
holdReady | 暂停或恢复被请求的ready事件 | |
其他事件 | ||
on | 绑定事件 | |
trigger | 手动触发已绑定事件 | |
triggerHandler | 手动触发已绑定事件(不触发默认行为) | |
bind | 绑定事件(使用on事件代替) | |
delegate | 绑定事件(使用on事件代替) | |
live | 绑定事件(使用on事件代替) | |
off | 移除元素绑定事件 | |
unbind | 移除元素绑定事件(使用off事件代替) | |
undelegate | 移除元素绑定事件(使用off事件代替) | |
die | 移除元素绑定事件(使用off事件代替) | |
error | 处理JavaScript错误方法 | |
proxy | 向上下文对象元素添加事件 | |
one | 为元素注册每一个事件处理程序事件 | |
event.currentTarget | 当前事件的DOM元素 | |
event.data | 数据对象传递给事件 | |
event.delegateTarget | 事件委托中目标元素的信息 | |
event.target | 触发事件的DOM元素 | |
event.isDefaultPrevented | 判断是否已阻止默认行为 | |
event.preventDefault | 阻止事件的默认行为 | |
event.stopImmediatePropagation | 阻止剩余的事件处理函数 | |
是否调用过阻止剩余的事件处理函数方法 | ||
event.stopPropagation | 防止事件冒泡 | |
event.isPropagationStopped | 判断是否调用过event.stopPropagation方法 | |
event.metaKey | 事件触发时Meta键是否按下 | |
event.namespace | 给事件添加命名空间 | |
event.relatedTarge | 上一个元素或父元素目标 | |
event.result | 获取自定义事件前一个返回值 | |
event.timeStamp | 返回事件触发的毫秒数 | |
event.type | 事件的具体类型 |
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("#myButton").click()
<button id="myButton">点击我</button> <script> $(document).ready(function() { $("#myButton").click(function() { alert("你点击了按钮!"); }); }); </script>
上面的例子将触发 id="myButton" 的 button 元素的 click 事件。
绑定实例:
下面案例在页面加载后执行指定代码
<script> $(document).ready(function() { // 这里添加在页面加载完成后要执行的代码 alert("页面加载完成"); }); </script>