jQuery事件

作者: 梁文璇 | 来源:发表于2020-03-03 22:08 被阅读0次


    今日主打  jQuery事件

    事件类型

    1.鼠标事件

           click([[data],fn])          单击时触发

          dbclick([[data],fn])       双击时触发

          mousedown()             鼠标按下时触发

          mouseup()                 按下的鼠标松开时触发

          mouseenter()             鼠标进入时触发

          mouseleave()             鼠标移出时触发

    常用的是上面的

          hover([over,]out)         鼠标在进入和退出时触发两个函数,相当于mouseenter加上mouseleave

          mouseover                  鼠标在进入指定元素及其子元素时触发

          mouseout                    鼠标在移出指定元素及其子元素时触发

          mousemove([[data],fn]) 鼠标在DOM内部移动时触发

          scroll([[data],fn])         当滚动指定的元素时,会发生scroll事件(scroll触发时不一定用滚轮去触发)

      2.键盘事件

          keydown([[data],fn])   当键盘或按钮被按下时发生keydown事件

          keyup([[data],fn])        当键盘或按钮被松开时发生keyup事件.它发生在当前获得焦点的元素上

          keypress([[data],fn])   当键盘或按钮被按下时发生keypress事件

    PS:keydown 与 keypress 的区别:

                                      keypress必须是输入内容时才会触发。

                                      keydown可以记录所有的按键

    val()方法返回或者设置被选元素的值,获取输入框中的内容可以使用val()

    例子:

    <body>

    <input type="text" value="">

    <p></p>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

     <script>

    $(document).ready(function(){

    /*

          $('input').keydown(function(){

                $('p').text($(this).val());

          });

          */

          $('input').keyup(function(){

                $('p').text($(this).val());

          });

    });

    </script>

    </body>

      3.其他事件

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

          focus([[data],fn])        当元素获得焦点时触发focus事件

          blur([[data],fn])           当元素失去焦点时触发blur事件

          resize([[data],fn])        当调整浏览器窗口的大小时,发生resize事件,浏览器窗口其对象是window

          change([[data],fn])       当元素的值发生改变时,会发生change事件

          select([[data],fn])          当textarea或文本类型的input元素中的文本被选择时,会发生select事件(需要我们去选中的才能用select事件)

          submit([[data],fn])         当提交表单时,会发生submit事件

      4.事件参数----------- event

          有些事件,如mousemove和keypress,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。

          所有事件都会传入event对象作为参数,可以从event对象上获取到更多的信息。

      5.事件绑定与取消

        on(events,[selector],[data],fn)     在选择元素上绑定一个或多个事件的事件处理函数。

        off(events,[selector],,fn)              在选择元素上移除一个或多个事件的事件处理函数。

        one(type,[data],fn)      为每一个匹配元素的特定事件(比如click)绑定一个一次性的事件处理函数。

                   这两天的干货,小伙伴们觉得枯燥么?若需要举例,请下方留言哦

                  前几篇内容,每一篇因为太详细,讲不了几个点,所以这两天就多备了些。

    ❤  good   night  ❤

                                                            我虽是个喵星人,但从没养过

    相关文章

      网友评论

        本文标题:jQuery事件

        本文链接:https://www.haomeiwen.com/subject/savllhtx.html