jQuery事件处理

最新推荐文章于 2023-08-10 16:39:43 发布

痴心的萝卜

最新推荐文章于 2023-08-10 16:39:43 发布

阅读量208

点赞数

分类专栏： DOM和jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_36826618/article/details/104060730

版权

DOM和jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. 事件绑定

on(event,fn) 标准的绑定方式
one(event,fn) 事件只能绑定一次
on({}) 同时绑定多个事件
把事件名作为方法

2. 解除事件绑定

off()

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 事件绑定</title>
  <style>
    button {
      width:120px;
      line-height: 40px;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      font-size: 16px;
    }

    #box{
      width: 400px;
      height: 300px;
      border: 1px solid #999;
    }
  </style>
</head>
<body>
  <h1>jQuery 事件绑定</h1>
  <hr>
  <button id="btn">按钮</button>
  <div id="box"></div>
  <hr>

  <button id="btn2">解除第一个按钮事件</button>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(document).ready(function () {
        // 鼠标 悬浮和 鼠标 离开
        // 把事件名作为方法
        $("#btn").mouseover(function () {
          $(this).css("background-color", "#999");
        }).mouseout(function () {
          $(this).css("background-color", "#f5f5f5");
        });

        // on
        $("#btn").on("click",function () {
          console.log("click");
        });

        // 把事件仅 绑定一次
        $("#btn").one("dblclick", function () {
          console.log("dblclick");
        });

        // 使用on同时绑定多个事件
        $("#box").on({
          "mouseover": function () {
            $("#box").css("background-color", "red");
          },
          "mouseout": function () {
            $("#box").css("background-color", "transparent");
          },
          "click": function () {
            alert("ok");
          }
        });

        $("#btn2").click(function () {
          // 解除所有事件
          // $("#btn").off();
          // 解除其中一个事件
          $("#btn").off("mouseout");
        })

      })
    });
  </script>
</body>
</html>

3. 事件委派

on(event,selector,fn)

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 事件委派</title>
  <style>
    ul {
      margin: 0px;
      padding: 0px;
      list-style: none;
    }

    #myList {
      width: 600px;
    }
    #myList li {
      margin-bottom: 10px;
      padding: 20px;
      border: 2px solid #ccc;
    }
    #myList li.current{
      background-color: orange;
    }
  </style>
</head>
<body>
  <h1>jQuery 事件委派</h1>
  <hr>
  <ul id="myList">
    <li>a b c d e f g</li>
    <li>a b c d e f g</li>
    <li>a b c d e f g</li>
    <li>a b c d e f g</li>
    <li>a b c d e f g</li>
  </ul>

  <hr>

  <input type="text" id="liContent">
  <button id="btn">添加</button>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 这种用法新增的li标签元素会没有绑定事件，所以已经弃用，推荐用on
      // $("#myList li").click(function () {
      //   $(this).toggleClass("current");
      // });
      $("#myList").on("click", "li", function () {
          $(this).toggleClass("current");
      });
      $("#btn").click(function () {
        $("<li>").html($("#liContent").val()).appendTo("#myList");
      })
    });
  </script>
</body>
</html>

4. 控制事件触发

trigger()
triggerHandle()

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件触发</title>
  <style>
    button{
      width: 120px;
      line-height: 40px;
      border: 1px solid #ccc;
      background-color: #f5f5f5;
    }
    input{
      width: 300px;
      height: 40px;
    }
  </style>
</head>
<body>
  <button id="btn">按钮</button>
  <br>
  <input type="text" id="myInput">
  <br>
  <ul>
    <li>a b c d e f</li>
    <li>a b c d e f</li>
    <li>a b c d e f</li>
    <li>a b c d e f</li>
  </ul>
  <br>
  <button id="btn2">trigger</button>
  <button id="btn3">triggerHandler</button>
  <button id="btn4">触发input的focus事件</button>
  <button id="btn5">触发li的单击事件</button>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#btn").click(function () {
        alert("click");
      });

      $("#btn").mouseover(function () {
        $(this).css("background-color", "#999");
      })

      $("ul li").click(function () {
        alert($(this).index());
      });

      $("#btn2").click(function () {
        // 通过btn2触发btn的触发事件
        // $("#btn").trigger("click");
        $("#btn").trigger("mouseover").trigger("click");
      });
      /*
       * trigger 返回的是jqdom 可以连贯操作
       * trigger 可以触发元素自带的事件
       * trigger会触发集合中的所有元素的事件，
       * triggerHandler只触发集合中第一个元素的事件
       * */
      $("#btn3").click(function () {
        $("#btn").triggerHandler("click");// 不能连贯操作，因为triggerHandler不能返回jQuery DOM
      });

      $("#btn4").click(function () {
        // 可以触发元素自带事件
        $("#myInput").trigger("focus");
        // triggerHandler 不能触发
        // $("#myInput").triggerHandler("focus");
      });

      $("#btn5").click(function () {
        // $("ul li").trigger("click");
        $("ul li").triggerHandler("click");
      });
    });
  </script>
</body>
</html>

5. 事件列表

ready 页面中DOM加载完毕
focusin 获取焦点，绑定给输入框的父元素
focusout 失去焦点，绑定给输入框的父元素
mouseenter 代替 mouseover 鼠标悬停在元素上
mouseleave 代替 mouseout 鼠标离开元素
hover mouseenter和mouseleave的集合

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery事件</title>
  <style>
    .input-group{
      padding: 20px;
      width: 600px;
      border: 1px solid #cccccc;
    }
    .input-group input {
      width: 300px;
      height: 30px;
      border: 1px solid #ccc;
    }
    .detail-box{
      width:600px;
    }

    .detail-title{
      padding: 20px;
      background-color: skyblue;
    }
    .detail-title h3{
      margin: 0;
      font-size: 1em;
    }
    .detail-content {
      padding: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>jQuery事件</h1>
  <hr>

  <div class="input-group">
    <input type="text">
  </div>
  <br>

  <div class="detail-box">
    <div class="detail-title">
      <h3>详细内容</h3>
    </div>
    <div class="detail-content">
      a b c d e f g h i j k l n m
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".input-group").focusin(function () {
        $(this).css("background-color", "yellow");
      });

      $(".input-group").focusout(function () {
        $(this).css("background-color", "transparent");
      });

      //mouseenter mouseleave
      // $(".detail-title").mouseover(function () {
      //   $(this).next(".detail-content").slideDown();
      // }).mouseout(function () {
      //   $(this).next(".detail-content").slideUp();
      // })
      $(".detail-title").mouseenter(function () {
        $(this).next(".detail-content").slideDown();
      }).mouseleave(function () {
        $(this).next(".detail-content").slideUp();
      });

      // 最直接的方式
      // $(".detail-title").hover(function () {
      //   $(this).next(".detail-content").slideToggle();
      // });
    });
  </script>
</body>
</html>

6.事件对象

pageX 鼠标箭头的x坐标
pageY 鼠标箭头的y坐标
target 当前触发事件的元素
which 键盘按键的ASCII码
type 事件类型（事件名称）
preventDefault() 阻止默认事件
stopPropagation() 阻止事件冒泡

demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件对象</title>
  <style>
    .btn{
      display: inline-block;
      width: 120px;
      height: 40px;
      text-align: center;
      text-decoration: none;
      color: #333;
      line-height: 40px;
      border:1px solid #ccc;
      border-radius: 3px;
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <h1>事件对象</h1>
  <hr>
  <a href="" class="btn">改变颜色</a>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(document).click(function (event) {
        console.log(event);
        console.log("x:"+event.pageX+"y:"+event.pageY);
        console.log(event.type+":"+event.target);
      });
      $(document).keypress(function (event) {
        console.log(event.type+":"+event.which);
      })

      $(".btn").click(function () {
        $(document.body).css("background-color", "yellow");

        // 阻止默认操作 比如a标签的跳转刷新事件就会被阻止
        // event.preventDefault();

        // 阻止事件冒泡 事件冒泡就是说自己身上的事件会触发，但是它祖先上的事件会被阻止掉
        // event.stopPropagation();

        // 既可以阻止事件冒泡，又可以阻止默认操作
        // return false;
      })
    });
  </script>
</body>
</html>