前端学习JQuery篇02——基本语法（事件）

时间 2019-11-18

原文原文链接

页面载入

ready(fn)javascript

事件处理

on(eve,[sel],[data],fn) 1.7+	在选择元素上绑定一个或多个事件的事件处理函数。	$("p").on("click", function(){ alert( $(this).text() ); });html
off(eve,[sel],[fn])1.7+	在选择元素上移除一个或多个事件的事件处理函数。
bind(type,[data],fn)3.0-	为每一个匹配元素的特定事件绑定事件处理函数。jQuery 3.0中已弃用此方法，请用 on()代替。
one(type,[data],fn)	为每个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
trigger(type,[data])	在每个匹配的元素上触发某类事件。（自动触发，经常使用于传递参数，data为对象类型）
triggerHandler(type, [data])	与trigger相似，区别在表格以后
unbind(t,[d\|f])3.0-	bind()的反向操做，从每个匹配的元素中删除绑定的事件。jQuery 3.0中已弃用此方法，请用 off()代替。

trigger和triggerHandler的区别

* 第一，他不会触发浏览器默认事件。java

* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。jquery

* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，若是最开始的jQuery对象集合为空，则这个方法返回 undefined 。chrome

事件委托

1. live(type,[data],fn) 1.7-

概述
jQuery 给全部匹配的元素附加一个事件处理函数，即便这个元素是之后再添加进来的也有效。浏览器

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而之后再添加的元素则不会有。为此须要再使用一次 .bind() 才行。好比说闭包

<body>
<div class="clickme">Click here</div>
</body>

能够给这个元素绑定一个简单的click事件：app

$('.clickme').bind('click', function() {
alert("Bound handler called.");
});

当点击了元素，就会弹出一个警告框。而后，想象一下这以后有另外一个元素添加进来了。函数

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也可以匹配选择器 ".clickme" ，可是因为这个元素是在调用 .bind() 以后添加的，因此点击这个元素不会有任何效果。测试

.live() 就提供了对应这种状况的方法。若是咱们是这样绑定click事件的：

$('.clickme').live('click', function() {
alert("Live handler called."); 
});

而后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

而后再点击新增的元素，他依然可以触发事件处理函数。

事件委托

.live() 方法能对一个尚未添加进DOM的元素有效，是因为使用了事件委托：绑定在祖先元素上的事件处理函数能够对在后代上触发的事件做出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他做为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在咱们的例子中，当点击新的元素后，会依次发生下列步骤：

生成一个click事件传递给来处理
因为没有事件处理函数直接绑定在 <divgt; 上，因此事件冒泡到DOM树上
事件不断冒泡一直到DOM树的根节点，默认状况下上面绑定了这个特殊的事件处理函数。
执行由 .live() 绑定的特殊的 click 事件处理函数。
这个事件处理函数首先检测事件对象的 target 来肯定是否是须要继续。这个测试是经过检测 $(event.target).closest('.clickme') 可否找到匹配的元素来实现的。
若是找到了匹配的元素，那么调用原始的事件处理函数。
因为只有在事件发生时才会在上面的第五步里作测试，所以在任什么时候候添加的元素都可以响应这个事件。

附加说明

.live() 虽然颇有用，但因为其特殊的实现方式，因此不能简单的在任何状况下替换 .bind()。主要的不一样有：

在jQuery 1.4中，.live()方法支持自定义事件，也支持全部的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合适，而且能够冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定义事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live() 并不彻底支持经过DOM遍历的方法找到的元素。取而代之的是，应当老是在一个选择器后面直接使用 .live() 方法，正如前面例子里提到的。
当一个事件处理函数用 .live() 绑定后，要中止执行其余的事件处理函数，那么这个函数必须返回 false。仅仅调用 .stopPropagation() 没法实现这个目的。
参考 .bind() 方法能够得到更多关于事件绑定的信息。

在jQuery 1.4.1 中，.live() 能接受多个，用空间分隔事件，在提供相似.bind()的功能。例如，咱们能够“live ” 同时绑定mouseover和mouseout事件,像这样：

$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});

在jQuery 1.4.3中:你能够绑定一个或多个事件类型的字符串和函数的数据映射来执行他们

$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});

在jQuery 1.4 中，data参数能够用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包致使的问题。能够参考 .bind() 的讨论来得到更多信息。

在jQuery 1.4 中， live事件能够绑定到“context”DOM元素，而不是默认的文档的根。要设置此背景下，咱们经过在一个单一的DOM元素(而不是一个jQuery集合或选择器)使用jQuery() function's second argument。

$('div.clickme', $('#container')[0]).live('click', function() {
// Live handler called.
});

从 jQuery 1.7 开始，再也不建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户，应该优先使用 .delegate() 来替代 .live()。

2. die(type,[fn]) 1.7-

从元素中删除先前用.live()绑定的全部事件.(此方法与live正好彻底相反。)

若是不带参数，则全部绑定的live事件都会被移除。
你能够解除用live注册的自定义事件。
若是提供了type参数，那么会移除对应的live事件。
若是也指定了第二个参数function,则只移出指定的事件处理函数。

从 jQuery 1.7 开始，再也不建议使用 .die() (以及它的互补方法 .live())。请使用 .off() 来代替，用于移除经过 .on() 绑定的事件处理。

3.delegate(s,[t],[d],fn) 3.0-

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。（与live()等价）

jQuery 3.0中已弃用此方法，请用 on()代替。

使用 delegate() 方法的事件处理程序适用于当前或将来的元素（好比由脚本建立的新元素）。

4.undelegate([s,[t],fn]) 3.0-

删除由 delegate() 方法添加的一个或多个事件处理程序。

jQuery 3.0中已弃用此方法，请用 off()代替。

事件切换

1.hover([over,]out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

2.toggle([spe],[eas],[fn])1.9*　

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

参数
fn,fn2,[fn3,fn4,...]Function,....V1.0 Removed 1.9

fn:第一数次点击时要执行的函数。
fn2:第二数次点击时要执行的函数。
fn3,fn4,...:更屡次点击时要执行的函数。

[speed] [,fn]String,FunctionV1.0

speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
fn:在动画完成时执行的函数，每一个元素执行一次。

[speed], [easing ], [fn ]String,String,FunctionV1.4.3

speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每一个元素执行一次。

switchBooleanV1.3

用于肯定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素

1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate（迁移）插件能够恢复此功能。

事件

blur([[data],fn])	当元素失去焦点时触发 blur 事件。
change([[data],fn])	当元素的值发生改变时，会发生 change 事件。
click([[data],fn])	触发每个匹配元素的click事件。
dblclick([[data],fn])	当双击元素时，会发生 dblclick 事件。
error([[data],fn]) 1.8-	当元素遇到错误（没有正确载入）时，发生 error 事件。
focus([[data],fn])	当元素得到焦点时，触发 focus 事件。
focusin([data],fn)	当元素得到焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，他能够在父元素上检测子元素获取焦点的状况。
focusout([data],fn)	当元素失去焦点时触发 focusout 事件。focusin事件跟focus事件区别在于，他能够在父元素上检测子元素获取焦点的状况。
keydown([[data],fn])	当键盘或按钮被按下时，发生 keydown 事件。注释：若是在文档元素上进行设置，则不管元素是否得到焦点，该事件都会发生。
keypress([[data],fn])	当键盘或按钮被按下时，发生 keypress 事件。与 keydown 事件不一样，每插入一个字符，就会发生 keypress 事件。
keyup([[data],fn])	当按钮被松开时，发生 keyup 事件。它发生在当前得到焦点的元素上。
mousedown([[data],fn])	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不一样，mousedown 事件仅须要按键被按下，而不须要松开便可发生。
mouseenter([[data],fn])	当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一块儿使用。
mouseleave([[data],fn])	当鼠标指针离开元素时，会发生 mouseleave 事件。
mousemove([[data],fn])	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout([[data],fn])	当鼠标指针从元素上移开时，发生 mouseout 事件。与 mouseleave 事件不一样，不论鼠标指针离开被选元素仍是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
mouseover([[data],fn])	当鼠标指针位于元素上方时，会发生 mouseover 事件。与 mouseenter 事件不一样，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseup([[data],fn])	当在元素上放松鼠标按钮时，会发生 mouseup 事件。
resize([[data],fn])	当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn])	当用户滚动指定的元素时，会发生 scroll 事件。
select([[data],fn])	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit([[data],fn])	当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
unload([[data],fn]) 1.8-	在当用户离开页面时，会发生 unload 事件。

focusin 与 focusout的浏览器支持

几乎全部的浏览器都支持focus和blur事件，但对于focusin和focusout 就不是这样理想了。Firefox中不支持focusin和focusout事件；chrome和safari中只有经过addEventListener方式绑定事件才能正常使用，其余方式绑定都不行；
面对这样的浏览器支持彷佛很头痛，庆幸的是jQuery对focusin和focusout作了兼容，使用$.focusin和$.focusout实现事件绑定，在全部浏览器中都支持；

keydown([[data],fn])参数
fn Function V1.0

在每个匹配元素的keydown事件中绑定的处理函数。

[data],fn String,Function V1.4.3

data:keydown([Data], fn) 可传入data供函数fn处理。
fn:在每个匹配元素的keydown事件中绑定的处理函数

keydown和keypress，keyup的区别

keydown：用户在键盘上按下某按键是发生。一直按着某按键则会不断触发（opera浏览器除外）。
keypress：用户按下一个按键，并产生一个字符时发生（也就是无论相似shift、alt、ctrl之类的键，就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发）。一直按着某按键则会不断触发。
keyup：用户释放某一个按键是触发。

mouseleave([[data],fn])，mousemove([[data],fn])，mouseout([[data],fn])，mouseover([[data],fn])的区别

unload([[data],fn]) 1.8- 事件触发

点击某个离开页面的连接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
从新加载页面