AI智能
改变未来

jQuery事件

1. JQ载入事件:

    – 可以在同一个页面中无限次地使用$(document).ready()事件。

    – 它可以极大地提高web应用程序的响应速度。

      

2. 鼠标事件:

      1. click() 鼠标单击事件。

      2. dblclick() 鼠标双击事件。

      3. mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件。

      4. mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup 事件。

      5. mouseenter() 当鼠标指针穿过元素时,会发生mouseenter事件。该事件大 多数时候会与mouseleave 事件一起使用。(该           事件不冒泡)

      6. mouseleave() 当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用(该          事件不冒泡)

      7.mouseover() 当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用

      8.mouseout() 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用

      9. mousemove() 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。

        – mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标

      10. hover(参数1,参数2) 鼠标移入+移出事件

          – 修正了使用mouseout事件的一个常见错误

          参数说明:参数1为鼠标移入后执行的方法;

                            参数2为鼠标移出后执行的方法;

                             

3. 表单事件: 参数为方法。

      ① focus()、blur()、focusin()、focusout()

         – 获得焦点:可以通过鼠标点击或者键盘上的TAB导航触发。

         – 失去焦点:松开点击的鼠标,松开按住的tab键。

         Ⅰ focus() 事件与blur() 事件: 子元素获取到焦点时不触发该事件。

            

            

         Ⅱ focusin()事件与focusout()事件:子元素获取到焦点时也触发该事件。

            

      ② change()事件:监听<input>、<textarea>、<select>

         input元素:

                监听value值的变化,当有改变时,失去焦点后触发change事件(鼠标点击  文本框以外的地方触发)。对于单选按钮                   和复选框,当用户用鼠标做出选   择时,该事件立即触发。

        select元素:

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

        textarea元素:

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

      ③ select()事件:

             – 当选取textarea或文本类型的input元素中的文本内容时,会触发select事件。

             – 这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。

             – 可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

      ④ submit()事件:

             – 验证表单输入的正确性,如果错误就阻止提交,从新输入

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

             – <form οnsubmit=\”return false;\”></form>,jQuery中可以直接在函数中最后结尾return false即可

            

4. JQuery事件对象的属性和方法:

    – event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标

    – event.preventDefault() 方法:阻止默认行为

             在执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去了。我们可以用                                                event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

    – event.stopPropagation() 方法:阻止事件冒泡

    – event.currentTarget : 在事件冒泡过程中的当前DOM元素(等同于                              this)

    –  event.which:获取在鼠标单击时,单击的是鼠标的哪个键

             event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和                        mouseupevents),左键报告1,中间键报告2,右键报告3

    this和event.target的区别:

          js中事件是会冒泡的,所以this是可以变化的,但event.target不会变 化,它永远是直接接受事件的目标DOM元素;

          .this和event.target都是dom对象

    如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和 $(this)的使用、event.target和$(event.target)的使用;

5. JQ键盘事件:

    ① keydown()事件: 键盘按钮被按下时触发的事件

         

   keyup()事件: 键盘按键松开时触发的事件

          

    ③ keypress()事件: 跟keydown是非常相似

          – 主要用来接收字母、数字等ANSI字符,

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

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

        –  无法响应系统功能键(如delete,backspace)

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

        –  KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。

        诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的 组合等。

6. 事件的绑定和解绑

      – on( )绑定、off( )解绑

   ① on( )的多事件绑定

      

   ② off( )移除绑定

     

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery事件