jQuery事件总结

jQuery事件总结

开发工具与关键技术：vs2015 C#

作者：肖佳鑫

撰写时间：2020年9月 1日

页面载入 ：ready(fn)

    当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

        这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

        简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

       注意： 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

       参数说明：fn 要在DOM就绪时执行的函数

       在DOM加载完成时运行的代码，可以这样写：

       jQuery 代码:

       $(document).ready(function(){

           在这里写你的代码...

        });



    使用

$(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

        jQuery 代码:

        $(function($) {

            你可以在这里继续使用$作为别名...

        });

jQuery鼠标事件

           jQuery鼠标事件列表：

           click 单击事件 dbclick 双击事件

           mousedown 鼠标按下事件 mouseup鼠标弹起事件

           mouseenter 鼠标进入事件 mouseleave 鼠标离开事件

    

    jQuery鼠标事件之click与dbclick事件

 


        click([[data], fn]) 

        参数说明：fn 在每一个匹配元素的click事件中绑定的处理函数。

        data:click([Data], fn) 可传入data供函数fn处理。

    fn:在每一个匹配元素的click事件中绑定的处理函数。

    dblclick([[data],fn]) 参数说明同上 

    第一个按钮的点击事件 

$(“button:eq(0)”).click(function () {

        alert("jQuery鼠标事件之click单击事件");

        请写出为选中第一个按钮的方法，并为他添加点击事件

        例如：$("button").eq(0).click(function(){})

$(“button:first”).click(function () { alert(“12”)
});

        $("button").first().click(function

() { });

    });




    $("button:eq(0)").click(2222,

function (e) {

       alert(e.data);  警告框弹出2222

    });



    jQuery鼠标事件之focusin事件 与

focusout事件

     Query表单事件之focus与blur[blɚ] 事件

     focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

     focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况

    

    $("#demo").focusin(function () {

        $(this).addClass("changeColor");

    });

    $("#demo").focusout(function () {

        $(this).removeClass("changeColor");

    });



表单事件

    jQuery中的focus()获取焦点事件与blur()失去焦点事件（鼠标事件）

        1. focus() 事件

            当元素获得焦点时，触发focus事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数

        2. blur() 事件

            当元素失去焦点时触发 blur 事件。

            这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

  

        $(".wrap input").focus(function () {

             console.log("input已经获取到了焦点");

          });

           $(".wrap input").blur(function () {

             console.log("input已经失去了焦点");

          });       

jQuery中的focusin()事件与focusout()事件

         focusin() 事件

            当元素获得焦点时，触发 focusin 事件。

            focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

         focusout() 事件

            当元素失去焦点时触发 focusout 事件。

            focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况

jQuery中的表单事件 change()事件

元素，和元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

  input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

        select元素

            对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

        textarea元素

            多行文本输入框，当有改变时，失去焦点后触发change事件

jQuery表单事件中的 submit()事件

提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。
样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作

例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作

使用上非常简单，与基本事件参数处理保持一致

这里需要特别注意：

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为

，jQuery中可以直接在函数中最后结尾return false即可

jQuery键盘事件 keydown()与keyup()事件

鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。

相对应的键盘也有这类事件，将用户行为分解成2个动作，键盘按下与松手，针对这样的2种动作，

jQuery分别提供了对应keydown与keyup方法来监听

keydown()事件

当键盘或按钮被按下时，发生keydown事件。

• keyup()事件

当按钮被松开时，发生keyup事件。它发生在当前获得焦点的元素上。

  $(".target1").keydown(function (e) {

       console.log(e.target.value);

      $("em").first().text(e.target.value);

  });

    $(".target2").keyup(function(e) {

        console.log(e.target.value);


      $("em:last").text(e.target.value);

    });

jQuery键盘事件 keypress()事件

在input元素上绑定keydown事件会发现一个问题：

注意：每次获取的内容都是之前输入的，当前输入的获取不到

keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，
到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，

获得的是触发键盘事件后的文本

当浏览器捕获键盘输入时，还提供了一个keypress的响应，这个跟keydown是非常相似

keypress事件与keydown和keyup的主要区别

只能捕获单个字符，不能捕获组合键

无法响应系统功能键（如delete，backspace）

不区分小键盘和主键盘的数字字符

总而言之，

KeyPress主要用来接收字母、数字等ANSI字符，
而
KeyDown 和 KeyUP 事件过程可以处理任何不被
KeyPress 识别的击键。

诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等