This is the 26th day of my participation in the August Text Challenge.More challenges in August

JQuery event operations

Simple way to register events

• Syntax: jQuery objects. Event name (event handler);

The on method registers the event

The underlying encapsulation of the on() method is actually addEventListener(), which, unlike onclick, registers the same event for the same element multiple times.

• Register simple event syntax: jQuery object. On (‘ event name ‘, event handler);

• Event delegate implementation: jQuery object. On (‘ event name ‘,’ selector ‘, event handler);

Selector: Descendant element

Note: In event handlers, this represents descendant elements (the first triggered by the click)

  1. Registration:
        $("input").on("click".function () {
            alert(2)})Copy the code
  1. Event delegation
        $("ul").on("click"."li".function () {
            // In the event delegate process, the this inside the event function does not refer to the event source, but to the delegate child that triggered the event
            alert($(this).text())
        })
Copy the code

The off method removes the event

• Unbind simple events: jQuery object. Off (‘click’, event handler name)

• Unbind event delegate registered event: jQuery object. Off (‘click’, ‘selector ‘, event handler name)

  1. Unbind simple events
        // Define the event handler
        var fun1 = function () {
            alert(2)};var fun2 = function () {
            alert(3)};// Bind simple events
        $("input").on("click",fun1)
        $("input").on("click",fun2)

        // Unbind events
        $("input").off("click",fun2)
Copy the code
  1. Unbind the event delegate
        var fn1 = function () {            
            alert($(this).text())
        };
        var fn2 = function () {            
            alert($(this).index())
        };
        // Bind event delegate events
        $("ul").on("click"."li", fn1)
        $("ul").on("click"."li", fn2)

        // Unbind event delegates
        $("ul").off("click"."li", fn2)
Copy the code

Triggering event

• Syntax: jQuery object. Trigger (‘ event name ‘);

Automatically triggers an event, such as triggering auto-multicast of a multicast graph.

    // You can use the trigger method in JQ to automatically execute the right button event
    function autoPlay() {$(".arrow-right").trigger("click");
    }
    var timer = setInterval(autoPlay,1000);

    // Mouse over stop timer
    $(".slider").on("mouseenter".function () {
      clearInterval(timer);
    })
    // Mouse away to restart the timer
    $(".slider").on("mouseleave".function () {
      timer = setInterval(autoPlay,1000)})Copy the code

JQuery Event object

The event object

• The event handler’s first parameter, e

Properties associated with the mouse event object

• Event object. ClientX /Y reference browser

• Event object. PageX /Y reference document

• Event object. OffsetX /Y references ancestor level elements

Properties associated with the keyboard event object

• event object keyCode returns the keyCode number

AltKey /shiftKey/ctrlKey returns a Boolean value. Check if pressed (true)

        // Get the number of key code in the keypress event
        $(document).keydown(function (e) {
            console.log(e.keyCode)
        })
Copy the code

A public property or method

• attribute

Target The DOM element that initially fires the event

CurrentTarget The current DOM element in the event bubble phase

Methods:

PreventDefault (); Blocking default behavior (such as a tag)

Event object. StopPropagation (); Prevents events from bubbling

Multi – library coexistence problem

Questions about $conflicts

Solution 1: Use jQuery instead of $

Solution 2: The jQuery library frees up the use of $matches and uses another simple symbol instead

  • jQuery.noConflict(); Release, return, return, and return the represented function to the user, who can receive it with other variables
    // Solution 2: Release the $sign
    var $1 = jQuery.noConflict();
    // console.log($1)
    $1("button").click(function () {
      alert(1);
    })
Copy the code