jquery的自定义事件通过on绑定trigger触发
jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的。
我们来假设一个这样的场景,一个textarea中的字数计算,如果是直接键盘输入或者粘贴进来的话,是可以使用input方法检测到,但是如果是通过js插入的文本,这个时候input事件就监测不到了,
这个时候如果我们事先给绑定一个myChange事件,它的回调函数就是来处理计算其中的文本字数的,我们在使用js给这个textarea赋值以后,连缀写上.trigger("myChange")就可以计算到。
测试代码:
<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>
本文链接:jquery的自定义事件通过on绑定trigger触发http://www.51xuediannao.com/js/jquery/832.html
jquery的自定义事件通过on绑定trigger触发的更多相关文章
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...
- jQuery 的自定义事件
jQuery 中,想要自动触发自定义事件,必须满足2个条件: 1.事件必须是通过on 来绑定的. 2.事件必须是通过trigger / triggerHandler 来触发. 格式如下: $(fun ...
- jQuery的自定义事件——滚轮
这个案例类似于在地图上滚动滚轮,能缩小或者放大地图,分别用zoomIn和zoomOut来命名. 代码如下: //JS部分:<script src="jquery-1.10.2.min. ...
- jquery 的鼠标事件/淡入淡出/绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 使自定义事件支持多绑定 js
<script language="JavaScript" type="text/javascript"> <!-- //定义类class1 ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- trigger 和 triggerHandler(),自定义事件
trigger 和 triggerHandler(),自定义事件 语法: $(selector).trigger(event,[param1,param2,...]) 1,event 必需.规定指定元 ...
- 跟着《beginning jquery》学写slider插件并借助自定义事件改进它
<beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...
- Jquery精妙的自定义事件
对于jQuery自定义事件,很多JavaScript开发者都会有所疑惑:在日常开发过程中会不会用到呢?而本文将结合一个开发案例,其中的一些地方应用到了jQuery的自定义事件,而且达到了很好的效果-精 ...
随机推荐
- spring-session-data-redis解决session共享的问题
分布式系统要做到用户友好,需要对用户的session进行存储,存储的方式有以下几种: 本地缓存 数据库 文件 缓存服务器 可以看一些不同方案的优缺点 1.本地机器或者本地缓存.优点:速度快 缺点:服 ...
- About me & 一些置顶的博文
About me 一只历史上最弱的 \(\text{hnoier}\) ... 身在 \(\text{hn}\) 弱校,除了在四大名校夹缝中生存,还要受到同校 \(\text{Julao}\) 的鄙视 ...
- 在服务器上搭建wordpress个人博客 php7.2+nginx+mysql+wordperss
买了台VPS,准备搭建一个博客.用过几个博客框架还是觉得Wordpress好用.主题多,插件也非常的便利,而且大多还免费开源.搭建也很简单,其实安装好php+mysql+nginx+wordpress ...
- LeetCode 任务调度器-Python3<八>
题目:https://leetcode-cn.com/problems/task-scheduler/description/ 给定一个用字符数组表示的 CPU 需要执行的任务列表.其中包含使用大写的 ...
- 修改Mysql字符集
第一种 一.修改my.ini配置文件(MySQL配置文件) character_set_server = utf8 #设置字符集 重启mysql数据库服务 查看当前数据库字符集 show VARIAB ...
- layui switch 开关监听 弹出确定状态转换
不废话,直接上图: 原始状态: 点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head& ...
- phothoshop 快捷键
界面构成: 1 菜单栏 2 工具箱 3 工具属性栏 4 悬浮面板(辅助作用) CTRL + N 新建对话框(对画布进行设置) 回车确定 CTRL + O (字母) 打开对话框(选择图片) 画布的三种显 ...
- Mysql存储引擎特性总结
几个常用存储引擎的特点 下面我们重点介绍几种常用的存储引擎并对比各个存储引擎之间的区别和推荐使用方式. 特点 Myisam BDB Memory InnoDB Archive 存储限制 没有 没有 有 ...
- Angular基础(八) Observable & RxJS
对于一个应用来说,获取数据的方法可以有很多,比如:Ajax, Websockets, LocalStorage, Indexdb, Service Workers,但是如何整合多种数据源.如何避免BU ...
- MQTT详解以及在IoT中的应用
MQTT定义: MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协议支持所有平台, ...