jQuery事件详解

什么是事件

事件通常由用户与网页的交互触发，例如单击链接或按钮时，将文本输入到输入框或文本区域，在选择框中进行选择，按下键盘上的键，鼠标指针移动等。在某些情况下，浏览器本身可以触发事件，例如页面加载和卸载事件。

jQuery的通过为大多数原生浏览器事件的事件的方法提高了基本的事件处理机制，其中的一些方法是ready()，click()，keypress()，focus()，blur()，change()，等。例如，当DOM就绪执行一些JavaScript代码，你可以使用jQueryready()方法，像这样：

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

一般来说，事件可以分为四大类——鼠标事件、键盘事件、表单事件和文档/窗口事件。以下部分将一一简要概述所有这些事件以及相关的 jQuery 方法。

鼠标事件

当用户单击某个元素、移动鼠标​​指针等时会触发鼠标事件。这里有一些常用的 jQuery 方法来处理鼠标事件。

该click()方法

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>

jQueryclick()方法将事件处理函数附加到所选元素以进行“单击”事件。当用户单击该元素时，会执行附加功能。以下示例将在<p>单击时隐藏页面上的元素。

该dblclick()方法

jQuerydblclick()方法为“dblclick”事件将事件处理函数附加到所选元素。当用户双击该元素时，会执行附加的函数。以下示例将在<p>双击时隐藏元素。

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>

该hover()方法

jQueryhover()方法将一个或两个事件处理函数附加到所选元素，当鼠标指针进入和离开元素时执行。第一个函数在用户将鼠标指针放在元素上时执行，而第二个函数在用户从该元素上移除鼠标指针时执行。

下面的示例将<p>在您将光标放在元素上时突出显示元素，当您移除光标时，突出显示将被取消。

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>

该mouseenter()方法

jQuerymouseenter()方法将一个事件处理函数附加到选定的元素，当鼠标进入一个元素时执行该函数。下面的示例将<p>在您将光标放在元素上时向元素添加类高亮显示。

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>

该mouseleave()方法

jQuerymouseleave()方法将事件处理函数附加到选定元素，当鼠标离开元素时执行该函数。<p>当您从元素中移除光标时，以下示例将从元素中移除类高亮显示。

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

键盘事件

当用户按下或释放键盘上的键时会触发键盘事件。下面是一些常用的 jQuery 方法来处理键盘事件。

该keypress()方法

jQuerykeypress()方法将事件处理函数附加到选定元素(通常是表单控件)，当浏览器从用户接收键盘输入时执行该函数。下面的示例将在 kypress 事件被触发时显示一条消息，以及当您按下键盘上的键时它被触发的次数。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

该keydown()方法

jQuerykeydown()方法将一个事件处理函数附加到选定的元素(通常是表单控件)，当用户第一次按下键盘上的某个键时会执行该函数。下面的示例将在触发 keydown 事件时显示一条消息，以及按下键盘上的键时触发的次数。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

该keyup()方法

jQuerykeyup()方法将事件处理函数附加到选定元素(通常是表单控件)，当用户释放键盘上的键时执行该函数。下面的示例将在触发 keyup 事件时显示一条消息，以及按下并释放键盘上的某个键时触发的次数。

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

表单事件

当表单控件接收或失去焦点或用户修改表单控件值时触发表单事件，例如通过在文本输入中键入文本、在选择框中选择任何选项等。以下是一些常用的 jQuery 方法处理表单事件。

该change()方法

jQuerychange()方法将一个事件处理函数附加到<input>,<textarea>和<select>在其值更改时执行的元素。当您在下拉选择框中选择任何选项时，以下示例将显示一条警报消息。

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

该focus()方法

jQueryfocus()方法将一个事件处理函数附加到选定的元素(通常是表单控件和链接)，并在它获得焦点时执行。以下示例将在文本输入获得焦点时显示一条消息。

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

该blur()方法

jQueryblur()方法将一个事件处理函数附加到表单元素，例如<input>, <textarea>，<select>当它失去焦点时执行。以下示例将在文本输入失去焦点时显示一条消息。

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

该submit()方法

jQuerysubmit()方法将事件处理函数附加到<form>用户尝试提交表单时执行的元素。以下示例将根据您尝试提交表单时输入的值显示一条消息。

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

文档/窗口事件

事件也会在页面 DOM(文档对象模型)准备好或用户调整浏览器窗口大小或滚动等情况下触发。这里有一些常用的 jQuery 方法来处理此类事件。

该ready()方法

jQueryready()方法指定在 DOM 完全加载时要执行的函数。

一旦 DOM 层次结构完全构建并准备好进行操作，以下示例将替换段落文本。

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>

该resize()方法

jQueryresize()方法将事件处理函数附加到当浏览器窗口的大小改变时执行的窗口元素。

以下示例将在您尝试通过拖动角调整浏览器窗口的大小时显示浏览器窗口的当前宽度和高度。

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>

该scroll()方法

jQueryscroll()方法将事件处理函数附加到窗口或可滚动的 iframe 和元素，只要元素的滚动位置发生变化，就会执行该函数。

以下示例将在您滚动浏览器窗口时显示一条消息。

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

以上就是动力节点小编介绍的"jQuery事件详解"，希望对大家有帮助，想了解更多可查看 jQuery教程。动力节点在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。