菜单

jQuery自定义事件的简单实现代码,JQuery最佳实践之精妙的自定义事件

2019年8月2日 - 前端排行

自定义事件触发
  

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

恰好偶最近负责的一个可视化编辑器的开发,其中有些地方便应用了JQuery的自定义事件,而且达到了很好的效果-精简代码的同时充分利用了OO的原则。

复制代码 代码如下:

二、具体实现

本文以我实际应用开发过程中遇到的一个例子进一步说明“什么时候用JQuery的自定义事件以及怎么用”,希望可以抛砖引玉,同时权且当是回复同学们的邮件了。

  $ event.trigger(“myEventName”);

复制代码 代码如下:

Demo-Ingenious JQuery custom event
JQuery最佳实践-精妙的自定义事件
问题:一个复选框X,你如何便捷地触发它的click事件的处理逻辑,但是又不改变它当前的选中状态?

  自定义事件绑定
  下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行。

<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01 Transitional//EN”
“;
<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>

答案:用自定义事件处理函数封装复选框click事件的处理逻辑!然后触发该自定义事件。

复制代码 代码如下:

您可能感兴趣的文章:

以下应用场景你曾经遇到过么?
需求:某个容器A,用户可以设置它的4条边框的有无以及边框色?“边框的有无”和“颜色的变化”需要联动,
就是说改变边框的时候获取当前设定的颜色,改变颜色的时候获取当前设定的边框,并及时反映到容器A上。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图