jQuery event listening

1. Events

The jQuery object adopts the punctuation calling method, so the syntax of adding listening to elements in jQuery is: $("selector") click(function () {});

JQuery method can be directly used by jQuery object, and jQuery object is batch processing when calling jQuery method!

Syntax: jq object Event name (callback function)

Public part:

 <div class="div1"></div>
 <div class="div2"></div>

    <script src="js/jquery-1.12.3.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin-top: 10px
        }
    </style>

2. Event name

Note: when jq adds event listening, the event name is consistent with that in js, but the event name in jQuery is not on.

be careful:

(1)jq you can add multiple events of different types to the same element without triggering them.

(2)jq you can add multiple events of the same type to the same element, and the order of execution is in the order of addition.

(3) the binding of events in jq also allows chain declaration without repeatedly obtaining jq objects. And when chain declaration, except that the semicolon at the end of the last binding function indicates the end of binding, there is no need to write anything after other functions.

Common event name:

• Click: Click
• Double click: dbclick()
• Mouse entry: mouseenter()
• Mouse away: mouseleave()
• Text box gets focus: focus()
• Lose focus: blur()

Example 1:

<script>
        var $div1 = $('.div1');
        $div1.click(function() {
            console.log('div1 Click event for')
        });
        $div1.click(function() {
            console.log('div1 Next click event for')
        });
</script>

When you click the div1 area:

Example 2:

<script>
        //Chain declaration
        $('.div1').click(function() {
            console.log('First click event');
        }).click(function() {
            console.log('Second click event');
        }).dblclick(function() {
            console.log('Double click event');
        });
</script>

jQuery stipulates that there is no coverage problem in event binding, and the actual execution order of events will be executed one by one according to the order of event binding

3.on()/off() method

Add listening events to jQuery through the on() method; Cancel jQuery event listening through the off() method

Description: add event listening for jq object through on method and cancel event listening for jq object through off method

Syntax: jq object on('event name ', callback function) / jq object off('event name ')

Note: when the off method cancels an event, it cancels a type of event rather than an event

 <div class="div1"></div>
 <div class="div2"></div>

    <script src="js/jquery-1.12.3.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin-top: 10px
        }
    </style>

<script>
        // Get element
        var $div1 = $('.div1');
        var $div2 = $('.div2');

        $div1.on('click', function() {
            console.log('div1 adopt on Method bound events');
        });

        $div1.on('click', function() {
            console.log('Click the event again');
        });

        $div2.on('click', function() {
            $div1.off('click');
            console.log('div1 adopt off Method unbound event');
        })
</script>

When you click the div1 and div2 areas:

When you click the div1 area again, you will find that there is no output

4.bind() method

Add listening events to jQuery through bind() method

Advantages: it can add multiple listening events to a jQuery object at one time, and the event names are separated by spaces

Syntax: jq object bind('event 1, event 2... ', callback function);

 <div class="div1"></div>
 <div class="div2"></div>

    <script src="js/jquery-1.12.3.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin-top: 10px
        }
    </style>

<script>
        //Get element
        var $div1 = $('.div1');
        var $div2 = $('.div2');

        var num = 0;

        //Add num to html page
        $div2.html(num);

        $div1.bind('mouseenter  mouseleave', function() {
            num++;

            //Add num to html page
            $div2.html(num);
        })
</script>

bind can also use JSON parameters to add event listeners to jq objects

Note: add multiple events to jq object at one time, and each has different callback functions

Syntax: jq object bind(JSON parameter format);

<script>
        // Get element
        var $div1 = $('.div1');

        $div1.bind({
            click: function() {
                console.log('Click event');
            },
            dblclick: function() {
                console.log('Double click event');
            },
            mouseenter: function() {
                console.log('Mouse entry event');
            },
            mouseleave: function() {
                console.log('Mouse leaving event');
            },
        })
</script>

When the mouse pointer keeps entering and leaving div1 area:

When the mouse clicks and double clicks the div1 area:

5.one() method

Description: the event listener added through the one method is' one-time ', and can only be executed once

Syntax: jq object one('event name ', callback function);

 <script>
        //Get element
        var $div1 = $('.div1');

        $div1.one('click', function() {
            console.log('Click event');
        })
</script>

When you first click the div1 area:

When you click the div1 area again, you will find that there is no output