Events in jQuery

Supplement: The load() method will bind a processing function in the element's onload event. If the processing function is bound to the window object, it will be Triggered after all content (including windows, frames, objects, images, etc.) is loaded. If the handler function is bound to an element, it will be triggered after the content of the element is loaded.

1 $(window).load(function(){2 //编写代码3 })

2. Event binding - bind() method

Format: bind(type [, data], fn )

The first parameter is the event type: blur, focus, load, unload, resize, scroll, click, dblclick, mousedown, mouseover, mouseup, mousemove, mouseout, mouseenter, mouseleave, change, select, submit , keydown, keypress, keyup, error

The second parameter is an optional parameter, an additional data object passed to the event object as the evert.data attribute value

The third meal is used To bind the processing function

Supplement: To determine whether an element is displayed, use the is() method in jQuery

abbreviation: .mouseover(function(){})

##Other uses of the bind() method:

(1) Bind an element once Multiple event types

 
$("p").bind("mouseover mouseout",
function
(){};);

(2) Add event namespace for easy management

hover() method: simulate cursor hover event

Format: hover(enter, leave) ;

When the cursor moves to the element, the first specified function will be triggered. When the cursor removes the element, the second specified function will be triggered

Alternate events: bind("mouseenter") and bind("mouseleave")

toggle() method: simulate mouse Continuous click event

Format: toggle(fn1,fn3......fnN);

$(function()){
      $("#panel").toggle(function(){
               $(this).next().show();
       },function(){
                $(this).next().hide();
       })
})

$(function()){
       $("#panel").toggle(function(){
                $(this).next().toggle();
        },function(){
                 $(this).next().toggle();
        })
})

$(function(){
      $("#sub").bind("click",function(event){
              var username=$("#username").val();
              if(username==""){
                     $(""#msg).html("<p>文本框内容不能为空</p>")；
                     event.preventDefault();
              }
        })
})

补充：（1）JS中的stopPropagation()方法不兼容IE浏览器

（2）在标准DOM中，mouseover和mouseout所发生的元素都可以通过event.target访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget相当于IE浏览器的event.fromElement，在mouseout中相当于IE的event.toElement。

（3）在JS中，IE用event.x和event.y；Firefox用event.pageX/event.pageY。如果页面有滚动条，还要加上滚动条的宽度和高度。

6.移除事件

（1）移除按钮元素上已有的事件：$("#btn").unbind();

格式：unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移除的函数

①如果没有参数，删除所有绑定的事件。

②有参数只删除参数类型的绑定事件。

③如果把在绑定时传递的处理函数作为第二个参数，只有特定的事件处理函数会被删除。

（2）移除元素中的其中一个事件

在绑定时要给匿名函数指定一个变量

$(function(){
      $("#btn").bind("click",myFun1=function(){
           //代码1
      }).bind("click",myFun1=function(){
           //代码2
      }）
})

Copy after login

单独移除某个绑定事件

$("#del1").click(function(){
      $("#btn").unbind("click",myFun2);
 })

Copy after login

注意：对于只需要触发一次就要立即解除绑定的情况，使用one()方法。one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即：在每个对象上，事件处理函数都只会被执行一次。one()方法的使用和bind()方法一样。

 

The above is the detailed content of Events in jQuery. For more information, please follow other related articles on the PHP Chinese website!