jquery 事件监听

最新推荐文章于 2022-04-05 14:55:00 发布

satya1

最新推荐文章于 2022-04-05 14:55:00 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/weixin_41042671/article/details/79592093

版权

事件分类：

表单事件
键盘事件
鼠标事件

先来看表单事件

blur 失去焦点
focus 得到焦点
change 值改变
submit提交

实例参考

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>

    <form class="" action="index.html" method="post">
      <input type="text" name="" value="">
      <select class="" name="">
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      <input type="text" name="" value="">
      <input type="submit" name="" value="提交">
    </form>

    <script type="text/javascript">
    //对所有匹配的dom对象都监听
      $("input").focus(event=>console.log("input get focus"))
      .blur(event=>console.log("input 失去焦点"))
      .change(event=>console.log("input value changeto"+$("input").val()))

      $("form").submit(function(event){
        event.preventDefault();//中止默认提交行为 不会刷新页面
        console.log("提交了");
      })

    </script>

  </body>
</html>

键盘事件

keydown
keyup

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>
    <input type="text" name="" value="">
    <input type="text" name="" value="">
    <input type="text" name="" value="">

    <script type="text/javascript">
    //jquery对象可以一次拿到所有，每次都返回自身
      $("input")
      .keydown(event=>console.log("keydown"))
      .keyup(e=>console.log("keyup",e.which))
      // e.which可以获取键盘值

    </script>

  </body>
</html>

鼠标事件

click 单击
dblclick双击
contextmenu 右击下拉菜单
mousedown 鼠标按下
mouseup 鼠标松开
mouseenter 鼠标进入到某区域
mousemove 鼠标移动
mouseout 鼠标离开进入子区域或离开也是out，选择用mouseleave
mouseleave 是jquery模拟出来的，解决mouseout缺陷，没有子的情况下和mouseout一致。
hover 同mouseleave,其type也是mouseleave。

再说一下事件对象

event.pageX 鼠标相对文档的左边位置
event.pageY 。。。顶部位置
event.which 可以拿到鼠标或键盘的输入编号key
event.preventDefault()用于右击的contextmenu的阻止默认事件
event.target

直接例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style media="screen">
      .box{
        background-color: #888;
        color:red;
        width:300px;
        height:200px;
        padding:20px;
      }

      .sub{
        width:50%;
        background-color: yellow;
        height: 50%;
      }

      .menu{
        background-color: #789;
        padding: 20px;
        display: none;
        position:fixed;
      }
    </style>
  </head>
  <body>

    <div class="box">
      box
      <div class="sub">
        sub
      </div>

    </div>

    <div class="menu">
      <input type="text" name="" value="">
      <input type="text" name="" value="">
      <input type="submit" name="" value="提交">

    </div>

    <script type="text/javascript">
    const log = console.log;
    const menu = $(".menu");

    menu.
    mouseenter(function(){
      clearTimeout(clearId);
    })
    .mouseleave(function(){
      delcontext();//鼠标出来要消失
    })

    let clearId;

    function delcontext(){
      clearId = setTimeout(function(){
        menu.css({display:"none"});
      },1000)
    }



      $(".box")
      // .click(e=>log(e.type))
      // .dblclick(e=>log(e.type))
      .contextmenu(e=>{
        clearTimeout(clearId);
        e.preventDefault();//屏掉默认的右键弹出对话menu
        //弹出自己创建的 menu
        let left = e.pageX;
        let top = e.pageY;
        menu.css({
          left,top,display:"block"
        });
        delcontext();//无动作也消失
        // clearId = setTimeout(function(){
        //   menu.css({display:"none"});
        // },2000)
      })
      // .mousedown(e=>log(e.type))
      // .mouseup(e=>log(e.type))
      // .mouseenter(e=>log(e.type))
      // .mousemove(e=>log(e.type))

      //leave是在整体离开box后触发，out进到子元素，出来都会产生，一般不用。

      // .mouseout(e=>log(e.type))

      .mouseleave(e=>log(e.type))

      // .hover(e=>log(e.type+"hover..."))

      //mouseleave hover是模拟出来的产生的效果和条件一致 type都是mouseleave



    </script>

  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


  </head>
  <body>




    <script type="text/javascript">
    鼠标事件的输入编号
      $(document).mousedown(function(event){
        console.log(event.which);
      })




    </script>
  </body>
</html>

哦了。

satya1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 事件监听

事件分类：表单事件键盘事件鼠标事件先来看表单事件blur 失去焦点focus 得到焦点change 值改变submit提交实例参考&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script
复制链接

扫一扫