### JavaScript 监听 Input 输入框值的实时变化
#### 知识点概览
1. **事件绑定方式**：理解并应用多种事件绑定方法（原生 JavaScript、jQuery）。
2. **兼容性处理**：针对不同浏览器（如 IE）采用不同的事件绑定策略。
3. **事件类型**：掌握 `input` 和 `propertychange` 事件的区别及应用场景。
4. **事件对象**：了解事件对象的基本属性和方法。
5. **实际案例分析**：通过具体示例深入理解实现细节。
#### 事件绑定方法详解
##### 1. 使用 `oninput` 和 `onpropertychange` 属性
- **语法**：
```html
<input type="text" id="exampleInput" oninput="handleInputChange(event)" onpropertychange="handleInputChange(event)">
```
- **说明**：
- `oninput` 事件：当输入框内容发生变化时触发，适用于现代浏览器。
- `onpropertychange` 事件：专为 Internet Explorer 设计，当输入框中的值发生改变时触发。
- **注意**：
- 在非 IE 浏览器中，`onpropertychange` 不会被触发。
- 需要注意事件处理函数中对 `event` 参数的使用。
##### 2. 使用原生 JavaScript 添加事件监听器
- **条件判断**：根据浏览器类型选择合适的事件绑定方式。
```javascript
if (/*@cc_on!@*/false) { // 检测是否为 IE 浏览器
document.getElementById('exampleInput').attachEvent('onpropertychange', handleInputChange);
} else {
document.getElementById('exampleInput').addEventListener('input', handleInputChange);
}
```
- **说明**：
- `attachEvent` 方法：用于 Internet Explorer，将事件处理程序附加到指定的 DOM 元素上。
- `addEventListener` 方法：标准事件绑定方法，广泛应用于非 IE 浏览器。
- **注意**：
- IE 中使用 `attachEvent`，其他浏览器使用 `addEventListener`。
- `handleInputChange` 函数需定义好。
##### 3. 使用 jQuery 绑定事件
- **语法**：
```javascript
$('#exampleInput').on('input propertychange', handleInputChange);
```
- **说明**：
- `on` 方法：jQuery 中用来绑定事件的统一方法，可同时监听多个事件。
- **优点**：
- 代码简洁。
- 自动处理浏览器兼容性问题。
- **注意**：
- 需确保页面已加载 jQuery 库。
- 如果页面中存在多个相同的 ID，可能引发错误。
#### 实际案例分析
##### 示例一：基本监听
- **HTML 结构**：
```html
<input type="text" id="exampleInput">
```
- **JavaScript 处理**：
```javascript
function handleInputChange(e) {
console.log('Input value changed:', e.target.value);
}
if (/*@cc_on!@*/false) {
document.getElementById('exampleInput').attachEvent('onpropertychange', handleInputChange);
} else {
document.getElementById('exampleInput').addEventListener('input', handleInputChange);
}
```
- **功能描述**：每当输入框中的文本发生变化时，控制台输出当前输入的值。
##### 示例二：手机号码格式化与验证
- **HTML 结构**：
```html
<input type="text" id="phoneInput">
```
- **JavaScript 处理**：
```javascript
function phonePropertyChange() {
var input = $(this);
var value = input.val().replace(/\D/g, ''); // 移除非数字字符
// 格式化手机号码
var formattedValue = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
input.val(formattedValue);
// 验证手机号码格式
if (value.length === 11 && /^1[3|4|5|7|8]\d{9}$/.test(value)) {
input.css('color', '#000');
$('#btnSendCode').addClass('c-26a949');
input.blur();
} else {
layer.open({
content: '手机号码不正确，请重新输入',
time: 2,
end: function () {
input.val('');
}
});
}
}
// 初始化事件绑定
$('#phoneInput').on('input propertychange', phonePropertyChange);
```
- **功能描述**：
- 实现手机号码的实时格式化（分组显示）。
- 验证手机号码格式，并给出相应的提示。
#### 总结
通过上述几种方法，我们可以有效地实现在输入框值发生变化时的实时监听。需要注意的是，在实际开发中应考虑到不同浏览器之间的兼容性问题，并根据项目需求选择最适合的事件绑定方式。此外，合理利用事件对象可以帮助我们获取更多关于用户操作的信息，从而实现更复杂的功能逻辑。
