jQuery事件操作（一）

最新推荐文章于 2022-07-27 09:26:01 发布

白小宇

最新推荐文章于 2022-07-27 09:26:01 发布

阅读量651

点赞数

分类专栏： jQuery jQuery学习笔记文章标签： jquery 事件

本文链接：https://blog.csdn.net/b954960630/article/details/78827578

版权

jQuery 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

jQuery学习笔记

8 篇文章 2 订阅

订阅专栏

 
 一、事件绑定 

  1、bind(type,[data],function); 

 
 bind()方法有3个参数，说明如下。

第1个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。
第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用米绑定的处理函数。

$(function(){
     $("#panle h5.head").bind("click",function(){
         $(this).next("div.content").show(); 
     });
});
//也可以简写为：
$(function(){
     $("#panle h5.head").click(function(){
         $(this).next("div.content").show(); 
     });
});

 
  二、合成事件 
 

   jQuery有两个合事件——hover()方法 和 toggle()方法 
 

   1、hover(enter,leave); 
 

$(function(){
     $("#panle h5.head").hover(function(){
         $(this).next("div.content").show();
     },function(){
         $(this).next("div.content").hide(); 
     }); 
});

   2、toggle(fn1,fn2,···fnN); 
 

   toggle(function{},function{})： 
 

例 HTML代码：

<h5 class="head">什么是jQuery?</h5>
<div class="content"> 内容</div>

jQ代码：

$(function(){
    var $content = $(this).next();
    $("h5.head").toggle(function(){
        $('div.content').show();
    },function(){
       $('div.content').hide();
    });
})

    如果不用toggle，则比较麻烦，需做一下判断 
  

if（“内容”显示）{
      “内容”隐藏
}else{
      “内容”显示
}

为了判断元素是否显示，可以使用jQuery中的is()方法来完成。

例：

$(function(){
     $("#panel h5.head").bind("click",function(){
         var $content = $(this).next("div.content");
         if($content.is(":visible")){
             $content.hide(); 
         }else{
             $content.show(); 
         } 
     })
})

 
   三、事件冒泡 
  

1、什么是事件冒泡

<body>
   <div id="content">
       外层div元素
       <span>内层span元素</span>
   </div>
</body>

 
   如果将以上的<body>、<div>、<span>都绑定click事件， 
  

 
        在单击<span>元素的同时,也单击了包含<span>元素的<div>元素 和 包含<div>元素的<body>元素，并且每一个元素都会按照特定的顺序响应click事件。 
  

 
   元素的click事件会按照以下顺序"冒泡": 
  

 
         (1) <span> 
  

 
         (2) <div> 
  

 
         (3) <body> 
  

 
   之所以称为冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上纸质顶端。 
  

 
   2、事件冒泡引发的问题 
  

         上例中，本来只想触发<span>元素的click事件,然而<div>元素和<body>元素的click事件也同时被触发了。因此，有必要对事件的作用范围进行限制。 
  

         当单击<span>元素时，只触发<span>元素的click，而不触发<div>元素和<body>元素的click; 
  

         当单击<div>元素时，只触发<div>元素的click，而不触发<body>元素的click. 
  

 
   为了解决这些问题，介绍以下内容： 
  

 
   （1）事件对象： 
  

只需要为函数添加一个参数

$("element").bind("click",function(event){   //event:事件对象
     //·····
});

 
    这样，当单击"element"元素时，事件对象就被创建了，事件处理函数执行完毕后，事件对象就被销毁。 
   

 
      这个事件对象只有事件处理函数才能访问到。 
   

 
   （2）停止事件冒泡： 
  

    用stopPropagation()方法来停止事件冒泡 
  

$("span").bind("click",function(event){      //event:事件对象
     var txt = $('#msg').html() + "<p>内层span元素</p>"
     $('#msg').html(txt);
     event.stopPropagation();                //停止事件冒泡 ，也可以改为 return false;
});

    当单击<span>元素时，只触发<span>元素的click，而不触发<div>元素和<body>元素的click。 
  

 
   （3）阻止默认行为： 
  

 
   eg:单击超链接后会跳转、单击"提交"按钮后表单会提交，有时需要阻止元素的默认行为。 
  

    用preventDefault()方法来阻止元素的默认行为。 
  

 
   也可以 return false; 
  

 
   （4）事件捕获： 
   与事件冒泡过程相反，且jQuery不支持事件捕获。

 
   3、事件对象的属性 
  

    (1)event.type()                     :获取到事件的类型。 
  

    (2)event.preventDefault()     :阻止默认事件行为。 
  

    (3)event.stopPropagation()   :阻止事件的冒泡。 
  

    (4)event.target()                   :获取到触发事件的元素。 
  

    (5)event.relatedTarget()      :在标准DOM中，mouseout和mouseout所发生的元素可以通过event.target来访问，相关元素可以通过 
   event.relatedTarget访问. 
  

    (6)event.pageX()                   :获取到光标相对于页面的x坐标。 
  

        event.pageY()                   : 
   获取到光标相对于页面的y坐标。 
  

    注：如果页面上有滚动条，则还要加上滚动条的宽度或高度。在IE浏览器中还应该减去默认的2px的边框。 
  

    (7)event.which()                    :在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。 
  

    (8)event.metaKey()                :键盘事件中获取<ctrl>按键。 
  

    (9)event.originalEvent()          :指向原始的事件的对象。 
  

 
    例： 
   

 
    (1)event.type() 
   

$("a").click(function(event){
     alert(event.type);     //获取事件类型
     return false;          //阻止链接跳转
});

 
    之后会返回： "click" 
   

 
    (4)event.target() 
   

$("a[herf=http://google.com]").click(function(event){
     alert(event.target.href);     //获取触发事件的<a>元素的href属性值
     return false;                 //阻止链接跳转
});

 
    之后会返回： "http://google.com" 
   

 
    (6)event.pageX() / event.pageY() 
   

$("a").click(function(event){
     alert("Current mouse position:" + event.pageX + "," + event.pageY);
               //获取鼠标当前相对于页面的坐标
     return false;    //阻止链接跳转
});

 
    (7)event.which() 
   

$(function(){
     $("body").mousedown(function(e){
          alert(e.which);     //     1=鼠标左键left；2=鼠标中键；3=鼠标右键；
     })
})

 
    以上代码加载到页面后，用鼠标单击页面时，单击左、中、右键分别返回1、2、3 
   

白小宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件操作（一）

一、事件绑定1、bind(type,[data],function);bind()方法有3个参数，说明如下。第1个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、c
复制链接

扫一扫