HTML learning-A detailed description of jquery event monitoring

HTML learning-A detailed description of jquery event monitoring

• HTML learning-A detailed description of jquery event monitoring
  • Monitoring methods
  • Monitoring method Parameter Explanation
    • Click Parameter
    • Event Auto-execution Problem resolution
  • Bind method
  • Live method

Monitoring methods

In jquery, the method of monitoring more, with the most is simple, so it .click() .onchange() .pressdown() is very simple, direct use is good, as long as the parameters to meet the specifications can be. There are ways besides this bind() live() .

The AddEventListener () and bind () methods are not very functional differences, because the bind() method is created by jquery in order to solve the browser compatibility problem.

Listener method parameter interpretation. Click () parameter

In a simple listening method, for example .click() , its parameters have only one callback function, which can:

$(selector).click(function)

Where selector is the selector this thing has been talked about before , and then we give a simple example:

$("button").click(function(){  $("p").slideToggle();});

This is the callback function in the Division when the button is clicked, and then the effect that the element P hides.

.bind()The method I will explain in detail below.

Event Auto-execution Problem resolution

This, whether it is a simple event monitoring method, or .bind() .live() so on, may encounter a problem, is automatically executed. We will not encounter it when we use the anonymous callback function, but we will encounter it using our own named callback function, as shown in the following example:

$(‘#createImageData‘).click(createImageDataPressed());function createImageDataPressed(event){    alert("click");}

This code will be executed automatically, even if the button with ID createimagedata is not clicked, because the function in Click () has parentheses
This problem does not occur if you do not add parentheses, such as this: there $(‘#createImageData‘).click(createImageDataPressed); is no problem with automatic execution.

Bind () method

.bind()method is not in fact and AddEventListener in the usage of a very big difference, using the method is:

$(selector).bind(event,data,function)

Event	must be filled in to indicate the type of event bound
Data	Optional, to specify additional data to be passed to the function
function	Must fill in, event response function

Examples are as follows:

$("button").bind("click",function(){    $("p").slideToggle();  });

Then .bind() there is another way to use the method.

$(selector).bind(event:function, event:function, ...);

This usage is to bind an element to multiple events, as in the following example:

$("button").bind({    click:function(){$("p").slideToggle();},    mouseover:function(){$("body").css("background-color","red");},      mouseout:function(){$("body").css("background-color","#FFFFFF");}    });

This code Source:

To say this, the .bind() method is only for the elements loaded on the page to work, for the subsequent generation of elements is not possible. So that's when you need it .live() .

Live () method

We can treat and think of the .bind() .live() same thing, but .live() one more function is that it can be useful for future elements, as well as the elements that are going to be generated and the elements that already exist.

That's roughly the above.

Reprint please indicate the source.

HTML learning-A detailed description of jquery event monitoring