jquery绑定自定义事件
来源:互联网 发布:上海游泳教练知乎 编辑:程序博客网 时间:2024/05/21 10:42
jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的。
我们来假设一个这样的场景,一个textarea中的字数计算,如果是直接键盘输入或者粘贴进来的话,是可以使用input方法检测到,但是如果是通过js插入的文本,这个时候input事件就监测不到了,
这个时候如果我们事先给绑定一个myChange事件,它的回调函数就是来处理计算其中的文本字数的,我们在使用js给这个textarea赋值以后,连缀写上.trigger("myChange")就可以计算到。
下面的jquery自定义事件只是一个简单测试。有需要的朋友可以尝试着做些更实用的功能
<textarea id="textarea"></textarea>
<p><button type="button" id="btn1">jquery自定义事件-事件注册</button></p>
我们来假设一个这样的场景,一个textarea中的字数计算,如果是直接键盘输入或者粘贴进来的话,是可以使用input方法检测到,但是如果是通过js插入的文本,这个时候input事件就监测不到了,
这个时候如果我们事先给绑定一个myChange事件,它的回调函数就是来处理计算其中的文本字数的,我们在使用js给这个textarea赋值以后,连缀写上.trigger("myChange")就可以计算到。
下面的jquery自定义事件只是一个简单测试。有需要的朋友可以尝试着做些更实用的功能
<textarea id="textarea"></textarea>
<p><button type="button" id="btn1">jquery自定义事件-事件注册</button></p>
<p><button type="button" id="btn2">jquery自定义事件-测试触发</button></p>
<p style="margin-top: 100px;"><a href="http://www.51xuediannao.com/">懒人建站</a>http://www.51xuediannao.com/整理</p>
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script>
$btn1 = $("#btn1");
//jquery定义一个自定义事件 diyEvent 注意:回调函数中的第一个参数是事件,需要接受其他参数的话,在后面跟上其他参数即可 不太好表述,仔细对照“调用示例”能看明白
$btn1.on("diyEvent",function(event,a,b,fun){
console.log(a,b);
fun();
});
//jquery自定义事件触发示例, 注意: trigger传入的参数第一个是自定义的事件名,第二个参数是一个数组,数组中的项会和自定义事件中回调的参数项对应
$("#btn2").click(function(){
$btn1.trigger("diyEvent",["11","22",function(){alert("懒人建站")}])
})
//我们来测试一下 textarea 这个场景
var haHa = function(){
var test = function($el){
var len= $el.val().length;
console.log(len)
};
$("#textarea").on("input propertychange",function(){
test($(this));
}).on("myChange",function(){
test($(this));
});
};
haHa();
$btn1.click(function(){
$("#textarea").val("jquery的自定义事件通过on绑定trigger触发").trigger("myChange")
})
</script>
0 0
- jquery绑定自定义事件
- jQuery事件绑定,解绑,自定义事件
- jQuery自定义事件及其绑定执行
- jQuery获取绑定自定义事件的元素
- jQuery 绑定点击事件执行自定义函数
- jQuery——事件篇( 鼠标、表单、键盘、事件绑定和解绑、事件对象、自定义事件)
- JQuery 绑定变化事件
- jQuery 中的事件绑定
- jquery 绑定事件
- jquery 事件绑定
- Jquery控件绑定事件
- jQuery 特殊事件绑定
- jquery 绑定click事件
- jQuery的绑定事件
- jQuery事件绑定.on()
- JQuery事件绑定
- jquery绑定事件问题
- jquery绑定回车事件
- Flume-Kafka-Logstash-ElasticSearch-Kibana流程说明
- 属性声明在@implementation里与extension里的区别
- objective-c - 基础篇 - UIWebView
- ios 关于UIWebView控件的使用
- UIMenuController使用
- jquery绑定自定义事件
- 【PHP PDO】纯PHP(不使用框架)下 Mysql PDO 使用方法小记
- Java中ResourceBundle类的使用
- C#反射(取得方法、属性、变量)
- [nginx] 网上最全面nginx教程(近100篇文章整理)
- codeforces 670D1 - Magic Powder - 1
- 点击状态栏回到顶部
- iOS开发系列--UITableView全面解析
- 设计模式之抽象工厂模式(AbstructFactory)