<think>我们正在讨论
jQuery中onchange
事件处理函数内如何获取正确的this
根据引用[1]和引用[2]中的示例，我们可以知道：
在
jQuery事件处理函数中，this通常指向触发
事件的DOM元素。
引用[1]中：$(this).on("click", ...) 然后在处理函数中使用了
event.data，但this的指向没有直接说明，但根据
jQuery事件处理机制，this指向绑定
事件的元素。
引用[2]中：$("input").change(onChange); 在onChange函数
内部，使用了$(this).val()，这里的this指向触发change
事件的input元素。
因此，在
jQuery的change
事件处理函数中，this自然指向触发
事件的元素。
但是需要注意两种绑定方式：
1. 直接绑定：$("selector").change(function() { ... }); 或 $("selector").on('change', function() { ... });
2.
事件委托：$(document).on('change', 'selector', function() { ... });
在两种情况下，处理函数中的this都指向触发
事件的元素（即selector匹配的元素），而不是委托元素（如果是
事件委托，this指向的是selector匹配的元素，而不是document）。
所以，在onchange
事件处理函数中，可以直接使用this来获取触发
事件的控件。
示例代码：
直接绑定：
$('input[type="text"]').change(function() {
// 这里的this就是触发
事件的input元素
var value = $(this).val();
console.log(value);
});
事件委托（适用于动态添加的元素）：
$(document).on('change', 'input[type="text"]', function() {
// 这里的this同样是触发
事件的input元素
var value = $(this).val();
console.log(value);
});
引用[3]中提到了手动触发change
事件，但是遇到了问题。不过我们这里关注的是获取this，在手动触发时，处理函数中的this同样指向该元素。
因此，总结：在
jQuery的change
事件处理函数中，this就是触发
事件的DOM元素，我们可以直接使用它，如果需要
jQuery对象，则用$(this)包裹。
注意：不要使用箭头函数，因为箭头函数会改变this的指向。
例如，以下
写法是错误的（箭头函数会导致this指向外部上下文）：
$('input').change(() => {
// 这里this不是指向input元素
console.log(this); // 可能是window或其他
});
应该使用普通函数：
$('input').change(function() {
console.log(this); // 指向input元素
});
所以，在
事件处理函数中，要获取触发
事件的控件，直接使用this即可，或者用$(this)来使用
jQuery方法。
引用[2]中的示例也明确展示了这一点：在onChange函数中，使用$(this).val()获取当前输入框的值。
因此，针对用户的问题：在
jQuery onchange
事件处理函数中如何获取正确的this？
答案就是：在
事件处理函数中，this就是触发
事件的元素，可以直接使用。
同时，我们也可以使用
event对象中的target属性，但在change
事件中，
event.target和this是同一个元素（除非
事件委托中
事件冒泡过程中被其他元素捕获，但change
事件通常不会冒泡到其他元素上被处理，因为
事件处理函数是绑定在目标元素上的，或者
事件委托中指定的选择器匹配的元素）。在
事件委托中，如果
事件处理函数绑定在父元素上，那么
event.target是实际触发
事件的子元素，而this在
jQuery事件委托中也是指向实际触发
事件的子元素（即选择器匹配的元素）。
所以，在
事件处理函数中，this和
event.target在大多数情况下是相同的，但要注意
event.target可能是触发
事件的元素
内部的子元素（比如点击
事件中可能点击到子元素），但对于change
事件，通常发生在表单元素上，且
事件目标就是表单元素本身，所以一般不会出现不一致。
因此，我们推荐使用this，因为它更直接，并且
jQuery已经为我们处理好了。
根据上述分析，我们可以这样回答用户：</think>在
jQuery 的 `change`
事件处理函数中，获取触发
事件的控件非常直接可靠。以下是关键方法和最佳实践：
### 正确获取触发控件的两种方式
1. **使用 `this` 关键字（推荐）**
在
事件处理函数中，`this` 直接指向触发
事件的 DOM 元素：
```javascript
$("select").change(function() {
// this 指向触发
事件的 select 元素
const $element = $(this); // 转换为
jQuery 对象
console.log("触发元素 ID:", $element.attr("id"));
console.log("当前值:", $element.val());
});
```
- **优点**：简洁可靠，直接绑定
事件时使用[^2]
2. **使用 `
event.target`（
事件委托场景）**
当使用
事件委托时（如动态添加元素），`
event.target` 指向实际触发源：
```javascript
$(document).on("change", ".dynamic-input", function(
event) {
//
event.target 是实际触发元素
const $target = $(
event.target);
console.log("值变化:", $target.val());
});
```
### 关键注意事项
1. **禁止使用箭头函数**
箭头函数会改变 `this` 的指向，导致错误：
```javascript
// ❌ 错误示例（this 指向错误）
$("input").change(() => {
console.log(this); // 指向 window 而非 input 元素
});
// ✅ 正确
写法
$("input").change(function() {
console.log(this); // 正确指向 input 元素
});
```
2. **动态元素的
事件绑定**
对动态添加的元素必须使用
事件委托：
```javascript
// ✅ 动态元素正确绑定
$("#container").on("change", ".new-field", function() {
console.log("动态元素值:", $(this).val());
});
```
3. **手动触发
事件时获取元素**
手动触发时 `this` 仍指向目标元素：
```javascript
$("#myInput").val("新值").
trigger("change");
$("#myInput").change(function() {
console.log("手动触发元素:", this.id); // 输出 myInput
});
```
### 完整示例
```html
<input type="text" id="username" placeholder="输入用户名">
<div id="result"></div>
<script>
$("#username").change(function() {
// 缓存元素引用（最佳实践）
const $input = $(this);
// 获取值和元素属性
const value = $input.val();
const id = $input.attr("id");
$("#result").html(`元素 <b>${id}</b> 的值变为: ${value}`);
});
</script>
```
### 总结对比表
| 方法 | 适用场景 | 获取方式 | 注意事项 |
|------|----------|----------|----------|
| `this` | 直接绑定
事件 | `$(this)` | 禁止箭头函数 |
| `
event.target` |
事件委托 | `$(
event.target)` | 确保精确选择器 |
| 手动触发 | 编程触发
事件 | `$(this)` | 需先绑定
事件处理 |
> **最佳实践**：始终在函数开头缓存元素引用
> ```javascript
> $("select").change(function() {
> const $el = $(this); // 缓存元素
> // 后续操作使用 $el...
> });
> ```
[^1]:
事件处理函数中可通过 `this` 访问触发元素
[^2]: 直接绑定
事件时优先使用 `$(this)` 获取元素
[^3]: 手动触发
事件时处理函数中的 `this` 仍有效
本文探讨了在JQuery Mobile框架中如何绑定和触发自定义事件。通过对比传统的JQuery事件绑定方法，介绍了两种不同的触发自定义事件的方式，并提供了具体的代码示例。
扫一扫
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
