SOURCE

$(function(){
    /** 点击事件 */

    //选择器触发事件 方法一
    $('#selector').click(function(){
        console.log('3----'+'$(选择器).click()选择器触发事件')
        alert('选择器触发事件')
    })
    //选择器触发事件 方法二
    $(document).on('click','#selector',function(){
        console.log('9----'+'$(document).on()追加元素也可以选取到')
        alert('选择器触发事件 追加元素也可以选取到')
    })
})
    //标签内定义事件
    function html(){
        console.log('17---'+'标签内定义事件')
    }

$(function(){
    /** 焦点事件 */
    
    //选择器触发事件 方法一
    $('#focus').focus(function(){
        console.log('25----'+'$(选择器).focus()选择器获取焦点')
    })
    $('#focus').blur(function(){
        console.log('28----'+'$(选择器).focus()选择器失去焦点')
    })
    // 选择器触发事件 方法二
    $(document).on('focus','#focus',function(){
        console.log('32----'+'$(document).on()选择器获取焦点')
    })
    $(document).on('blur','#focus',function(){
        console.log('35----'+'$(document).on()选择器失去焦点')
    })    
    
})
    //标签内定义事件
    function htmlblur(){//失去焦点
        console.log('41---'+'标签内定义事件失去焦点')
    }
    function htmlfocus(){//获取焦点
        console.log('44---'+'标签内定义事件获取焦点')   
    }

<div style="font-size:10px;color:red">*使用选择器触发事件时本质上查找元素的onclick事件</div>
jquery更多事件地址：  <a href="https://www.w3school.com.cn/jquery/jquery_ref_events.asp" target="_blank">教程</a>   
<div id="selector" onclick="html()"><h4>jquery点击事件</h4>1.onclick方法 标签内定义事件 2.根据选择器 click事件处理 </div>
输出结果<br>
> 16---标签内定义事件<br>
> 3----$(选择器).click()选择器触发事件<br>
> 9----$(document).on()追加元素也可以选取到<br>
<hr>

<div><h4>jQuery焦点事件</h4>1.onblur onfocus 标签内定义事件 2.根据选择器blur focus事件处理</div>
<div><input type="text" id="focus" onblur="htmlblur()" onfocus="htmlfocus()">焦点事件</div>
输出结果<br>
> 32----$(document).on()选择器获取焦点<br>
> 44---标签内定义事件获取焦点<br>
> 25----$(选择器).focus()选择器获取焦点<br>
<hr>