jQuery绑定事件 

/*
三种用法:
  1. on 和 off
     // 绑定事件
     $().on("事件名",匿名函数)
     
     // 解绑事件,给指定元素解除事件的绑定
     $().off("事件名")
  
  2. 直接通过事件名来进行调用
     $().事件名(匿名函数)
    
  3. 组合事件,模拟事件
     $().ready(匿名函数)   // 入口函数
     $().hover(mouseover, mouseout)   // 是onmouseover和 onmouseout的组合
     $().trigger(事件名)  // 用于让js自动触发指定元素身上已经绑定的事件
     
*/

 

案例一：绑定取消事件

<p>限制每次一个按钮只能投票3次</p>
<button id="zan">点下赞(<span>10</span>)</button>
<script>
    let zan = 0;
    $("#zan").click(function(){
        $("#zan span").text(function(){
            zan++;
            let ret = parseInt($(this).text())+1;
            if(zan >= 3){
                $("#zan").off("click"); // 事件解绑
            }
            return ret;
        });
    })

</script>

 

 

案例二：模拟事件触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
    <style>
    input[type=file]{
        display: none;
    }
    .upload{
        width: 180px;
        height: 44px;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        line-height: 44px;
        background-color: #000000;
        border: none;
        outline: none;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <input type="file" name="avatar">
    <button class="upload">上传文件</button>
    <script>
    $(".upload").on("click", function(){
       $("input[type=file]").trigger("click"); // 模拟事件的触发
    });
    </script>
</body>
</html>

 

posted @ 2021-05-11 17:29  映辉  阅读(60)  评论(0)    收藏  举报