jquery同一标签绑定多个事件的几种方式 && js实时监听input中值变化

本文介绍了如何使用jQuery在同一标签上绑定多个事件,以及JavaScript中利用oninput、onpropertychange和onchange监听input元素值的变化。特别是oninput事件,它在非IE浏览器中用于检测输入框内容的实时更新,而onpropertychange则是IE浏览器的特有事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jquery同一标签绑定多个事件的几种方式
①$(document).ready(function(){
    $("button").bind({
        click:function(){$("p").slideToggle()},
        mouseover:function(){$("body").css("background-color","red");},
        mouseout:function(){$("body").css("background-color","#fffffff")};
    });
});

②$(function(){
    $('#btn').bind("click",function(){
        $("#test").append("<p>我的绑定函数1</p>");
    }),bind("click",function(){
        $("#test").append("<p>我的绑定函数2</p>");
    }),bind("click",function(){
        $("#test").append("<p>我的绑定函数3</p>")
    });
});
③为元素一次性绑定多个事件类型
$(function(){
    $("div").bind("mouseover mouseout",function(){
        $(this).toggleClass("over");
    });
});
js实时监听input中值变化

 

 

 
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script> </head> <body> <h1 > 实时监测input中值的变化 </h1> <input type="text" id="username" autoComplete='off'> <div id="result"></div> </body> </html> 
$(function(){ $('#username').bind('input propertychange', function() { $('#result').html($(this).val().length + ' characters'); }); }) 

上述功能类似于,实现微博的‘还能输入xxx个字符’

oninput,onpropertychange,onchange的用法

onchange触发事件必须满足两个条件:

a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)

b)当前对象失去焦点(onblur);

onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的

oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

 

 

 

 

 

 


 

 

 

 

 

 

 

### 如何监听 el-date-picker 组件中 input 输入值的变化 `el-date-picker` 是 Element UI 中用于日期选择的一个重要组件。当需要监听其内部 `input` 的值变化时,可以通过多种方式实现。 #### 方法一:通过 `v-model` 和自定义逻辑监听 可以利用 Vue.js 的双向绑定特性来监控 `v-model` 所绑定的数据变量。每当用户更改输入中的值或者选择了新的日期时,该数据会自动更新并触发相应的事件。 ```javascript data() { return { value1: '' // 与 el-date-picker 绑定的模型 }; }, watch: { value1(newVal, oldVal) { console.log('Input Value Changed:', newVal); // 当值发生变化时执行的操作 } } ``` 这种方法适用于大多数场景,并且能够很好地配合 Vue 的响应式机制工作[^1]。 #### 方法二:使用原生 DOM 监听器 如果希望更深入地控制行为,则可以直接操作 DOM 来附加额外的功能。例如,在某些情况下可能需要阻止默认的行为或进一步验证用户的输入: ```javascript methods: { timeEditable() { this.$nextTick(() => { const inputs = document.querySelectorAll('.el-date-editor input'); for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener('input', function () { console.log('Direct Input Detected:', this.value); }); } }); } } ``` 需要注意的是这种方式可能会破坏架原有的封装性和一致性,因此应谨慎采用[^4]。 #### 方法三:借助内置事件回调函数 Element Plus 或者较新版本的 Element UI 提供了一些特定于日期选取过程中的钩子函数,比如 `@change`, `@blur` 等等。这些都可以用来间接达到监视目标的效果: ```html <el-date-picker v-model="value1" type="datetime" @change="handleChange"> </el-date-picker> ``` ```javascript methods:{ handleChange(value){ console.log(`Selected Date is ${value}`); } } ``` 此外还有其他类似的交互动作也可以被捕捉到,具体取决于实际项目里的需求设定[^3]。 --- ### 总结 综上所述,对于想要获取 `el-date-picker` 内部 input 动态改变情况的应用开发者来说,推荐优先考虑基于 Vue 数据驱动的设计思路即 **方法一**;而针对特殊定制化要求则可以选择结合 JavaScript 原始 API 实现更为灵活的结果——也就是所谓的 **方法二** 。当然也不要忽略官方文档里给出的各种实用接口选项哦!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值