jquery的trigger和triggerHandler区别

首先来说trigger的用法,我们先了解它的定义用法。
trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
该方法与 triggerHandler() 方法类似,不同的是 triggerHandler() 不触发事件的默认行为。
比如说

$("form .required:input").trigger("blur");

找到form表单中input自动触发blur事件。
这个用法用的最多的是在表单有个提交按钮的时候,我们可以给他一个trigger方法触发之前blur方法,当然在验证的时候我们是采用添加类名方法,如果错误我们给他加个类名,最后提交的时候来判断长度,如果长度大于0则不能提交。

与 triggerHandler() 方法相比的不同之处:
它不会引起事件(比如表单提交)的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素,这里就是我们常说的事件冒泡。而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。

.triggerHandler()简单来说就是只会触发一次,不会出现事件冒泡。
这个方法我个人理解也是在表单验证用法比较多,当我们在用了blur进行了验证,为了达到用户提出的需求,如果输入时就可以提醒,这样就更加即时。需要给表单元素绑定keyup事件和focus事件,keyup事件能在用户每次松开键盘是触发,实现即时提醒,focus事件能在元素得到焦点的时候触发,也可以实现即时提醒。

比如说:

 $("form :input").blur(function(){
      失去焦点验证去处理函数


   // 键盘验证
  }).keyup(function(){
      $(this).triggerHandler("blur");
  }).focus(function(){
      $(this).triggerHandler("blur");
  })
<div class="post-text" itemprop="text"> <p>I am trying to fetch the records from the database using blur function. There are two input fields where this function triggers. I have used different names, variables, javascript, controller using laravel to fetch the records. I am able to fetch the records through ajax and successfully opens the modal. When the modal pop ups when the blur function triggers, it also triggers the function for the second field.</p> <p>I just want to trigger the modal according to the field, where the blur triggers and not to trigger twice.</p> <pre><code>//input field: originS <script type="text/javascript"> $(document).ready(function(){ var origin = ""; var _token = ""; var ovalue = ""; $('#originS').blur(function(){ ovalue = ""; origin = $(this).val(); _token = $('input[name="_token"]').val(); $.ajax({ type: 'POST', url: '{{ route('pagescontroller.fetchOrigin') }}', data:{origin:origin, _token:_token}, success: function(response){ if(response){ $("#originSelect").modal('show'); console.log(response); $(".result").html(response); $(document).on('change', '#selectSuburb', function () { ovalue = $(this).val(); if ($(this).is(':checked')) { $('#originS').val(ovalue); $("#originSelect").modal('hide'); $this.die('blur'); } }); $('#originSelect').on('hidden.bs.modal', function (e) { if (ovalue == "") { $("#originS").val(''); $(".result").html(response); } }); } }, }); }); }); </script> //input field: destS </script> <script type="text/javascript"> $(document).ready(function(){ var dest = ""; var _token = ""; var dvalue = ""; $('#destS').blur(function(){ dvalue = ""; dest = $(this).val(); _token = $('input[name="_token"]').val(); $.ajax({ type: 'POST', url: '{{ route('pagescontroller.fetchdest') }}', data:{dest:dest, _token:_token}, success: function(response){ if(response){ $("#destSelect").modal('show'); console.log(response); $(".dresult").html(response); $(document).on('change', '#selectSuburbdest', function () { dvalue = $(this).val(); if ($(this).is(':checked')) { $('#destS').val(dvalue); $("#destSelect").modal('hide'); $this.die('blur'); } }); $('#destSelect').on('hidden.bs.modal', function (e) { if (dvalue == "") { $("#destS").val(''); $(".dresult").html(response); } }); } }, }); }); }); </script> </code></pre> </div>
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页