jQuery事件-on () 方法/off()方法/ triggle()/事件对象

90 阅读 0 评论 60 点赞

我是靠谱客的博主感性野狼，最近开发中收集的这篇文章主要介绍jQuery事件-on () 方法/off()方法/ triggle()/事件对象，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery事件
jQuery事件注册
单个事件注册element.事件(function(){.....})

事件绑定 on () 方法
在匹配元素上绑定一个或多个事件的事件处理函数
语法：element.on(events,[selector],fn)
events:一个或多个用空格分割的事件类型，比如click 或 keydown
[selector]:元素的子元素选择器
fn:回调函数，即绑定在元素身上的侦听函数
（1）on ( ) 实现多个事件注册：

 // 1. on ( ) 实现多个事件注册：
  $("div").on({
    mouseenter: function() {
       $(this).stop().css("background", "green")
       },
        click: function() {
          $(this).stop().css("background", "yellow")
          },
          mouseleave: function() {
            $(this).stop().css("background", "red")
           }
     })

    $("div").on("mouseover mouseleave", function() {
      $(this).toggleClass("current")
    })

（2) on( ) 实现事件委托（委派）

    //2.on( ) 实现事件委托（委派）
     $("ul").on("click", "li", function() {
         $(this).css("color", "red");
          //click 是绑定在 ul 身上的，但触发的对象是 ul 里面的 li
     })

（3）on ( ) 可以给未来动态创建的元素绑定事件

//3.on ( ) 可以给未来动态创建的元素绑定事件
  $("ol").on("click", 'li', function() {
     $(this).css("color", "red");
     //这个li是后来创建的 用普通的注册事件不能实现
   )
   var li = $("<li>新添加的</li>");
   $("ol").append(li);

案例：微博发布效果

  <style>
        .box {
            position: relative;
            width: 700px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        p {
            position: absolute;
            top: 175px;
            left: 10px;
        }
        
        textarea {
            position: absolute;
            top: 60px;
            left: 85px;
            width: 500px;
        }
        
        button {
            position: absolute;
            top: 190px;
            left: 600px;
        }
        
        .show {
            position: absolute;
            top: 200px;
            left: 70px;
        }
        
        .show ul li {
            border-bottom: 1px dashed rgb(121, 112, 112);
            display: none;
            width: 480px;
        }
        
        .show ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="box">
        <p>微博发布</p>
        <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
        <button class="btn">发布</button>
        <div class="show">
            <ul>

            </ul>
        </div>
    </div>
</body>
<script>
    $(function() {
        //1.点击发布按钮，动态创建一个li 放入文本框的内容和删除按钮，并添加到ul中
        $(".btn").on("click", function() {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
                $('ul').prepend(li);
                li.slideDown(); //让li滑动处理
                $(".txt").val(""); //发布后清空文本框的内容
            })
            //2.点击删除按钮，就删除当前的li
        $("ul").on("click", "a", function() {
            //on 可以给动态创建的元素绑定事件
            $(this).parent().slideUp(function() {
                //上拉完毕后删除
                $(this).remove();
            });

        })
    })
</script>

  <style>
        .box {
            position: relative;
            width: 700px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        p {
            position: absolute;
            top: 175px;
            left: 10px;
        }
        
        textarea {
            position: absolute;
            top: 60px;
            left: 85px;
            width: 500px;
        }
        
        button {
            position: absolute;
            top: 190px;
            left: 600px;
        }
        
        .show {
            position: absolute;
            top: 200px;
            left: 70px;
        }
        
        .show ul li {
            border-bottom: 1px dashed rgb(121, 112, 112);
            display: none;
            width: 480px;
        }
        
        .show ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="box">
        <p>微博发布</p>
        <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
        <button class="btn">发布</button>
        <div class="show">
            <ul>

            </ul>
        </div>
    </div>
</body>
<script>
    $(function() {
        //1.点击发布按钮，动态创建一个li 放入文本框的内容和删除按钮，并添加到ul中
        $(".btn").on("click", function() {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
                $('ul').prepend(li);
                li.slideDown(); //让li滑动处理
                $(".txt").val(""); //发布后清空文本框的内容
            })
            //2.点击删除按钮，就删除当前的li
        $("ul").on("click", "a", function() {
            //on 可以给动态创建的元素绑定事件
            $(this).parent().slideUp(function() {
                //上拉完毕后删除
                $(this).remove();
            });

        })
    })
</script>

事件解绑 off()方法

如果括号内为空，对应元素上面的所有事件都被解除

             //事件解绑 off()方法
            $("div").off();//如果括号内为空，div上面的所有事件都被解除
            $("div").off("click");//解除div的点击事件
            $("ol").off("click", 'li');//解除事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件

         //如果有的事件只想触发一次，可以使用one()来绑定事件
            $("ul").one("click", 'li', function() {
                $(this).css("color", "red");
            })

自动触发事件 triggle()

1.element.事件()
2.element.trigger(“事件”)
3.element.triggerHandler事件() 最大的区别就是不会触发元素的默认行为

   //自动触发事件 trigger()
    $("div").on("click", function() {
      alert(11);
    })
    //自动触发事件
     //1.element.事件()
       $("div").click();
      //2.element.trigger("事件")
       $("div").trigger("click");
      //3.element.triggerHandler事件() 最大的区别就是不会触发元素的默认行为
       $("div").triggerHandler("click");
       $("input").on("focus",function(){
          $(this).val("你好吗")
       })
      $("input").triggerHandler("foucus")
      //输入框有一个默认行为是光标闪烁，利用triggerHandler就不会出现光标闪烁现象

jQuery事件对象

事件被触发，就会有事件对象的产生

//jQuery事件对象
   $(document).on("click", function(e) {
      console.log("点击了document");
    })
    $("div").on("click", function(e) {
       console.log("点击了div");
       e.stopPropagation();//协商这个，就可以阻止其冒泡行为
    })
   //点击后由于事件冒泡会先后出现 点击了div 点击了document