1. Common events

• click() mouse click
• blur() element lost focus
• focus() element gets focus
• mouseover() mouse in (triggered by entering child elements)
• mouseout() mouse away (leaving child elements also triggered)
• ready() DOM loading completed

Example code:

<script>
    $(function(){
        var $li = $('.list li');
        var $button = $('#button1')
        var $text = $("#text1");
        var $div = $("#div1")

        //  Mouse click
        $li.click(function(){             
            // this refers to the current event object, but it is a native js object
            // this.style.background = 'red';

            // $(this) refers to the jquery object of the current event
            $(this).css({'background':'gold'});
            // Get the index value of jquery object, and use the index() method
            alert($(this).index());
        });

        //  Generally used with buttons
        $button.click(function(){
            alert($text.val());
        });

        //  Focus of acquisition
        $text.focus(function(){
            $(this).css({'background':'red'});

        });

        //  Lose focus
        $text.blur(function(){
            $(this).css({'background':'white'});

        });

        //  Mouse entry
        $div.mouseover(function(){
            $(this).css({'background':'gold'});

        });

        //  Mouse away
        $div.mouseout(function() {
            $(this).css({'background':'white'});
        });
    });
</script>

<div id="div1">
    <ul class="list">
        <li>List text</li>
        <li>List text</li>
        <li>List text</li>
    </ul>

    <input type="text" id="text1" value="Study">
    <input type="button" id="button1" value="click">
</div>

Explain:

• this refers to the current event object, but it is a native js object
• $(this) refers to the jquery object of the current event

2. summary

jQuery common events:

• click() mouse click
• blur() element lost focus
• focus() element gets focus
• mouseover() mouse in (triggered by entering child elements)
• mouseout() mouse away (leaving child elements also triggered)
• ready() DOM loading completed

1. Introduction to event agent

Event agent is to use the principle of event bubbling (event bubbling is that the event will pass to its parent level) to add the event to the parent level. By judging the source of the event and performing the operation of the corresponding child elements, event agent can first greatly reduce the number of event binding times and improve the performance; secondly, it can let the newly added child elements have the same operation.

Event bubble Code:

 <script>
    $(function(){

        var $div1 = $('#div1');
        var $div2 = $('#div2');

        $div1.click(function(){
            alert($(this).html());
        }); 

        $div2.click(function(){
            alert($(this).html());
        }); 
    });
</script>

 <div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        //Ha-ha
    </div>
</div>

Explain:

When a child element div is clicked, its click event will be passed to its parent element, and the click event of the parent element will also be triggered, which is called event bubble.

2. use of event agent

How to write a general binding event:

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

The writing method of event agent

$(function(){
    $list = $('#list');
    // The parent element ul represents the click event of the child element li
    $list.delegate('li', 'click', function() {
        // $(this) represents the child element object currently clicked
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Parameter description of delegate method:

delegate(childSelector,event,function)

• childSelector: selector for child elements
• Event: the name of the event, for example: 'click'
• Function: the function executed when the event triggers

3. summary

• Event proxy is to use the parent element to proxy the event of the child element. The advantage is to reduce the binding times of the event and improve the performance.
• Use scenarios when multiple identical child elements bind to the same event, you can use event proxies.
• The event agent uses the delegate method to do this