Jquery 基础知识第三章

礼小七
于 2022-07-23 18:08:23 发布
阅读量62
点赞数
分类专栏： jQuery 文章标签： javascript 前端 jquery
本文链接：https://blog.csdn.net/lixiaoqidecsdn/article/details/125950937
版权
jQuery 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<body>
    <script>
        //  jQuery 为我们提供了方便的事件注册机制，是开发人员易于操作优缺点如下：
        //   优点: 操作简单，且不用担心事件覆盖等问题。
        //  缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
        // 语法:
        element.事件(function () { })
        $("div").click(function () { 事件处理程序 })
            //  其他事件和原生基本一致。
            //  比如mouseover、mouseout、blur、focus、change.keydown、keyup.resize、scroll等
            < body >
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>
1.2. jQuery 事件处理
因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：
on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发
1.2.1 事件处理 on() 绑定事件
因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()
语法
on0方法优势1:
可以绑定多个事件，多个处理事件处理程序。
( "div" ) .on ( {
nouseover: function () {},mouseout: function ( ) { },click: function() { }
}) ;
如果事件处理程序相同
( "div" ) .on ( "mouseover mouseout", function ( ) {(this) .toggleclass ( "current");
});
on(方法优势2:
可以事件委派操作。事件委派定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
( 'ul' ).on ( 'click', 'li', function (){
alert ( ' hello world! ' ) ;
});
在此之前有bind), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
on0方法优势3:
动态创建的元素，click()没有办法绑定事件, on()可以给动态生成的元素绑定事件
$ ( "div" ).on ( "click" , "p", function () {
..alert("俺可以给动态生成的元素绑定事件")}) ;
( "div" ) .append( ("<p>我是动态创建的p</p>"));
<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol></ol>
    <script>
        $(function() {
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
            // (2) on可以实现事件委托（委派）
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // (3) on可以给未来动态创建的元素绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>
1.2.3. 事件处理 off() 解绑事件
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法
one()，在这里我们重点讲解一下 off() ;
语法
off(0方法可以移除通过on0方法添加的事件处理程序。
$("p" ).off()//解绑p元素所有事件处理程序
$("p").off( "click")//解绑p元素上面的点击事件后面的foo是侦听函数名 ( "ul").off ( "click","li");l/解绑事件委托
如果有的事件只想触发一次，可以使用one()来绑定事件。
<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是一个P标签</p>
    <script>
        $(function() {
              // 事件绑定
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>
1.2.4. 事件处理 trigger() 自动触发事件
有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和
triggerHandler() ;
语法
第—种: trigger0
element.click()1/第一种简写形式
lement.trigger ("type") l/第二种自动触发模式
第二种: triggerHandler(
element.triggerHandler (type)i/第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
<body>
    <div></div>
    <input type="text">
    <script>
    $(function() {
      // 绑定事件
      $("div").on("click", function() {
        alert(11);
      });
      // 自动触发事件
      // 1. 元素.事件()
      // $("div").click();会触发元素的默认行为
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
      // 一个会获取焦点，一个不会
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>