jQuery_事件触发trigger 

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/02/ 10:35-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .one {
          width: 100px;
          height: 100px;
          border: 1px solid red;
          margin-top: 100px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1" id="btn1"/>
    <input type="button" value="按钮2" id="btn2"/>
    <div id="one" class="one"></div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //事件触发 trigger.
    //a.代码的方式来 触发事件.
    //b.可以使用他来 触发 自定义事件.

   // //1.给div注册一个单击事件
   //  $('#one').on('click', function () {
   //    console.log("jQuery_on_div_单击事件");
   //  });
   //
   // //2.给按钮注册事件.
   //  var i = 0;
   //  $('#btn1').on('click', function () {
   //    i++;
   //    if(i == 3) {
   //      // 条件满足, 触发 div的 单击事件
   //      // 事件触发
   //      // $('#one').click();
   //      $('#one').trigger('click');
   //    }
   //  });

    //-------------------------------------------------------
    //给div注册一个自定义事件
    $('#one').on('customEvent', function () {
      console.log("我是 div_自定义事件customEvent");
    });

    //那我现在就是要触发他怎么办?就可以使用触发器trigger.
    $('#btn2').on('click', function () {
      var result = confirm("需要触发 div上面的 自定义事件customEvent 吗？");
      if(result) {
        $('#one').trigger('customEvent');
      }
    });

  });
</script>

在这里插入图片描述
在这里插入图片描述

posted on 2022-08-02 11:35  beyondx  阅读(83)  评论(0)  编辑  收藏  举报

导航