三步实现jQuery方式处理事件

傷城~ 2022-07-17 02:40 129阅读 0赞

jQuery极大增强并扩展了基本事件的处理机制，同时也让我们从恼人的兼容性问题中大大地解放。更好的消息是，jQuery进行事件处理更加简单易用，废话不多说，我们下面看如何用三步进行jQuery的事件处理。

## 选择元素 ##

用户在Web页面中通常是和页面的元素进行交互的，比如点击某个按钮，移动到某个div，点击链接等等。当分配事件的时候，我们第一步要做的就是选择该元素。

jQuery支持使用css选择器来选择我们想要操作的页面部分，例如：

$('#id-name')      //通过id选择器
    $('.class-name')   //通过类选择器
    $('a')             //通过元素选择器

## 为元素分配事件 ##

在选择一个元素之后，接下来就是为该元素分配指定的事件，事件的种类很多。例如当我们的鼠标移动到某个`<a>`链接上时：

$('a').mouseover()

当我们点击id为button1的按钮时：

$('#button1').click()

## 为事件传递函数 ##

第二步只是指定了元素的某个事件，但是当该事件触发时具体做什么我们还没有指定。这一步就是为事件指定处理函数，即当事件触发时，执行该函数的操作。

比如，当我们鼠标移动到导航栏时，显示隐藏的id为submenu的子菜单：

$('#mainmenu').mouseover(function(){
        $('#submenu').show();
      }
    );

上面是使用传入匿名函数作为参数的方法，当然我们也可以传递之前定义好的函数名，以上代码可以重写如下：

function showSubmenu(){
      $('#submenu').show();
    }
    $('#mainmenu').mouseover(showSubmenu);

这里需要注意，在将函数名指定为事件处理参数时，是没有圆括号的。不知大家还记不记得，如果我们传入带圆括号的函数，那么该函数会立即执行，传入的参数实际上是该函数执行的结果。而没有圆括号，传入的是函数的引用。

# $(document).ready()与window.onload #

当文档完全下载到浏览器时，会触发window.onload事件，此时，页面上全部元素对于JavaScript而言都是可操作的。$(document).ready()与之类似，但是有着微妙的差别。    $(document).ready()会在页面DOM准备就绪的时候就可以使用了。当页面需要加载较多的资源的时候这种差异便会体现出来。

比如我们在加载相册类的界面的时候，使用window.onload要等到每一幅图片都加载完毕才会触发该事件，这通常需要数秒的时间。如果在这之前用户进行了某种页面的操作，这些结果都是不可预料的。但是使用$(document).ready()会在DOM树解析完成时即可，也就是说页面会“更早地准备好”。

通常情况下$(document).ready()是一个更好的方法，作为jQuery初学者只需要知道每次把需要执行的代码放在以下片段即可：

$(document).ready(function() { 
    
    }); // end ready
     
      
       1
       2
       3

由于$(document).ready()十分常用，可以简写为以下形式：

$(function(){ 
    
    });
     
      
       1
       2
       3

但是(document).ready()这种写法会更清楚地表明 $( document).ready()是在document的jQuery对象上调用.ready()方法的代码过程。初学者没太大必要做这样的简化。

# this和$(this) #

this几乎是在所有语言中都随处可见的一个关键字，它的含义也万变不离其宗。在jQuery中，this引用正在调用匿名函数的元素。比如说：

$('#button1').click(function(){ 
      $(this).val("OK!");
    });
     
      
       1
       2
       3

上面的代码中的this就是对id为button1的按钮元素的引用。

$(this)则是this引用元素对应的jQuery对象，在jQuery中，对元素的操作是通过对应的jQuery对象实现的。this的使用十分常见，后面我们会举例说明。

# 常用的hover()和toggle() #

## hover() ##

在鼠标事件中，mouseover和mouseout事件通常组合使用。例如，当光标移动到某menu上，出现一个下拉菜单，移出时隐藏该下拉菜单。这样的组合十分常见，jQuery提供了一种简单的方式——hover()。

hover()接收2个函数作为参数，第一个函数表示当鼠标移动到该位置时执行的操作，第二个函数表示鼠标离开时所要执行的操作。我们以上面的menu操作为例，当鼠标移动到menu按钮时，弹出下拉菜单，移出时，隐藏下来菜单：

$('#menu').hover(
      function(){ 
        $('#submenu').show();
      },
      function(){ 
        $('#submenu').hide();
      }
    );
     
      
       1
       2
       3
       4
       5
       6
       7
       8

该事件可以用以下图示表示：

![Center][]

## toggle() ##

toggle()与hover()的用法十分相似，它接收若干个函数作为参数。第一次点击时执行第一个函数，第二次点击时执行第二个函数……，当执行到最后一个函数的时候，循环回第一个函数。

我们常用的是传入2个函数作为参数，比如第一次点击某个标题，显示段落内容，再次点击隐藏段落内容：

$('.h2').hover(
      function(){ 
        $(this).next(.content).show();
      },
      function(){ 
        $(this).next(.content).hide();
      }
    );
     
      
       1
       2
       3
       4
       5
       6
       7
       8

[Center]: /images/20220717/7616bf0408154dd0a11c68d1372ea89e.png