🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# jquery自定义事件 ## 需求:我们给每个按钮绑定不同的功能。 其中,我们按下a按钮除了要执行自己的功能还要执行 另外两外按钮的功能。我们可以通过trigger来将其对应的事件进行触发。 那么可以发现我们给每一个div都绑定了自己的事件。这个事件是自已定义的名称,通过trigger来进行将其触发掉。 ## 那么我们来分析一下为什么要做这么一项工作。 我们完全可以将操作三个div的功能写在,操作按钮对应的指令中。但是我们没有这么做。 我们可以考虑一下在工作中如果单击按钮要做的功能特别复杂,那么对应的代码全写在这里面。会导致我们的代码杂乱无章。将来不利于维护代码 如果我们将每个元素自己相应的功能拆分,这样的话我们在主业务中的代码会非常清晰。如下图你会觉得我们的代码,各斯其职,不仅写起来简单,而且维护起来也方便。 :-: :-: ![](https://img.kancloud.cn/f7/44/f74463a2c786a3e4619d4ed2ae99c2ac_985x609.gif) ## 代码 ``` <button>a</button> <div>盒子1</div> <div>盒子2</div> <div>盒子3</div> <script src="js/jquery.min.js"></script> <script> $('button:eq(0)').click(function(){ $('div').trigger('gaibian') }) $('div:eq(0)').on('gaibian',function () { $(this).css({width:200, height:200, background:'pink'}) }) $('div:eq(1)').on('gaibian',function () { $(this).css({width:200, height:200, background:'blue'}) }) $('div:eq(2)').on('gaibian',function () { $(this).css({width:200, height:200, background:'gold'}) }) </script> ```