jQuery中值得注意的方法trigger

mtiz7858 5年前
   <h3>常用模拟</h3>    <p>有时,不需要进行操作,也想模拟用户操作达到某些效果。比如在用户进入界面后就触发click事件,而不需要用户去点击。</p>    <p>在jquery中可以使用trigger完成。</p>    <pre>  <code class="language-javascript">$("#btn").trigger("click")//触发id为btn的click事件    $("#btn").click()//简写</code></pre>    <h3>触发自定义事件</h3>    <p>trigger不仅能触发浏览器支持的这些事件,也可以触发自定义的事件。比如,绑定一个名为clickMe的事件:</p>    <pre>  <code class="language-javascript">$("#btn").bind("clickMe",function(){      //....  })    $("#btn").trigger("clickMe")//触发该事件</code></pre>    <h3>传递数据</h3>    <pre>  <code class="language-javascript">trigger(type,[data])</code></pre>    <p>第一个参数指触发的事件类型,第二个是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次的事件是否为用户触发的。</p>    <pre>  <code class="language-javascript"><button id="btn">按钮</button>      <p id="msg"></p>      <script>          $(function(){              $('#btn').bind("clickMe",function(event,msg1,msg2){                  $("#msg").text(msg1+' '+msg2)              })              $('#btn').trigger("clickMe",["hello","jquery"])          })      </script></code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1443311f55ef79a52e4d811e24c7f6fd.png"></p>    <p>效果截图</p>    <h3>执行默认操作</h3>    <p>trigger()方法触发事件后,会执行浏览器默认操作。比如</p>    <pre>  <code class="language-javascript">$('input').trigger('focus')</code></pre>    <p>以上代码不仅会触发为input绑定的focus事件,也会触发浏览器中默认的focus事件,得到焦点。如果只想触发自定义的focus事件,使用triggerHandler()</p>    <pre>  <code class="language-javascript">$('input').triggerHandler('focus')</code></pre>    <p>该方法仅仅会触发input上绑定的事件,并且 <strong>取消</strong> 浏览器对这个事件的默认操作,不会得到焦点。</p>    <p> </p>    <p>来自:http://www.jianshu.com/p/28cd01e84187</p>    <p> </p>