《jquery权威指南》之事件篇

最新推荐文章于 2022-06-20 19:20:48 发布

南北北南

最新推荐文章于 2022-06-20 19:20:48 发布

阅读量191

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/c_lam_e/article/details/78983201

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

————–冒泡事件————–
事件在触发以后一般分为两个阶段：捕获阶段和冒泡阶段，大多数浏览器都不支持捕获阶段，jquery也不支持捕获，何为冒泡阶段呢，即事件被一层一层触发。点击body、div、input时都可以触发该事件，当点击input以后，input上面的div也被触发了点击事件，最外层的body也被触发了点击事件，由于触发的事件就跟冒泡似的，一层一层往上触发

<body>
    <div>
         <input id="d1" type="button" value="点击"/>
    </div>
    <p id="p1"></p>
    <script>
         $(function(){
         var i = 0;
         $("body,div,#d1").click(function(){
              i++;
              $("#p1").show().html("欢迎来到Jquery世界").append("<div>执行次数<b>"+i+"</b>次</div>");
              })
         });
    </script>
</body>

但是冒泡事件的发生并不是我们的本意，为了阻止冒泡事件的发生，jquery提供了stopPropagation()函数，其实现方法如下：

再点击“点击”按钮时显示次数为1次，说明stopPropagation()方法达到了阻止冒泡的效果

—————载入页面————
ready()方法
工作原理：在jquery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当然遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将为完成的部分用一个数组缓存起来，当全部完成加载后，再将未完成的部分通过缓存一一执行。。。

语法格式

$(document).ready(function(){
            //代码部分    
        })
    $(function(){
        //代码部分
    })
    jquery(document).ready(function(){
        //代码部分
    })
    jquery(function(){
    //代码部分
    })

————-绑定事件———–

$("#p1").click(function(){
        //代码部分
    })

除此之外，jquery还有其他的绑定方式bind()方法
语法：bind(type,[data],fn)，
type即要触发的事件，如click事件等
data，数组
fn是绑定到每个选择元素的事件中的处理函数

<body>
     <div>
          <input id="d1" type="button" value="点击"/>                
     </div>
     <input id="d2" type="button" value="button" />
     <p id="p1"></p>
     <p id="p2"></p>
     <script>
          $(function(){
          var i = 0;
        $("body,div,#d1").click(function(event){
                      i++;
                      $("#p1").show().html("欢迎来到Jquery世界").append("<div>执行次数<b>"+i+"</b>次</div>");
                      event.stopPropagation();
               })
               $("#d2").bind("click",function(){
                     $("#p2").append("<div>这是bind绑定事件</div>")
               })
          });
     </script>
 </body>

如果想绑定多个事件，事件之间可以用空格隔开

$("#d2").bind("click mouseout",function(){
    $("#p2").append("<div>这是bind绑定事件</div>")
 })

用映射方法绑定不同的事件

<script>
   $(function(){                
         $("#d3").bind({
              focus:function({console.log(1);}),
               click: function({console.log(2);}
               })
    });
</script>

bind()方法中第二个参数data的使用

在bind()方法中，data为可选项，表示作为event.data的属性值传递到事件对象的额外数据对象

data数据应用

———————–切换事件——————-

在jquery中，切换事件的方法有两个，hover()和toggle()

hover(over，out)
功能，当鼠标移动到所选的元素上面时，执行指定的第一个函数，当鼠标移出这个元素时，执行指定的第二个元素

<body>
   <div>
        <input id="d1" type="button" value="点击"/>                
   </div>
   <p id="p1">ssssss</p>
   <p id="p2">cccccccc</p>
   <script>
        $(function(){
             $("#d1").hover(function(){$("#p1").show()},function(){$("#p1").hide()})
        });
   </script>
</body>    

toggle(fn1,fn2,[fn3,fn4,...])

  功能：每次单击后一次调用函数，根据函数设置的前后顺序进行调用，并且每次只调用一个函数，当调用到最后一个函数时，会返回到第一个函数继续执行

———————移除事件———————–
与绑定事件相对应，可用unbind()来移除绑定的事件
unbind([type],[fn])
type为移除的事件内容，fn为要移除的事件处理函数。。。无参数时，则移除所有绑定的事件，只有type参数时，则移除该事件的所有函数，两个参数都有时，则只移除该事件所对应的函数

———————one()—————–
one(type,[data],fn)
为所选的函数绑定一个仅触发一次的处理函数
刚开始输入框显示“点击显示联系人方式”，再次点击以后显示联系人方式，之后再点击将不会再出发该点击事件。

<body>
   <div>
        <input id="d2" type="text" value="点击显示联系人电话"/>                         
   </div>          
   <script>
        $(function(){
             $("#d2").one("click",a);
             function a(){this.value="3684127";}
        });
   </script>
 </body>

图片显示
效果显示

————–trigger()———-
可以实现触发性事件，即不必用户做任何操作，在前段页面开发中，有时希望页面在DOM加载完毕以后自动执行一些很人性化的操作，如：文本框中的内容全部处于被选中的状态
trigger(type,[data])
功能：在所选择的元素上出发指定类型的事件

<body>
       <div>
            <input id="d2" type="text" value="谭青青"/>
            <div id="d1"></div>                  
       </div>          
       <script>
            $(function(){
                 $("#d2").trigger("select");           //加载页面以后，输入框处于被选中的状态
                 $("#d2").bind("btn_click",function(){
                       var val = $(this).val();
                       $("#d1").html(val);
                 });
                 $("#d2").trigger("btn_click");        //在div中显示输入框里的内容
            });
       </script>
 </body>

效果展示
—————triggerHander()———-
与trigger方法类似，唯一不同的就是在加载页面时不会自动执行