Html learning, html

Html learning, html
Html learning-jquery event listening details

• Html learning-jquery event listening details
  • Listener Method
  • Listener method parameters
    • Click Parameter
    • Automatic event execution Problem Solving
  • Bind Method
  • Live Method

Listener Method

In jquery, there are many listening methods, and the most commonly used method is simple..click() .onchange() .pressdown()So it's easy to use directly, as long as it complies with the parameter specifications. Besides thisbind() live()Method.

The addEventListener () and bind () methods have no major functional differences becausebind()Jquery was created to solve browser compatibility issues.

Listener method parameter description. click () parameter

In simple listening methods, for example.click()The parameter has only one callback function. You can:

$(selector).click(function)

Selector is the selector.This thing has been mentioned beforeThen, let's take a simple example:

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

This is the callback function in the division when the button is clicked, and then let the element p hide the effect.

.bind()I will explain in detail below.

Automatic event execution Problem Solving

Whether it is a simple event listening method or.bind() .live()And so on. We will not encounter this when using the anonymous callback function, but we will encounter this when using the callback function named by ourselves. The example is as follows:

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

This code will be automatically executed, even if you do not click the button with id createImageData, this is becauseBrackets are added to the function in click ().
This problem will not occur if no parentheses are added, for example:$('#createImageData').click(createImageDataPressed);In this way, automatic execution will not occur.

Bind () method

.bind()The method is actually not significantly different from that of addEventListener. The usage is as follows:

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

Event	Required, indicating the Bound event type
Data	Optional. Additional data to be passed to the function.
Function	Required. Event Response Function

Example:

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

Then.bind()There is another way to use this method.

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

This is used to bind multiple events to an element. The example is as follows:

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

Source: W3C

Here.bind()The method works only for elements first loaded on the page, but not for later generated elements. So at this time, we need.live()Now

Live () method

We can.bind()And.live()Think of it as the same thing,.live()One more feature is that it can be used for future elements, as well as existing elements to be generated immediately. This makes it much easier.

This is generally the case.

Indicate the source for reprinting.