事实上，jQuery 是为事件处理特别设计的。事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。这些jQuery事件方法也是jQuery事件的核心。

语法：element.事件(function(){});例如：$("div").click(function(){事件处理程序}),其他事件与原生基本一致

比如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

1.事件绑定

事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法规范：element.on(events,[selector],fn)

events：一个或多个用空格分隔的事件类型，如：click或keydown

selector:元素的子元素选择器

fn:回调函数 即绑定在元素身上的侦听函数

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #777;
    }
</style>
<div></div>
<!-- 此处引入jQuery文件,你就当这个文件存在吧 -->
<script src="jquery.min.js"></script>
<script>
    $(function() {
        // 单个事件注册
        $("div").click(function() {
            $(this).css("background", "blue");
        });
        $("div").mouseenter(function() {
            $(this).css("background", "red");
        });

        // 事件处理on()
        $("div").on({
            click: function() {
                $(this).css("background", "blue");
            },
            mouseenter: function() {
                $(this).css("background", "red");
            }
            mouseleave: function() {
                $(this).css("background", "purple");
            }
        });
    })
</script>

on()方法的优势:

可以绑定多个事件，多个事件处理程序

$("div").on({
    mouseover: function(){},
    mouseout: function(){},
    click: function(){}
});

// 如果事件类型是相同的，可以使用下面这种方法
$("div").on("mouseover mouseout", function() {
    $(this).toggleClass("current");
})

可以实现事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$('ul').on('click','li',function() {
    alert('hello world!');
});

在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们

2.解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

$("p").off(); // 解绑p标签所有事件处理程序
$("p").off("click"); // 解绑p标签元素上面的点击事件
$("ul").off("click", "li"); // 解绑事件委托

如果有的事件只想触发一次，可以用one()来绑定事件

$("p").one("click", function() {
    alert(57); // 只触发一次
})

3.自动触发事件trigger()

元素.事件() 第一种简写形式，会触发元素的默认行为

元素.trigger("事件") 第二种自动触发模式，会触发元素的默认行为

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div></div>
<script>
    $(function() {
        $("div").on("click",function() {
            alert(5);
        });
        // 第一种 元素.事件()
        $("div").click();

        // 第二种 元素.trigger("事件")
        $("div").trigger("click");
    })
</script>

元素.triggerHandler("事件") 第三种自动触发模式，这种方法不会触发元素的默认行为

上述的3个jQuery事件都是jQuery中出现频率较高的典型的jQuery事件，在我们的动力节点在线网站上还有专门的jQuery事件手册，方面我们查询各种jQuery事件的方法和调用方式，想学习的小伙伴不要错过。