三、使用 jQuery 处理事件

本章介绍在 ASP 中处理事件时的一些重要概念。 净使用 jQuery。 本章将讨论以下配方:

  • 响应鼠标事件
  • 响应键盘事件
  • 响应表单事件
  • 使用事件委托将事件附加到未来的控件
  • 只运行一次活动
  • 以编程方式触发事件
  • 使用事件传递数据并使用事件命名空间
  • 分离的事件

简介

事件是当用户与网页交互或某些里程碑(如在浏览器中加载页面)完成时发生的动作。 移动鼠标、按下一个键、单击按钮或链接、在字段中键入文本或提交表单，这些都对应于页面生命周期中引发的常见事件。 这些事件可以是用户发起的，也可以是系统发起的。

事件处理程序是当特定事件发生时执行的函数。 为特定事件编写事件处理程序称为连接或绑定事件。 事件处理程序帮助开发人员利用事件并编写所需的操作。

当处理事件时，务必熟悉一种称为事件委托的机制。 此特性使您能够将单个事件处理程序附加到父元素，而不是将单个事件处理程序附加到每个子元素。 例如，考虑一个无序列表，即一个包含 100 个列表项的ul元素。 与向页面附加 100 个单独的事件处理程序(即每个列表项一个事件处理程序)不同，可以将单个事件处理程序附加到父列表(即无序列表)。 除了优化页面上所需的事件处理程序的数量外，事件委托还可以帮助您将事件连接到现在不存在但将在将来添加的子元素。

事件委派之所以可能是因为事件冒泡。 事件冒泡是这样一个过程:在子元素中发生的事件传递到其父元素，然后传递到其父元素的父元素，以此类推，直到它到达根元素:窗口。 假设页面上有一个表格元素。 当你点击一个表细胞,也就是说,当你点击td元素,click事件将泡沫 DOM 树,这是td——【病人】tr——>table——>body——>html——【t16.1】window,如下图所示:

Introduction

因此，td元素的click事件可以被父table元素拦截，并且附加到表的单个处理程序可以作为所有单个表单元的代表。

然而，某些应用可能需要在特定级别终止事件冒泡。 因此，jQuery 为事件提供了一个.stopPropagation()方法，该方法可以使事件停止在 DOM 树中冒泡。

注意事项

在https://api.jquery.com/category/events可以找到更多关于 jQuery 事件的信息。

jQuery 事件绑定

jQuery 1.7+提供了.on()方法来响应事件。 在此方法之前，我们使用了其他事件结合剂，如.bind()，.live()，.delegate()。 然而，这些方法已被弃用，建议您使用 jQuery 1.7+中的.on()进行事件绑定。 使用这种方法的方法有很多种，如下:

  • Attaching a single event to a handler

    例如，将处理程序附加到按钮控件的click事件，如下所示:

    $ ("#btnTest").on ("click",function (){...});

  • Attaching multiple events to a handler

    例如，将相同的处理程序附加到图像控件的mouseover和mouseout事件，如下所示:

    $ ("#imgTest").on ("mouseover mouseout", function (){...});

  • Attaching different events to different handlers

    例如，将不同的处理程序附加到图像控件的mouseover和mouseout事件，如下所示:

    $ ("#imgTest").on ({ mouseover: function (){...}, mouseout: function (){...} });

  • Event delegation

    例如，将一个事件处理程序附加到父表，而不是每个单独的表行，如下所示:

    $("#tblTest").on("click", "tr", function(){...});

  • Passing data to events

    例如，将数据作为 JSON 字符串传递给事件，如下所示:

    $("btnTest").on("click",{var1: "val1", var2: "val2"}, function(event){...});

现在，让我们转向食谱，进一步了解绑定。

响应鼠标事件

这个配方演示了如何为网页上发生的常见鼠标事件(如mouseover和mouseout)编写事件处理程序。 本例中使用的结构总结如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $(".class") | jQuery 选择器 | 它匹配指定 CSS 类的所有元素。 | | $(this) | jQuery 对象 | 这是指当前的 jQuery 对象 | | .attr("name") 或.attr("name", "value") | jQuery 方法 | 这将返回一个字符串，其中包含第一个匹配元素所需属性的值。它还可以用于将属性设置为所需的值。 | | .appendTo() | jQuery 方法 | 这个将每个匹配的元素追加到目标元素的末尾。 | | input | jQuery 选择器 | 这将选择所有的输入元素。 | | mouseout | jQuery 的事件 | 当鼠标指针离开控件时触发此操作。 它对应于 JavaScript 的mouseout事件。 | | mouseover | jQuery 的事件 | 当鼠标指针进入控件时触发。 它对应于 JavaScript 的mouseover事件。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .parents() | jQuery 方法 | 这将选择 DOM 树中匹配元素的祖先。 | | .remove() | jQuery 方法 | 这将从 DOM 中删除匹配的元素。 | | .removeAttr() | jQuery 方法 | 这将从匹配的元素中删除特定的属性。 | | .text() | jQuery 方法 | 这将返回每个匹配元素的组合文本内容，或者设置每个匹配元素的文本内容。 | | :text | jQuery 选择器 | 这将选择类型为 text 的所有输入元素。 |

准备

要显示页面上鼠标事件的处理，请遵循以下步骤:

  1. Let's start by creating a simple registration page for students, as shown in the following screenshot:

    Getting ready

  2. By moving the mouse pointer over any TextBox control on the page, the corresponding tooltip is displayed using jQuery, as shown here:

    Getting ready

  3. When the mouse pointer moves out of the respective TextBox control, the tooltip becomes invisible.

    注意事项

    当使用控件的ToolTip属性时， NET 默认显示一个简单的工具提示。 这个配方增强了默认的工具提示，并对其应用自定义样式。

  4. 要构建此页面，请创建一个ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将项目命名为Recipe1(或其他合适的名称)。

  5. 将 jQuery 库添加到项目的Scripts文件夹中。
  6. 创建一个新的 web 表单，并在表单中包含 jQuery 库。

  7. Add the following markup to the form to create the registration fields:

    <table> <tr><td>Student Name:</td> <td><asp:TextBox ID="txtStudentName" runat="server" ToolTip="Name as in your Student Card"></asp:TextBox> </td> </tr> <tr><td>Student ID:</td> <td><asp:TextBox ID="txtStudentID" runat="server" ToolTip="Enter your 10 digit Student ID"></asp:TextBox> </td> </tr> <tr><td>Email:</td> <td><asp:TextBox ID="txtEmail" runat="server" ToolTip="Email address for receiving registration notification"></asp:TextBox> </td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnRegister" runat="server" Text="Register" /> </td> </tr> </table>

    注意，每个TextBox控件都定义了一个ToolTip文本。 这是当用户将鼠标指针移动到相应的TextBox控件时将显示的文本。

  8. 在页面的 head元素中，向工具提示添加一个style元素，如下面的代码所示:

怎么做……

将下面的 jQuery 代码添加到页面的<script>块中:

<script type="text/javascript">
  $(document).ready(function () {
    $("input:text").on("mouseover",function(){
      var strTitle = $(this).attr("title");
      $(this).removeAttr("title");
      $("<div class='tooltip'></div>").text(strTitle).appendTo($(this).parents("tr"));
    });
    $("input:text").on("mouseout", function () {
      var strTitle = $(".tooltip").text();
      $(this).attr("title", strTitle);
      $(".tooltip").remove();
    });
  });
</script>

How it works…

该网页的工作原理如下:

  1. 使用Ctrl+S保存应用，并使用F5运行它。 页面在浏览器窗口中加载，通过在控件中移动鼠标指针，可以在TextBox控件旁边看到相应的工具提示。 通过将鼠标指针移出控件，工具提示将消失。

  2. This is made possible by attaching events to both the mouseover and mouseout properties of the TextBox controls as follows:

    $("input:text").on("mouseover",function(){…}); $("input:text").on("mouseout", function(){…});

    提示

    不使用带有mouseover和mouseout事件的.on()事件绑定器，可以使用悬停，它提供了一种快捷机制来连接进入和离开元素的鼠标指针的事件。

  3. In the event handler for mouseover, we need to retrieve the ToolTip text and display it in a div area next to the TextBox control. At runtime, the ToolTip property of an ASP.NET control is rendered as a title property. Thus, the title attribute of the control is retrieved and saved in a local variable:

    var strTitle = $(this).attr("title");

    以防止 ASP。 在显示默认工具提示时，从相应的控件中删除title属性。 删除该属性是可以的，因为我们已经将其值保存在strTitle变量中:

    $(this).removeAttr("title");

  4. 现在，用tooltipCSS 类创建一个div元素。 该类包含用于显示工具提示的必要修饰。 将其文本设置为工具提示文本strTitle。 将这个div元素附加到父表行，即TextBox控件的tr元素:

    $("<div class='tooltip'></div>").text(strTitle).appendTo($(this).parents("tr"));

  5. 在mouseout的事件处理程序中，我们需要删除在第 4 步中创建的div元素，并恢复控件的title属性。 因此，首先，使用 CSS 类选择器检索工具提示文本:

    var strTitle = $(".tooltip").text();

  6. Add this tooltip text to the title attribute of the TextBox control. This is to ensure that the tooltip text for a particular TextBox control is not lost:

    $(this).attr("title", strTitle);

    现在，可以安全地删除第 4 步中创建的div元素，以便通过移出鼠标指针，它将消失。 同样，CSS 类选择器在删除的过程中用于访问div元素:

    $(".tooltip").remove();

参见 also

响应键盘事件配方

响应键盘事件

这个配方演示了如何为一个常见的键盘事件keyup编写一个事件处理程序，该事件处理程序在一个键被释放时触发。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将使用其 ID 选择一个元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .addClass() | jQuery 方法 | 这将向每个匹配的元素添加指定的 CSS 类。 | | keyup | jQuery 的事件 | 当一个键被释放时，这个将被触发。 它对应于 JavaScript 的keyup事件。 | | .length | JavaScript 的财产 | 这会返回字符串的长度。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .prop(propertyName)或.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值。 | | .substring() | JavaScript 函数 | 它提取一个字符串的子字符串。 | | .text() | jQuery 方法 | 这将返回每个匹配元素的组合文本内容，或者设置每个匹配元素的文本内容。 | | .toString() | JavaScript 函数 | 这将对象转换为字符串数据类型。 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值。 |

准备

要创建一个响应键盘事件的页面，请遵循以下步骤:

  1. We will create the following form that keeps a check on the number of characters entered by a user in a multiline textbox field. When characters are entered in the field, the second textbox displays the number of the remaining characters that can be entered, with the limit set to 100, as shown in the following screenshot:

    Getting ready

    当达到最大字符数，即 100，计数减少为 0，多行文本框字段阻止更多字符的输入，如下图所示:

    Getting ready

  2. 要开始使用这个应用，请创建一个新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe2(或其他合适的名称)。

  3. 在项目中创建一个Scripts文件夹，并将 jQuery 库文件复制到此文件夹中。
  4. 添加一个新的 web 表单到项目中，并在表单中包含 jQuery 库。

  5. Add the following markup to the web form to create the page, as shown in the preceding screenshot:

    <h2> Enter your comments below:</h2> <asp:TextBox ID="txtComments" runat="server" Columns="40" Rows="5" TextMode="MultiLine"></asp:TextBox> <br/><br/> <asp:Label ID="lblCount" runat="server" Text="Characters remaining: "></asp:Label><asp:TextBox ID="txtCount" runat="server" MaxLength="3" Width="50px"></asp:TextBox> <br/><br/> <asp:Label ID="lblError" runat="server"></asp:Label>

    注意，txtComments字段的TextMode属性被设置为MultiLine。 用于显示剩余字符计数的txtCount文本框将MaxLength设置为3，因为它将仅用于显示从 0 到 100 的数字。 在表单的末尾有一个lblError标签控件，用于在字符数量超过允许的最大限制时显示错误消息。

  6. Add the following CSS style to the page:

    <style type="text/css"> .red{ color:red; } </style>

    此样式将应用于错误消息。

怎么做……

在页面的<script>块中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function () {
    $("#<%=txtCount.ClientID%>").val("100");
    $("#<%=txtCount.ClientID%>").prop("readonly",true);
    $("#<%=lblError.ClientID%>").addClass("red");
    $("#<%=txtComments.ClientID%>").on("keyup", function () 
    {
      var maxChars = 100;
      var count = $(this).val().length;
      var remChars = maxChars - count;
      if (remChars >= 0) {
        $("#<%=txtCount.ClientID%>").val(remChars.toString());
      }else{
        $(this).val($(this).val().substring(0,maxChars));
        $("#<%=txtCount.ClientID%>").val("0");
        $("#<%=lblError.ClientID%>").text("You have reached the maximum characters allowed");
      }
    });
  });
</script>

How it works…

页面工作原理如下:

  1. Save the page using Ctrl + S, and run it using F5. When the document is ready, the number of remaining characters in the textbox below the comments field is set to 100 characters in the following statement:

    $("#<%=txtCount.ClientID%>").val("100");

    这个文本框也被设置为readonly，这样用户就不能对其内容进行更改:

    $("#<%=txtCount.ClientID%>").prop("readonly",true);

  2. 一个 CSS 类被添加到错误标签中，因此它以红色显示错误消息:

    $("#<%=lblError.ClientID%>").addClass("red");

  3. An event handler is wired to the keyup event of the multiline textbox using the .on() method as follows:

    $("#<%=txtComments.ClientID%>").on("keyup", function () {...});

    提示

    使用keyup事件代替keydown和keypress事件，以便在字符添加到文本框后进行字符计数计算。 当使用keydown或keypress时，jQuery 代码在字符添加到文本框之前执行，因此给出不正确的字符计数。 试着自己把keyup改为keydown或keypress。

  4. 在前一个事件处理程序中，首先声明一个变量来存储多行文本框中允许的最大字符，并将其值设置为100字符:

    var maxChars = 100;

  5. 多行文本框中任意时刻的字符数将保存在另一个变量中:

    var count = $(this).val().length;

  6. 最大字符数和实际字符数之间的差值被计算并保存在第三个变量中:

    var remChars = maxChars - count;

  7. If the difference is positive or zero, the number of available characters, that is, the difference calculated earlier, is displayed in the second textbox below the comments field:

    if (remChars >= 0) { $("#<%=txtCount.ClientID%>").val(remChars.toString()); }

    否则，只使用substring函数从注释字段中提取前 100 个字符并显示在字段中。 在第二个文本框中，字符数被设置为0，并且在页面末尾使用标签控件显示一条错误消息:

    else{ $(this).val($(this).val().substring(0,maxChars)); $("#<%=txtCount.ClientID%>").val("0"); $("#<%=lblError.ClientID%>").text("You have reached the maximum characters allowed"); }

参见 also

响应表单事件配方

响应表单事件

这个配方演示了如何响应在 web 表单上的控件上触发的、focus和blur等事件。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .addClass() | jQuery 方法 | 这会将指定的 CSS 类添加到每个匹配的元素中。 | | [attribute!= "value"] | jQuery 选择器 | 这将选择指定属性不等于value字符串的元素。 | | blur | jQuery 的事件 | 当一个元素失去焦点时触发。 它对应于 JavaScript 的blur事件。 | | .each() | jQuery 方法 | 这将遍历匹配的元素，并为每个元素执行一个函数。 | | focus | jQuery 的事件 | 当一个元素获得焦点时，它就会触发。 它对应于 JavaScript 的focus事件。 | | :input | jQuery 选择器 | 它匹配input、button、select和textarea元素。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .prop(propertyName)或.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值。 | | .removeClass() | jQuery 方法 | 这将从每个匹配的元素中删除指定的 CSS 类。 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值。 |

准备

按照以下步骤创建一个用于事件处理的表单:

  1. We will build a very basic account registration form, as shown in the following screenshot:

    Getting ready

    表单上的文本框字段显示默认文本。 当光标聚焦在一个特定的TextBox控件上时，默认文本将消失，该控件将以蓝色突出显示，如上面的截图所示。 类似地，当DropDownList控件处于活动状态时，高亮显示也会应用于该控件。

    当光标移出控件时，如果控件为空，即没有向控件中输入数据，则会用红色高亮显示验证错误，如下图所示:

    Getting ready

  2. 要启动，首先创建一个ASP.NET Web 应用项目在 Visual Studio 中使用空的模板，并将其命名为Recipe3(或其他合适的名称)。

  3. 在项目中创建一个Scripts文件夹，并将 jQuery 库文件复制到此文件夹中。
  4. 添加一个新的 web 表单到项目中，并在页面中包含 jQuery 库。

  5. 将以下标记添加到 web 表单:

    <table> <tr> <td colspan="2"><asp:Label ID="lblName" runat="server" Text="Name"></asp:Label> </td> </tr> <tr> <td><asp:TextBox ID="txtFirst" runat="server" ToolTip="First"></asp:TextBox> </td> <td><asp:TextBox ID="txtLast" runat="server" ToolTip="Last"></asp:TextBox> </td> </tr> <tr> <td colspan="2"><asp:Label ID="lblEmail" runat="server" Text="Email"></asp:Label> </td> </tr> <tr> <td colspan="2"><asp:TextBox ID="txtEmail" runat="server" ToolTip="@email.com"></asp:TextBox> </td> </tr> <tr> <td colspan="2"><asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label> </td> </tr> <tr> <td colspan="2"><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> </td> </tr> <tr> <td colspan="2"><asp:Label ID="lblConfirmPassword" runat="server" Text="Confirm Password"></asp:Label> </td> </tr> <tr> <td colspan="2"><asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password"></asp:TextBox> </td> </tr> <tr> <td colspan="2"><asp:Label ID="lblGender" runat="server" Text="Gender"></asp:Label> </td> </tr> <tr> <td colspan="2"> <asp:DropDownList ID="ddlGender" runat="server"> <asp:ListItem Text="--Please select--" Value=""></asp:ListItem> <asp:ListItem Text="Male" Value="Male"></asp:ListItem> <asp:ListItem Text="Female" Value="Female"></asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> <asp:Button ID="btnReset" runat="server" Text="Reset" /> </td> </tr> </table>

  6. Include the following styles in the head element of the page:

    <style type="text/css"> .active{ border-color:blue; } .invalid{ border-color:red; } .backgroundtext{ color:grey; } </style>

    样式应用于页面上的当前控件，即具有光标的控件。 样式应用于无效控件:其中没有输入数据的控件。 backgroundtext样式应用于TextBox控件中显示的默认文本。

怎么做……

在页面的<script>块中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function () {
    $(":input[type!=submit]").each(function () {
      if ($(this).val() == "") {
        $(this).addClass("backgroundtext");
        $(this).val($(this).prop("title"));
      }
    });
    $(":input[type!=submit]").on({
      focus: function () {
        if ($(this).val() == $(this).prop("title")) {
          $(this).removeClass("backgroundtext");
          $(this).removeClass("invalid");
          $(this).val("");
        }
        $(this).addClass("active");
      },
      blur: function () {
        $(this).removeClass("active");
        if ($(this).val() == "") {
          $(this).addClass("backgroundtext");
          $(this).addClass("invalid");
          $(this).val($(this).prop("title"));
        }else {
          $(this).removeClass("invalid");
        }
      }
   });
  });
</script>

How it works…

页面工作原理如下:

  1. When the form loads at runtime, all controls except the button controls are initialized by executing the .each() method:

    $(":input[type!=submit]").each(function () {...});

    属性筛选器确保type = submit的input元素，即按钮控件不包含在初始化中。

  2. For each control on the form filtered using the preceding selector, if the control is empty, then the default text is displayed by setting the ToolTip text to its text value. The CSS class of the control is also set to backgroundtext:

    if ($(this).val() == "") { $(this).addClass("backgroundtext"); $(this).val($(this).prop("title")); }

    注意事项

    在运行时，ToolTip 作为title属性呈现。 因此，$(this).prop("title")给出了工具提示文本。

  3. For all the controls on the form, excluding the button controls, the .on() method is used to bind event handlers to the focus and blur events, as follows:

    $(":input[type!=submit]").on({focus: function () {...}, blur: function () {...}});

    这里，绑定器分别用于将不同的事件处理程序附加到focus和blur事件。

  4. Now, let's discuss the individual event handlers, starting with the one for the focus event. When any control receives focus, we want the border color to change to blue, indicating that this is the current or active control. Also, if the control is empty, that is, if its text is set to the default value, then the default text should be cleared and any other styles should be removed. This can be achieved as follows:

    focus: function () { $(this).addClass("active"); if ($(this).val() == $(this).prop("title")) { $(this).val(""); $(this).removeClass("backgroundtext"); $(this).removeClass("invalid"); } }

    在blur的事件处理程序中，首先，由于控件不再是活动控件，相应的样式应该被删除。 其次，我们需要检查数据是否已经输入到控件中。 如果字段为空，其边框颜色将更改为红色。 此外，默认文本显示与相应的样式:

    blur: function () { $(this).removeClass("active"); if ($(this).val() == "") { $(this).addClass("backgroundtext"); $(this).addClass("invalid"); $(this).val($(this).prop("title")); }else { $(this).removeClass("invalid"); } }

参见 also

分离事件配方

使用事件委托将事件附加到未来的控件

这个配方演示了事件委派和事件冒泡。 通过在运行时添加元素，我们还将演示委托如何帮助您将事件附加到未来的控件。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | .addClass() | jQuery 方法 | 这会将指定的 CSS 类添加到每个匹配的元素中。 | | .append() | jQuery 方法 | 这将在每个匹配元素的末尾附加元素。 | | [attribute= "value"] | jQuery 选择器 | 这将选择具有指定属性等于value字符串的元素。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | dblclick | jQuery 的事件 | 当您双击一个元素时就会触发。 它对应于 JavaScript 的dblclick事件。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .removeClass() | jQuery 方法 | 这将从每个匹配的元素中删除指定的 CSS 类。 |

准备

按照下面列出的步骤创建一个窗体来演示事件冒泡和委托:

  1. We will create a simple web page that displays data rows from an XML file. A new data row is added at runtime so that we can see the impact with and without delegation:

    Getting ready

    当您双击某一行的时，它将高亮显示，如下面的截图所示。 用鼠标单击同一行，高亮部分可以删除:

    Getting ready

  2. 要创建前面的页面，请启动新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe4(或任何其他合适的名称)。

  3. 在项目中创建一个Scripts文件夹，并将 jQuery 库文件添加到此文件夹中。
  4. 将App_Data文件夹添加到项目中，在解决方案资源管理器选项卡中右键单击项目，并导航到添加|添加 ASP。 |App_Data。
  5. 右键单击App_Data文件夹，转到添加|XML 文件。 在弹出的对话框中，将文件命名为StudentData.xml，然后单击OK按钮。

  6. 现在，在Solution Explorer选项卡中双击前面的 XML 文件以打开该文件。 输入一些学生记录样本，结构如下:

    <StudentData> <Student> <ID>...</ID> <Name>...</Name> <Score>...</Score> <Module>...</Module> </Student> ... </StudentData>

  7. 添加一个新的 web 表单到项目中，并在页面中包含 jQuery 库。

  8. 导航到工具箱|Data，将XMLDataSource 和Repeater控件添加到窗体中。

  9. In the Design view of the web form, click on the small arrow icon in the top-right corner of the XMLDataSource option to open its configuration menu, as shown here:

    Getting ready

  10. From the preceding menu, select Configure Data Source, go to the path of the StudentData.xml file, and set its XPath to /StudentData/Student, as shown in the following screenshot. Click on the OK button:

    Getting ready

  11. Now that the XMLDataSource option has been configured in the Design view, click on the small arrow in the top-right corner of the Repeater control to open the Repeater Tasks menu. Select the XMLDataSource option, that was configured earlier, from the Choose Data Source dropdown:

    Getting ready

  12. 将以下标记添加到Repeater控件中，以便它显示学生记录的字段:

    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1"> <HeaderTemplate> <table id="StudentData"> <thead> <tr> <th>ID</th> <th>Student Name</th> <th>Module</th> <th>Score</th> </tr> </thead> </HeaderTemplate> <ItemTemplate> <tr> <td><%# XPath("ID") %></td> <td><%# XPath("Name") %></td> <td><%# XPath("Module") %></td> <td><%# XPath("Score") %></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater>

  13. 在页面的head元素中包含以下样式。 该样式将应用于需要突出显示的行:

    <style type="text/css"> .highlight{ background-color:greenyellow; } </style>

怎么做……

在网页的<script>块中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function () {
    $("table[id=StudentData] ").on("dblclick","tr", function () {
      $(this).addClass("highlight");
    });
    $("table[id=StudentData] ").on("click", "tr", function () {
      $(this).removeClass("highlight");
    });
    $("table[id=StudentData]").append("<tr><td>HT2015051</td><td>Abraham A.</td><td>ISR</td><td>70</td></tr>");
  });
</script>

How it works…

页面工作原理如下:

  1. 用Ctrl+S保存页面，然后用F5运行。 页面加载后，Repeater控件显示来自 XML 文件的学生数据。

  2. 不是将双击事件附加到表行，而是使用.on()事件绑定器将事件处理程序附加到父表。 元素被指定为筛选允许触发事件的子代元素的选择器。 因此，当您双击一个表行时，事件气泡上升到父表，并执行相应的dblclick事件处理程序:

    $("table[id=StudentData] ").on("dblclick","tr", function () { $(this).addClass("highlight"); });

  3. 类似地，click事件处理程序被附加到父表而不是tr元素。 通过单击任意一行，可以删除高亮显示:

    $("table[id=StudentData] ").on("click", "tr", function () { $(this).removeClass("highlight"); });

  4. At runtime, a new table row can be appended using the .append() function as follows:

    $("table[id=StudentData]").append("<tr><td>HT2015051</td><td>Abraham A.</td><td>ISR</td><td>70</td></tr>");

    这一行显示了与其他行的相同的行为; 也就是说，你可以双击它来添加一个背景颜色，然后点击它一次来删除背景颜色。

  5. Now, to see the behavior of a dynamically added row in the absence of event delegation, modify the event bindings to attach the events to the table row instead of the parent table, as follows:

    $("table[id=StudentData] tr").on("dblclick", function () { $(this).addClass("highlight"); }); $("table[id=StudentData] tr").on("click", function () { $(this).removeClass("highlight"); });

    现在，当在运行时添加新行时，它不会显示click和dbclick事件上所需的行为。

参见 also

响应鼠标事件配方

只跑一次比赛

某些应用只需要触发一次事件处理程序。 如果使用.on()方法连接事件处理程序，则每次事件发生时都会触发该事件处理程序，这在这种情况下可能是不希望的。 本菜谱演示了如何附加一次性调用的事件处理程序。 本例中使用的结构总结如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $(".class") | jQuery 选择器 | 它匹配指定 CSS 类的所有元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | [attribute= "value"] | jQuery 选择器 | 这将选择具有指定属性等于value字符串的元素。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | .hide() | jQuery 方法 | 这将隐藏匹配的元素。 | | .one() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 处理程序最多执行一次。 | | .show() | jQuery 方法 | 这会显示匹配的元素。 |

准备

要创建只执行一次事件处理程序的表单，请遵循以下步骤:

  1. We will build the web form, as shown in the following screenshot, to display the Employee records from the Northwind database. The page has a See More... link to display additional details about the employee:

    Getting ready

    当您点击链接时，页面上会显示附加的详细信息，如下图所示:

    Getting ready

    The见更多… 链接被设计为只工作一次。 后续单击该链接将不会触发任何事件处理程序。

    提示

    Northwind 是一个开源数据库，可以从https://northwinddatabase.codeplex.com下载。 从 MSDN 页面https://msdn.microsoft.com/en-us/library/8b6y4c7s.aspx了解更多关于如何安装示例数据库

  2. 为了构建前面的页面，我们需要创建一个ASP.NET Web 应用项目，并将其命名为Recipe5(或其他合适的名称)。

  3. 向项目中添加一个Scripts文件夹，并将 jQuery 库添加到该文件夹中。
  4. 向项目中添加一个新的 web 表单。 在表单中包含 jQuery 库。
  5. 以Design模式打开窗体。 转到工具箱|Data，在窗体中添加SqlDataSource控件。

  6. In the Design mode, click on the small arrow icon that appears in the top-right corner of the SqlDataSource control on mouseover. Click on Configure Data Source, as shown here:

    Getting ready

  7. Follow the wizard, and add a new database connection. In the dialog box, enter your server name, select the Northwind catalog, and click on OK:

    Getting ready

    注意事项

    请注意，本书中所有数据库驱动的示例都使用 Windows 身份验证。 因此，在 MS SQL Server 中，给 windows 帐户访问 Northwind 数据库的权限是很重要的。

  8. In the Configure the Select Statement dialog box, as shown in the following screenshot, choose Specify columns from a table or view from the radio button list, and select the Employees table from the drop-down menu. Check the columns required to be displayed on the page, such as EmployeeID, LastName, FirstName, Country, HomePhone, and Notes. Click on the Next button:

    Getting ready

    测试查询，并通过单击Finish按钮来完成向导。

  9. Now, in the Design mode, drag and drop a FormView control by navigating to Toolbox | Data. Click on the small arrow icon that appears in the top-right corner of the FormView control on mouseover, and click on Choose Data Source. Select SqlDataSource1 from the drop-down menu, as shown here:

    Getting ready

  10. 在源模式中向FormView控件添加以下标记:

    <asp:FormView ID="FormView1" runat="server" AllowPaging="True" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"> <ItemTemplate> <table id="EmployeeData"> <tr> <td>EmployeeID:</td> <td><asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Eval("EmployeeID") %>' /></td> </tr> <tr> <td>Last Name:</td> <td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Bind("LastName") %>' /></td> </tr> <tr> <td>First Name:</td> <td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Bind("FirstName") %>' /></td> </tr> <tr> <td>Country:</td> <td><asp:Label ID="CountryLabel" runat="server" Text='<%# Bind("Country") %>' /></td> </tr> <tr> <td>Home Phone:</td> <td><asp:Label ID="HomePhoneLabel" runat="server" Text='<%# Bind("HomePhone") %>' /></td></tr> <tr> <td colspan="2"> <asp:HyperLink ID="lnkMore" runat="server" CssClass="morelink">See More...</asp:HyperLink> </td> </tr> </table> <asp:Label ID="lblMoreData" CssClass="moredata" runat="server" Text='<%#Bind("Notes") %>'></asp:Label> <br/> </ItemTemplate> </asp:FormView>

  11. Add the following styles to the head element of the page:

    <style type="text/css"> .moredata{ color:grey; } .morelink{ cursor:pointer; color:maroon; text-decoration:underline; } </style>

    CSS 类应用于页面上显示的员工的附加详细信息。 morelinkCSS 类用于样式链接。

怎么做……

将下面的 jQuery 代码添加到页面的<script>块中:

<script type="text/javascript">
  $(document).ready(function () {
    $(".moredata").hide();
    $("table[id=EmployeeData]").one("click", "a.morelink", function () {
      $(".moredata").show();
    });
  });
</script>

How it works…

页面工作原理如下:

  1. 保存应用并使用F5运行它。 该页面从Employees表加载第一条记录，并将其显示在FormView控件中。 可以使用页面底部的页码来浏览记录。

  2. Each page displays the basic employee details, such as the name, country, and home phone number. The notes related to the employee are hidden using the following code:

    $(".moredata").hide();

    前面的选择器使用分配给FormView项模板中的lblMoreData标签控件的 CSS 类。

  3. A See More... hyperlink provided in the FormView option enables you to view the notes related to the employee record. This is done using the .one() event binder attached to the parent table:

    $("table[id=EmployeeData]").one("click", "a.morelink", function () { $(".moredata").show(); });

    使用.one()而不是.on()可以最多调用一次事件处理程序。 一旦事件处理程序被执行，它将与元素分离，这样就不能重新调用它。

    请注意，事件处理程序被附加到父元素，而不是直接将其附加到超链接。 带有morelinkCSS 类的anchor元素作为可以引发事件的子选择器传递。

    一旦触发click事件，包含注释的label控件将使用.show()方法显示。

参见 also

通过事件传递数据并使用事件命名空间配方

以程序方式触发事件

这个配方演示了.trigger()方法以编程方式调用事件的用法。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $(".class") | jQuery 选择器 | 它匹配指定 CSS 类的所有元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .attr("name")或.attr("name", "value") | jQuery 方法 | 这将返回一个字符串，其中包含第一个匹配元素所需的属性值。 它还可以用于将属性设置为所需的值。 | | [attribute= "value"] | jQuery 选择器 | 这将选择具有指定属性等于value字符串的元素。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | dblclick | jQuery 的事件 | 当您双击一个元素时，它就会触发。 它对应于 JavaScript 的double-click事件。 | | eval() | JavaScript 函数 | 这将执行 JavaScript 表达式。 | | .find() | jQuery 方法 | 这将查找与过滤器匹配的所有元素。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .trigger() | jQuery 方法 | 这将执行附加到匹配元素的处理程序和行为。 |

准备

要创建一个以编程方式触发事件的网页，请遵循以下步骤:

  1. We will build a web page, as shown in the following screenshot. The page displays the list of products from the Northwind database in a GridView control. The GridView control has an Edit column containing a LinkButton control to edit any particular row of data:

    Getting ready

    一般情况下，点击某一行的Edit链接时，记录进入编辑模式，显示Update和Cancel链接。 在本例中，当用户双击某一行时，我们将使用 jQuery 触发Edit链接的单击。 因此，通过编程方式激活特定行的编辑模式，如下图所示:

    Getting ready

  2. 要构建前面的页面，请创建一个ASP.NET Web 应用项目，并将其命名为Recipe6(或任何其他合适的名称)。

  3. 向项目中添加一个Scripts文件夹，并将 jQuery 库添加到该文件夹中。
  4. 向项目中添加一个新的 web 表单。 在 web 表单中包含 jQuery 库。

  5. Now, right-click on the project in Solution Explorer, and go to Add | New Item. From the dialog box, select Data in the left-hand side panel and ADO.NET Entity Data Model in the middle panel. Enter the name ProductModel in the text field shown in the following screenshot, and click on the Add button:

    Getting ready

  6. In the Entity Data Model Wizard, select EF Designer from database, and click on the Next button:

    Getting ready

  7. Create a connection to the Northwind database running on MS SQL Server, and save the connection string in web.config as NorthwindEntities. Click on the Next button:

    Getting ready

  8. On the next screen, which displays the database objects, check the Products table by navigating to Tables | dbo | Products, and click on the Finish button:

    Getting ready

  9. 现在，通过导航到工具箱|Data，将GridView控件添加到 web 窗体。

  10. In the code-behind file (Default.aspx.vb or Default.aspx.cs), add the following method to retrieve records from the Products table.

    对于 VB，代码如下:

    Public Function GridView1_GetData() As IQueryable Dim db As NorthwindEntities = New NorthwindEntities() Dim queryResults = From prod In db.Products Order By prod.ProductID Select prod.ProductID, prod.ProductName, prod.UnitPrice, prod.UnitsInStock Return queryResults End Function

    对于 c#，代码如下:

    public IQueryable GridView1_GetData() { NorthwindEntities db = new NorthwindEntities(); var query = from prod in db.Products orderby prod.ProductID select new ProductID = prod.ProductID, ProductName = prod.ProductName, UnitPrice = prod.UnitPrice, UnitsInStock = prod.UnitsInStock }; return query; }

  11. 将GridView的SelectMethod设置为GridView标记中的上述方法:

    SelectMethod="GridView1_GetData"

  12. 为页面的head元素中的GridView中的Edit链接定义一个 CSS 样式:

    <style type="text/css"> .edit{ color:blue; cursor:pointer; } </style>

  13. 页面的完整标记(不包括应用于GridView的样式)如下:

怎么做……

将下面的 jQuery 代码添加到页面的<script>块中:

<script type="text/javascript">
  $(document).ready(function () {
    $("table[id=GridView1]").on("dblclick", "tr", function () {
      $(this).find(".edit").trigger("click");
    });
    $(".edit").click(function () {
      eval($(this).attr('href'));
    });
  });
</script>

How it works…

页面工作原理如下:

  1. 当您运行该页面时，产品列表显示在GridView控件中。
  2. 现在，双击任意一行。 您将注意到，这将模拟单击该特定行的Edit链接。 这可以通过将一个事件处理程序附加到行元素的dblclick事件，如下所示:
  3. 事件处理程序使用editCSS 类选择该行中的Edit链接，使用.trigger()方法调用此链接上的click事件，如下所示:

  4. Finally, an event handler is attached to the click event of the Edit link:

    $(".edit").click(function () {...});

    这个事件处理程序使用 JavaScript 的eval()函数调用附加在Edit链接上的href属性:

    eval($(this).attr('href'));

参见 also

使用事件委托将事件附加到未来控件配方

通过事件传递数据并使用事件命名空间

在这个配方中，我们将演示如何使用.trigger()方法传递事件数据。 事件数据将以JavaScript 对象表示法(JSON)格式定义，这只是名称/值对的集合。 我们还将了解如何在同一事件类型上使用名称空间来执行不同的处理程序。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | :checked | jQuery 选择器 | 这将选择所有选中的复选框和单选按钮。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | .find() | jQuery 方法 | 这将查找匹配筛选器的所有元素。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .trigger() | jQuery 方法 | 这将执行附加到匹配元素的处理程序和行为。 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值。 |

准备

要通过事件传递数据并使用事件命名空间，请遵循以下步骤:

  1. We will create a simple web page with two RadioButtonList controls and one Button control as follows:

    Getting ready

    当您单击第一个RadioButtonList控件中的任意单选按钮时，Button控件的click事件将以编程方式调用，并将所选单选按钮上的信息传递给事件处理程序。 事件数据显示在 JavaScript 警告消息中，如下截图所示:

    Getting ready

    当您单击第二个RadioButtonList控件中的任意单选按钮时，将再次以编程方式调用Button控件的click事件处理程序，并传递事件数据。 然而，这一次执行了不同的处理程序，事件数据显示在 JavaScript 的确认框中，如下所示:

    Getting ready

  2. 首先，创建一个ASP.NET Web 应用项目，并将其命名为Recipe7(或任何其他合适的名称)。

  3. 向项目中添加一个Scripts文件夹，并将 jQuery 库添加到该文件夹中。
  4. 向项目中添加一个新的 web 表单。 在表单中包含 jQuery 库。

  5. 在页面中添加以下标记:

    <table> <tr> <td><fieldset> <asp:RadioButtonList ID="RadioButtonList1" runat="server" Width="120px"> <asp:ListItem Text="Type 1" Value="1"></asp:ListItem> <asp:ListItem Text="Type 2" Value="2"></asp:ListItem> </asp:RadioButtonList> </fieldset></td> <td><fieldset> <asp:RadioButtonList ID="RadioButtonList2" runat="server" Width="120px"> <asp:ListItem Text="Type 3" Value="3"></asp:ListItem> <asp:ListItem Text="Type 4" Value="4"></asp:ListItem> </asp:RadioButtonList> </fieldset></td> </tr> </table><br /> <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

怎么做……

在页面的<script>块中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function () {
    $("#<%=RadioButtonList1.ClientID%>").on("click", function () {
      var strValContent = $(this).find(":checked").val();
      var data = { txtContent: "Group 1", valContent: strValContent };
      $("#<%=btnSubmit.ClientID%>").trigger("click.radioclick1", data);
    });
    $("#<%=RadioButtonList2.ClientID%>").on("click", function () {
      var strValContent = $(this).find(":checked").val();
      var data = { txtContent: "Group 2",  valContent: strValContent };
      $("#<%=btnSubmit.ClientID%>").trigger("click.radioclick2", data);
    });
    $("#<%=btnSubmit.ClientID%>").on("click.radioclick1", function (evt,data) {
    if (data != null){
      var strMessage = "You have selected the following: \r\n"+
        "Event Group: " + data.txtContent + "\r\n"   +
        "Type: " + data.valContent ;
      alert(strMessage);
    }
  });
  $("#<%=btnSubmit.ClientID%>").on("click.radioclick2", function (evt, data) {
    if (data != null){
      var strMessage = "You have selected the following: \r\n" +
        "Event Group: " + data.txtContent + "\r\n" +
        "Type: " + data.valContent;
      window.confirm(strMessage);
    }
  });
});
</script>

How it works…

  1. 当页面加载时，当您单击第一个RadioButtonList控件中的任意单选按钮时，其click事件对应的事件处理程序将被执行:

    $("#<%=RadioButtonList1.ClientID%>").on("click", function () {...});

  2. The preceding event handler first reads the selected value of the radio button:

    var strValContent = $(this).find(":checked").val();

    然后形成一个 JSON 字符串，将前面的值作为事件数据传递:

    var data = { txtContent: "Group 1", valContent: strValContent };

    最后，它用所需的click.radioclick1命名空间触发Button控件的click事件，并传递所需的事件数据:

    $("#<%=btnSubmit.ClientID%>").trigger("click.radioclick1", data);

  3. When the click event is invoked programmatically, its corresponding event handler with the click.radioclick1 namespace is executed:

    $("#<%=btnSubmit.ClientID%>").on("click.radioclick1", function (evt,data) {...});

    这个处理程序读取事件数据。 如果数据不为空，则在警告消息中显示如下:

    if (data != null){ var strMessage = "You have selected the following: \r\n"+ "Event Group: " + data.txtContent + "\r\n" + "Type: " + data.valContent ; alert(strMessage); }

  4. 类似地，当您单击第二个RadioButtonList控件中的单选按钮时，将执行其click事件对应的事件处理程序:

    $("#<%=RadioButtonList2.ClientID%>").on("click", function ( ) {...});

  5. The preceding event handler first reads the selected value of the radio button:

    var strValContent = $(this).find(":checked").val();

    然后形成一个 JSON 字符串作为事件数据传递:

    var data = { txtContent: "Group 2", valContent: strValContent };

    最后，它用所需的click.radioclick2命名空间触发Button控件的click事件，并传递所需的事件数据:

    $("#<%=btnSubmit.ClientID%>").trigger("click.radioclick2", data);

  6. When the click button is invoked programmatically, this time, the event handler with the click.radioclick2 namespace is executed:

    $("#<%=btnSubmit.ClientID%>").on("click.radioclick2", function (evt,data) {...});

    这个处理程序读取事件数据。 如果数据不是null，则会在confirm消息中显示如下信息:

    if (data != null){ var strMessage = "You have selected the following: \r\n" + "Event Group: " + data.txtContent + "\r\n" + "Type: " + data.valContent; window.confirm(strMessage); }

参见 also

以编程方式触发事件

分离事件

这个配方演示了.off()方法的使用，以从页面元素分离事件处理程序。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .addClass() | jQuery 方法 | 这会将指定的 CSS 类添加到每个匹配的元素中。 | | blur | jQuery 的事件 | 当一个元素失去焦点时触发。 它对应于 JavaScript 的blur事件。 | | :checked | jQuery 选择器 | 这将选择所有选中的复选框和单选按钮。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | focus | jQuery 的事件 | 当元素接收到焦点时触发。 它对应于 JavaScript 的focus事件。 | | :input | jQuery 选择器 | 它匹配input、button、select和textarea元素。 | | .is() | jQuery 方法 | 如果匹配的元素满足给定条件，则返回一个布尔值。 | | .off() | jQuery 方法 | 这将从匹配的元素中删除事件处理程序。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .removeClass() | jQuery 方法 | 这将从每个匹配的元素中删除指定的 CSS 类。 |

准备

要创建一个窗体来演示事件的分离，请遵循以下步骤:

  1. Create the following sample page consisting of a few TextBox controls. There is a CheckBox control on the top of the page. When the CheckBox control is checked, the current control with focus is highlighted with a blue border, as shown in the following screenshot:

    Getting ready

    当CheckBox控件未选中时，主动控件不再像在前一种情况中那样用蓝色边框突出显示:

    Getting ready

  2. 要构建前面的页面，请创建ASP.NET Web 应用项目，并将其命名为Recipe8(或其他合适的名称)。

  3. 向项目中添加一个Scripts文件夹，并将 jQuery 库添加到该文件夹中。
  4. 向项目中添加一个新的 web 表单。 在表单中包含 jQuery 库。

  5. 将以下标记添加到页面:

    <table> <tr> <td colspan="2"><asp:CheckBox ID="chkHighlight" runat="server" Text="Highlight TextBoxes" /> </td> </tr> <tr> <td colspan="2"><asp:Label ID="lblName" runat="server" Text="Name"></asp:Label> </td> </tr> <tr> <td><asp:TextBox ID="txtFirst" runat="server"></asp:TextBox> </td> <td><asp:TextBox ID="txtLast" runat="server"></asp:TextBox> </td> </tr> <tr> <td colspan="2"><asp:Label ID="lblEmail" runat="server" Text="Email"></asp:Label> </td> </tr> <tr> <td colspan="2"><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> </td> </tr> <tr> <td colspan="2"><asp:Label ID="lblHomeAddr" runat="server" Text="Home Address"></asp:Label> </td> </tr> <tr> <td colspan="2"><asp:TextBox ID="txtHomeAddr" runat="server"></asp:TextBox> </td> </tr> <tr> <td colspan="2"><asp:Label ID="lblMailingAddr" runat="server" Text="Mailing Address"></asp:Label> </td> </tr> <tr> <td colspan="2"><asp:TextBox ID="txtMailingAddr" runat="server"></asp:TextBox> </td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> <asp:Button ID="btnReset" runat="server" Text="Reset" /> </td> </tr> </table>

  6. 向head元素添加以下样式，为活动元素添加蓝色边框:

怎么做……

在页面的<script>块中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function () {
    $("#<%=chkHighlight.ClientID%>").on("click", function () {
      if ($(this).is(":checked")) {
        $("input:text").on("focus", function () {
          $(this).addClass("active");
        });
        $("input:text").on("blur", function () {
          $(this).removeClass("active");
        });
      } else {
        $("input:text").off();
      }
    });
  });
</script>

How it works…

页面工作原理如下:

  1. 通过按F5键运行应用。 当页面加载时，复选框控件未选中。 通过勾选复选框控件，它的click事件处理程序将被执行:
  2. 事件处理程序首先检查控件是否被选中。 如果选中该选项，它将向窗体上的focus和blur事件的所有TextBox控件中添加事件处理程序。 在focus事件处理程序中，TextBox控件被高亮显示，在blur中，高亮显示被删除，如下所示:

  3. 如果CheckBox控件未选中，则使用.off()方法删除与TextBox控件关联的所有事件处理程序，如下所示:

    else { $("input:text").off(); }

参见 also

只运行一次事件配方

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/31273.html