Play fei -- > jQuery

preface

there are many knowledge points today. Please study and practice carefully.

1, jQuery event registration

Advantages: simple operation, no need to worry about event coverage and other problems.
Disadvantages: ordinary event registration cannot delegate events and unbind events. Other methods are needed.

grammar

element.event(function() {})

$('div').click(function() { Event handler })

For those who have learned the javaScript language, the common events are basically the same. For details, please refer to W3C

Demo code

<body>
    <div></div>

    <script src="./jQuery.js"></script>
    
    <script>
        // Register click events
        $('div').click(function () {
            console.log('Click event')
        })
    </script>

</body>

2, jQuery event handling

2.1 event handling on() binding event

grammar

Advantage 1 of the on() method: it can bind multiple events and handle multiple event handlers.

<body>
    <div></div>

    <script src="./jQuery.js"></script>
    
    <script>
        // Register click events
        $('div').click(function () {
            console.log('Click event')
        })
    </script>

</body>

If the event handlers are the same

<body>
    <div class="box"></div>

    <script src="./jQuery.js"></script>
    
    <script>
        // The event handler is the same
        $('.box').on('mouseover mouseout', function () {
            console.log(1)
        })
    </script>

</body>

Advantage 2 of on() method

You can delegate an event, which means that the event originally added to the child element is bound to the parent element, that is, the event is delegated to the parent element.

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="./jQuery.js"></script>
    
    <script>
        // event delegation 
        $('.box').on('click', '.child', function () {
            console.log(1)
        })
    </script>

</body>

Advantage 3 of on() method

For dynamically created elements, click() has no way to bind events, and on() can bind events to dynamically generated elements.

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="./jQuery.js"></script>
    
    <script>
        // event delegation 
        $('.box').on('click', '.child', function () {
            console.log(1)
        })
    </script>

</body>

2.2 event handling (off) unbinding event

unbinding event means that when the logic on an event is not needed under specific requirements, the logic on the event can be removed.

grammar

The off() method removes the event handler added through the on() method.

<body>
    <ul>
        <li></li>
    </ul>

    <script src="./jQuery.js"></script>
    
    <script>
        // Unbind all event handlers of the ul element
        $('ul').off()

        // Unbind the click event above the ul element
        $('ul').off('click')

        // Unbind event delegation
        $('ul').off('click', 'li')
    </script>

</body>

If some events want to be triggered only once, you can use one() to bind the event.

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="./jQuery.js"></script>
    
    <script>
        // one() can only trigger an event once
        $('.box').one('click', function () {
            console.log('Trigger only once')
        })
    </script>

</body>

2.3 event handling trigger() automatically triggers events

jQuery provides us with two automatic trigger events trigger() and triggerHandler().

grammar

trigger(): triggers the default behavior of the element

// Abbreviated form
element.click()

// Auto trigger mode
element.trigger('type')

triggerHandler(): the default behavior of the element is not triggered
```
// Auto trigger mode
element.triggerHandler(type)
```

Code example

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="./jQuery.js"></script>
    
    <script>
        // Element. Event () triggers the default behavior of the element
        $('.box').click() 

        // The element. trigger('event ') triggers the default behavior of the element
        $('.box').trigger('click')

        // The element. triggerHandler('event ') does not trigger the default behavior of the element
        $('.box').triggerHandler('click')
    </script>

</body>

3, jQuery event object

jQuery encapsulates the event object event in the DOM, which has better compatibility, easier access and little change in use. When an event is triggered, an event object will be generated.

grammar

element.on(events, [selector], function(event) {})

Block default behavior: event.preventDefault() or return false.
Prevent bubbling: event.stopPropagation().

<body>
    <div class="box"></div>

    <script src="./jQuery.js"></script>
    
    <script>
        $(document).on('click', function () {
            console.log('Click document')
        })

        $('.box').on('click', function (event) {
            console.log('Click box')
            // Stop bubbling
            event.stopPropagation()
            // Block default behavior
            event.preventDefault()
        })
    </script>

</body>

4, jQuery copy object

grammar

$.extend([deep], target, object1, [objectN])

Parameter description
- Deep: if set to true, it is a deep copy, and the default is false. It is a shallow copy.
- Target: the target object to copy.
- object1: the object to be copied to the first object.
- objectN: the object to be copied to the nth object.
- The address of the copied object referenced by the shallow copy target object. Modifying the target object will affect the copied object.
- Deep copy, preceded by true, full clone. Modifying the target object will not affect the copied object.

Code example

Shallow copy

<script>
    // Shallow copy
    var targetObj = {
        id: 0,
        text: {
            name: 'nb'
        }
    }

    var obj = { 
        id: 1,
        text: {
            name: 'op'
        }
    }
	
    // Shallow copy
    $.extend(targetObj, obj)
    // Modify the attribute value of targetObj object
    targetObj.text.name = '666'

    // console output 
    console.log(targetObj, obj)

</script>

The effect of shallow copy is as follows. It can be seen that the attribute values have changed

Deep copy

<script>
    // Deep copy
    var targetObj = {
        id: 0,
        text: {
            name: 'nb'
        }
    }
    var obj = { 
        id: 1,
        text: {
            name: 'op'
        }
    }
	
    // Deep copy
    $.extend(true, targetObj, obj)
    // Modify the attribute value of targetObj object
    targetObj.text.name = '666'

    // console output 
    console.log(targetObj, obj)

</script>

The effect of deep copy is as follows. It can be seen that only the attribute value of targetObj object has changed.

That's all for the knowledge summary of jQuery. Thank you for your support. Later, let's learn javaScript language and feel the charm of the native js language. 😏

Tags: Javascript Front-end JQuery

Posted on Sun, 05 Dec 2021 21:22:18 -0500 by eddieblunt

Programmer Help

Play fei -- > jQuery

preface

1, jQuery event registration

2, jQuery event handling

2.1 event handling on() binding event

2.2 event handling (off) unbinding event

2.3 event handling trigger() automatically triggers events

3, jQuery event object

4, jQuery copy object

Hot Tags