jquery event method (1)

1 .bind()

Add one or more event handlers for selected elements and specify functions to run when the event occurs

$("button").bind("click",function(){
  $("p").slideToggle();
});//The result of the operation is that when the <button> button is clicked, the <p> element is hidden, and when the <p> element is clicked again, the <p> element appears

Alternative syntax:

$(selector).bind({event:function, event:function, ...})

2.blur()

The blur event occurs when an element loses focus.

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});//Click on <input> and click outside the area, then the focus will be lost and the color will be changed

3.change()

The change event occurs when the value of an element changes

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
});
</script>
</head>
<body>
<p>When a field is used or changed, it changes color. </p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>//When the option of the drop-down box changes, <input> changes color

4.click() click event.

5.dbclick(), double-click trigger event

6.delegate()

The method adds one or more event handlers to the specified element (that is a child of the selected element) and specifies functions to run when these events occur.

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

Added a click event for <button>, click <p> to hide or disappear, and then create a new <button> will also have a bound click event

7.live()

Add one or more event handlers for current or future matched elements

$("button").live("click",function(){
  $("p").slideToggle();
});//A click event is added to the <button> element, and there is still a click event after copying or creating a new <button>

8.die()

Remove all event handlers added via the live() function.

$("p").die();

9.error()

The error event occurs when an element encounters an error (not loaded correctly)

$("img").error(function(){
  $("img").replaceWith("
Missing image!
");
});//The picture is not loaded, showing MIssing image

10.focus()

When an element is selected with a mouse click or positioned with the tab key, the element gets focus. The focus event occurs when an element gains focus.

$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

11.keydown()

When a key is pressed, a bind event occurs

$("input").keydown(function(){
  $("span").text(i+=1);
});//Entering a character in <inputs> will trigger a .keydown event

12.keypree()

The keypress event is similar to the keydown event. This event occurs when the button is pressed. It happens on the currently focused element.

However, unlike the keydown event, the keypress event occurs every time a character is inserted.

$("input").keydown(function(){
  $("span").text(i+=1);
});//A keydown event will be executed after inputting in <inputs> and pressing Enter

jquery event method (1)

Guess you like