猴子也能学会的jQuery第六期——jQuery事件（下）

​

​

📚系列文章—目录🔥

猴子也能学会的jQuery第一期——什么是jQuery

猴子也能学会的jQuery第二期——引入jQuery

猴子也能学会的jQuery第三期——使用jQuery

猴子也能学会的jQuery第四期——jQuery选择器大全

猴子也能学会的jQuery第五期——jQuery样式操作

猴子也能学会的jQuery第六期——jQuery事件（上）

猴子也能学会的jQuery第六期——jQuery事件（中）

猴子也能学会的jQuery第六期——jQuery事件（下）

猴子也能学会的jQuery第七期——jQuery动画（上）

猴子也能学会的jQuery第七期——jQuery动画（下）

猴子也能学会的jQuery第八期——jQuery属性操作

猴子也能学会的jQuery第九期——jQuery内容操作

猴子也能学会的jQuery第十期——jQuery元素操作（上）

猴子也能学会的jQuery第十期——jQuery元素操作（下）

猴子也能学会的jQuery第十一期——jQuery尺寸和位置操作

猴子也能学会的jQuery第十二期——jQuery遍历（上）

猴子也能学会的jQuery第十二期——jQuery遍历（中）

猴子也能学会的jQuery第十二期——jQuery遍历（下）

猴子也能学会的jQuery——参考手册

🔥未完待续...

---

文章目录

📚系列文章—目录🔥

📌回顾上期

🎯jQuery事件

🧩触发事件

1️⃣事件方法触发事件

2️⃣trigger()方法触发事件

3️⃣triggerHandler()方法触发事件

🧩事件对象

🧩补充：jQuery其他方法

🔗​$.extend()方法

🔗$.ajax()方法

---

📌回顾上期

上期讲了jQuery事件中事件委托

• 事件委派是指，把原本要给子元素绑定的事件，绑定到父元素上，这就表示把子元素的事件委派给父元素。由于事件有冒泡机制，当一个元素触发事件时，可以区分发生事件的是父元素还是子元素。

🎯jQuery事件

jQuery提供了一些事件操作的方法，如事件绑定、事件委托和事件解绑等等，可以方便用户在开发中进行事件处理。在触发事件时，可以获取到事件对象，通过事件对象来阻止默认事件行为，或者获取事件发生时的一些信息等。​

🧩触发事件

• 在jQuery中，触发事件有3种方式，第1种是调用事件方法；第2种是通过trigger()方法触发事件，第3种是通过triggerHandler()方法触发事件。

1️⃣事件方法触发事件

• jQuery中的事件方法在调用时如果传参数，表示绑定事件，如果不传参数，表示触发事件。以click()方法为例，示例代码如下。 ​上述代码中，第6行代码调用了click()方法，触发了单击事件。

2️⃣trigger()方法触发事件

• 使用trigger()方法可以触发指定事件，示例代码如下。 ​上述代码中，第6行代码调用了trigger ()方法，参数click表示单击事件。

3️⃣triggerHandler()方法触发事件

• 事件方法和trigger()方法在触发事件时，都会执行元素的默认行为，而triggerHandler()方法在触发事件时不会执行元素的默认行为。下面通过代码来演示。 在上述代码中，第3~5行为页面中的input元素绑定焦点事件，第6行代码触发焦点事件。代码执行后，会发现input文本框没有光标闪烁，但第2行代码也执行了，文本框中的值变为“你好吗”。而如果将第6行的triggerHandler()方法换成focus()方法或者trigger()方法，则看到文本框中有光标闪烁。像这个文本框中有光标闪烁的现象，就是元素获得焦点时会发生的默认行为。由此可见，triggerHandler()方法不会执行元素的默认行为。

🧩事件对象

• 当事件被触发时，就会有事件对象的产生，在事件处理函数中可以使用参数来接收事件对象。下面通过代码进行演示。 

  上述代码执行后，在浏览器的控制台中可以查看事件对象，如下图所示。

  在上图中，通过事件对象可以获取和事件相关的信息。如clientX（鼠标位置X坐标）、clientY（鼠标位置Y坐标）和 currentTarget（当前目标）等。 

• 下面通过代码演示如何利用事件对象阻止默认行为和事件冒泡，示例代码如下。上述代码执行后，单击页面中的超链接，会看到控制台依次输出“单击了a”和“单击了document”，说明当前发生了事件冒泡。但由于第7行代码阻止了<a>标签的默认行为，并没有发生超链接的页面跳转。​​

🧩补充：jQuery其他方法

jQuery还提供了一些其他方法，如$.extend()方法和$.ajax()方法

🔗​$.extend()方法

$.extend()方法用来实现对象成员的扩展，它可以将一个对象的成员拷贝给另一个对象使用，其基本语法如下。

$.extend([deep], target, object1, [objectN])

上述代码中，target是要拷贝的目标对象，后面可以跟多个对象（object1~objectN），object1表示待拷贝的第一个对象，objectN表示待拷贝的第N个对象。当不同对象中存在相同的成员名时，后面的对象的成员会覆盖前面的对象的成员。第1个参数deep是可选参数，如果设为true表示深拷贝，默认为false表示浅拷贝。

🔗$.ajax()方法

jQuery提供了$.ajax()方法，用来通过Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）技术请求服务器，获取服务器的响应结果。Ajax技术用来在浏览器中通过JavaScript向服务器发送请求，接收服务器返回的结果。

📚持续更新🔥