jQuery 中的事件

菜菜菜鸟日记 —jQuery 中的事件

一.事件绑定与移除
1.绑定事件

• 在 jQuery 中，如果需要为匹配的元素同时绑定一个或多个事件，可以使用bind()方法,但这种已经过时。
• 建议使用 On(type,[data],fn); 可以同时注册多个事件
  type： 事件类型，主要包扩 click、mouseover 等基础事件，还可以自定义
  [data] ：可选参数，作为 even.data 属性值传递给事件对象的额外数据对
  fn： 处理函数，用来绑定处理函数
  象，可选项

<script>
 $("#bu").on({
 mouseover:function () {
 $(this).wrap("<h1></h1>")
 },
 mouseout:function () {
 $(this).unwrap()
 }
 })
 </script>

• 第三种方法$(“div”).click(function(){}),此方法只能为当前元素绑定一个事件。
  $(“div”).click(function(){
  alert(123456);
  });
  2.移除事件
  当事件执行完了，需要把绑定的事件通过一定的方法取消。在 jQuery 中提供了
  移除事件的方法，同样可以移除单个或多个事件，可以使用 unbind()方法。
  语法：undind([type],[fn]);
• $().unbind(); //取消全部事件
• $().unbind(事件类型); //取消指定类型的事件
• $().unbind(事件类型，处理); //取消指定类型的指定处理事件
  注：当给某一元素绑定多个事件时，注意事件解绑操作

https://my.oschina.net/u/3045515/blog/1563668

二.基础事件
在 javaScript 中，常用的基础事件有鼠标事件、键盘事件、window 事件、表单事件。事件的绑定和处理函数的语法格式如下：
DOM 对象.事件名=函数
$("#demo").click()
//上面的例子将触发 id=“demo” 的 元素的 click 事件。
1.载入事件
在 jQuery 中，常用的 window 事件有文档载入事件，它对应的方法是
ready()。
2.鼠标事件
当用户在文档上移动或单击鼠标而产生的事件

常见鼠标事件

方法	功能
click()	鼠标单击时执行
mouseover()	鼠标移到时
mouseout()	鼠标移出时
mouseenter()	鼠标进入时
mouseover()	鼠标移到时
mouseleave()	鼠标离开时

3.键盘事件
键盘事件是指当用户每次按下或释放键盘上的按键时都会产生事件。常用的键盘事件有 keydown、keyup、keypress。

方法	功能
Keyup()	释放键盘时
Keydown()	按下键盘时
Keypress()	产生可打印的字符时

4.浏览器事件
在浏览网页时，大家经常会调整浏览器窗口的大小。这些都是通过 jQuery 中的
resize()方法触发 resize 事件，进而处理相关的函数，来完成页面的一些特
效。
语法： $(selector).resize();
三.复合事件
1.hover()方法
在 jQuery 中，hover()方法用于模拟鼠标移入和移出事件。当鼠标移入时，会触发指定的第一个函数（enter）;当鼠标移除这个函数时，会触发指定的第二个函数（leave）,该方法相当于 mouseenter 和 mouseleave 事件的组合。
语法：hover(enter,leave);
2.toggle()方法
在 jQuery 中，toggle()方法分为带参数和不带参数

• 带参数的方法：用于模拟鼠标连续 click 事件。第一次单击元素，触发指定的第一个函数，再次单击则触发指定的第二个函数，如果有更多函数，则依次触发，直到最后一个。随后的单击都重复对几个函数的轮番调用。
  语法：toggle(fn1,fn2……fnN);
• toggle()不带参数：与 show()和 hide()方法的作用一样，切换元素的可见状态。如果是可见的，则切换为隐藏状态；如果是隐藏的，则切换为可见状态。可用于子菜单栏点击收起/展开。
  语法： toggle();

四.常见事件方法
bind() 向匹配元素附加一个或更多事件处理器
blur() 触发、或将函数绑定到指定元素的 blur 事件
change() 触发、或将函数绑定到指定元素的 change 事
件
click() 触发、或将函数绑定到指定元素的 click 事件
dblclick() 触发、或将函数绑定到指定元素的 double
click 事件
delegate() 向匹配元素的当前或未来的子元素附加一个或
多个事件处理器
die()
移除所有通过 live() 函数添加的事件处理程
序。
error() 触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented() 返回 event 对象上是否调用了
event.preventDefault()。
event.pageX 相对于文档左边缘的鼠标位置。
event.pageY 相对于文档上边缘的鼠标位置。
event.preventDefault() 阻止事件的默认动作。
event.result 包含由被指定事件触发的事件处理器返回的最
后一个值。
event.target 触发该事件的 DOM 元素。
event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生
时的毫秒数。
event.type 描述事件的类型。
event.which 指示按了哪个键或按钮。
focus() 触发、或将函数绑定到指定元素的 focus 事件
keydown() 触发、或将函数绑定到指定元素的 key down
事件
keypress() 触发、或将函数绑定到指定元素的 key press
事件
keyup() 触发、或将函数绑定到指定元素的 key up 事
件
live() 为当前或未来的匹配元素添加一个或多个事件
处理器
load() 触发、或将函数绑定到指定元素的 load 事件
mousedown() 触发、或将函数绑定到指定元素的 mouse down
事件
mouseenter() 触发、或将函数绑定到指定元素的 mouse
enter 事件
mouseleave() 触发、或将函数绑定到指定元素的 mouse
leave 事件
mousemove() 触发、或将函数绑定到指定元素的 mouse move
事件
mouseout()
触发、或将函数绑定到指定元素的 mouse out
事件
mouseover() 触发、或将函数绑定到指定元素的 mouse over
事件
mouseup() 触发、或将函数绑定到指定元素的 mouse up
事件
one() 向匹配元素添加事件处理器。每个元素只能触
发一次该处理器。
ready() 文档就绪事件（当 HTML 文档就绪可用时）
resize() 触发、或将函数绑定到指定元素的 resize 事
件
scroll() 触发、或将函数绑定到指定元素的 scroll 事
件
select() 触发、或将函数绑定到指定元素的 select 事
件
submit() 触发、或将函数绑定到指定元素的 submit 事
件
toggle() 绑定两个或多个事件处理器函数，当发生轮流
的 click 事件时执行。
trigger() 所有匹配元素的指定事件
triggerHandler() 第一个被匹配元素的指定事件
unbind() 从匹配元素移除一个被添加的事件处理器
undelegate() 从匹配元素移除一个被添加的事件处理器，现
在或将来
unload() 触发、或将函数绑定到指定元素的 unload
事
件