jQuery自定义事件的简单实现代码


Posted in Javascript onJanuary 27, 2014

一、需求原因
虽然JQuery为我们定义了许多的事件,但是有时候还是不能满足我们的要求,故本例实现一个自定义事件实现的例子。

二、具体实现

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>自定义事件</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
     $(function(){
         $("#btn").bind("myClick",function(){
              $("#test").append("自定义事件").append($("<br>"));
         });
         $("#btn").click(function(){
              $(this).trigger("myClick");
         });
     });
</script>
</head>
<body>
     <input id="btn" type="button" value="点我">
     <div id="test"></div>
</body>
</html>
Javascript 相关文章推荐
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 #Javascript
jQuery实现动画效果的简单实例
Jan 27 #Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 #Javascript
js修改原型的属性使用介绍
Jan 26 #Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 #Javascript
JS批量修改PS中图层名称的方法
Jan 26 #Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 #Javascript
You might like
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
浅析python中的迭代与迭代对象
2018/10/08 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
详解python中的index函数用法
2019/08/06 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
天网面试题
2013/04/07 面试题
生物科学专业个人求职信范文
2013/12/07 职场文书
招商专员岗位职责
2014/02/08 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
教师业务学习材料
2014/12/16 职场文书