Web前端之路

jQuery事件

2020-03-03  本文已影响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  ❤

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

上一篇下一篇

猜你喜欢

热点阅读