jQuery和事件

时间:2020-01-09 10:47:07  来源:igfitidea点击:

通过JQuery,可以轻松响应HTML页面中的事件。例如,当鼠标进入某个HTML元素(在其上方),离开鼠标,单击鼠标按钮等时,执行一些JavaScript代码。

这是最常用事件的列表,JQuery可以处理这些事件。实际上,它是用于为相应事件添加事件处理程序的JQuery函数的列表。

  • $(document).ready()
  • click()
  • dblclick()
  • mouseenter()
  • mouseleave()
  • mouseover()
  • mouseout()
  • mousedown()
  • mouseup()
  • mousemove()
  • hover()
  • toggle()
  • focus()
  • blur()
  • keydown()
  • keyup()
  • keypress()

这些函数中的每一个都在以下各节中进行说明。

$(document).ready()

$(document).ready()函数使我们可以在文档完全加载后执行一个函数。该事件在文本JQuery $(document).ready()中进行了更详细的说明,因此在此我将不对该函数进行更详细的介绍。

click()

click()函数将事件处理函数添加到HTML元素,当用户单击HTML元素时将执行该事件处理函数。这是一个例子:

<script type="text/javascript">

$(document).ready(function() {
    
    $('#theDiv').click(function() {
        alert("Div clicked");
        });
    
});
</script>
    
<div id="theDiv">Click this div!</div>

该示例选择带有idtheDiv 的div元素,并向其添加一个点击处理函数。当单击" div"时,将执行点击处理程序函数。

dblclick()

dblclick()函数的作用与click()函数的相似,只是它对双击而不是单击产生反应。

mouseenter()

mouseenter()函数将事件处理函数添加到HTML元素,当鼠标指针进入页面上的HTML元素区域时执行。这是一个例子:

<script type="text/javascript">

$(document).ready(function() {

    $('#theDiv').mouseenter(function() {
        alert("Div entered");
        });

});
</script>

<div id="theDiv">Enter this div!</div>

mouseleave()

mouseleave()函数将事件处理函数添加到HTML元素,当鼠标指针离开页面上的HTML元素区域时执行。因此,它在函数上与mouseenter()相反。

mouseover()+ mouseout()

mouseover()mouseout()函数的工作方式类似于mouseenter()mouseleave(),不同之处在于,如果鼠标悬停在了mouseover()mouseout()也会触发。或者具有事件侦听器的HTML元素的嵌套元素之外。换句话说,如果我们有一个带有4个内部" div"的" div",则当鼠标悬停在每个嵌套的" div"上时,父div的事件处理程序将触发。

通常,这不是我们想要的效果。更常见的是,我们确实想要mouseenter()mouseleave()的效果,而不是mouseover()mouseout()的效果。仅当鼠标进入或者离开父HTML元素时,mouseenter()和mouseleave()才会触发。也不适用于每个子元素。

Ben Nadel在描述" mouseover()/ mouseout()"和" mouseenter()/ mouseleave()"方法之间的差异方面做得非常出色,其中包括一段演示动作差异的视频。这是他的博客文章:

MouseOver / MouseOut与MouseEnter / MouseLeave

mousedown()

当鼠标悬停在HTML元素上时,按下鼠标左键时,mousedown()函数会将事件处理函数添加到执行的HTML元素上。这是一个例子:

<script type="text/javascript">

$(document).ready(function() {

    $('#theDiv').mousedown(function() {
        alert("Mouse down");
        });

});
</script>

<div id="theDiv">Mouse down on this div!</div>

mouseup()

mouseup()函数的作用类似于mousedown(),不同之处在于它是在用户释放鼠标左键时执行的。因此,如果用户按下鼠标左键并按住不放,则不会执行事件处理程序。直到释放鼠标按钮。

如果在按住鼠标左键时鼠标光标离开HTML元素,则该事件也不会触发。当鼠标光标位于添加了事件处理程序函数的HTML元素上方时,必须释放鼠标按钮。因此,如果在元素外部按下鼠标按钮,在按下鼠标按钮的同时鼠标光标进入HTML元素,然后释放鼠标按钮,则事件处理程序函数也将执行。

mousemove()

" mousemove()"函数将事件处理函数添加到HTML元素,如果鼠标在HTML元素内移动,则将执行该事件处理函数。这是一个例子:

<script type="text/javascript">

$(document).ready(function() {

    $('#theDiv').mousemove(function() {
        alert("Mouse move");
        });

});
</script>

<div id="theDiv">Mouse move over this div!</div>

hover()

hover()函数是mouseenter()mouseleave()方法的组合。 " hover()"不仅仅采用一个函数作为参数,而是采用两个。一种函数是在鼠标进入HTML元素时执行的,另一种函数是在鼠标离开HTML元素时执行的。这是一个例子:

<script type="text/javascript">
$(document).ready(function() {

    $('#theDiv').hover(
        function() {
            alert("Div entered");
        },
        function() {
            alert("Div left");
        }
    );

});
</script>

<div id="theDiv">The div...</div>

toggle()

每当单击HTML元素时," toggle()"函数使我们能够执行多个函数之一。这是一个例子:

<script type="text/javascript">
$(document).ready(function() {

    $('#theDiv').toggle(
        function() {
            alert("Div clicked once");
        },
        function() {
            alert("Div clicked twice");
        }
    );

});
</script>

<div id="theDiv">The div...</div>

每当单击" div"时,此示例将在执行两个函数之一之间切换。

我们可以根据需要将尽可能多的函数传递给toggle()(不仅仅是上面的例子中的2个)。

focus()

focus()函数将事件处理函数添加到表单字段,该表单字段获得焦点时执行。这是一个简单的示例:

<script type="text/javascript">
$(document).ready(function() {

    $('#field1').focus(
        function() {
            alert("Focus!");
        }
    );

});
</script>

<input id="field1" type="text">

blur()

blur()函数将事件处理程序函数添加到表单字段,当表单字段失去焦点时执行。换句话说,与focus()函数相反。

keydown()

keydown()函数将事件处理程序添加到表单字段,当表单字段具有焦点时,按下键时将执行该事件处理程序。这是一个例子:

<script type="text/javascript">
$(document).ready(function() {

    $('#field1').keydown(
        function() {
            alert("Key down!");
        }
    );

});
</script>

<input id="field1" type="text">

keyup()

keyup()函数将事件处理程序添加到表单域,当表单域具有焦点时,释放键时将执行该事件处理程序。换句话说,它与keydown()相反。

keypress()

keypress()函数将事件处理程序添加到表单字段,当表单字段具有焦点时,在按下键(按下并释放)时执行该事件处理程序。