04-jQuery事件和动画

事件绑定

事件名称(func)
编码效率略高/ 部分事件jQuery没有实现,所以不能添加

$("button").click(function () {
    alert("111");
});

on(eventName, fn);
编码效率略低/ 所有js事件都可以添加

$("button").on("click",function () {
     alert("111");
});

注意点:
可以添加多个相同或者不同类型的事件,不会覆盖

事件移除

off()方法如果不传递参数, 会移除指定元素所有的事件

$("button").off();

off()方法如果传递一个参数, 会移除所有指定类型的事件

$("button").off("click");

off()方法如果传递两个参数, 会移除所有指定类型的指定事件

function test1() {
        alert("hello lnj");
}
$("button").click(test1);
$("button").off("click", test1);

事件自动触发

trigger: 如果利用trigger自动触发事件,会触发事件冒泡,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡,不会触发默认行为

    $(".son").click(function () {
        alert("son");
    });

    $(".father").click(function () {
        alert("father");
    });

    $(".son").trigger("click");
    $(".son").triggerHandler("click");

注意点:
a标签自动使用自动触发方法不会自动跳转,可以在a标签内部在包裹一个标签解决此问题

事件命名空间

利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

    $(".father").on("click.ls", function () {
        alert("father click1");
    });

    $(".father").on("click", function () {
        alert("father click2");
    });

    $(".son").on("click.ls", function () {
        alert("son click1");
    });

    $(".son").trigger("click.ls");
    $(".son").trigger("click");

事件委托

在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件,新增加的元素在入口函数执行完后才执行,所以无法添加事件,这时候可以使用事件委托

  $("button").click(function () {
        $("ul").append("<li>我是新增的li</li>");
    });
    //新增加的li不能响应点击事件
    /*$("ul>li").click(function () {
        console.log($(this).html());
    });*/

    /*
    以下代码的含义, 让ul帮li监听click事件
    之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
    之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
    */
    $("ul").delegate("li","click",function () {
        console.log($(this).html());
    });

移入移出事件

移入事件

//注册移入事件
$(".son").mouseenter(function () {
    console.log("mouseenter");
});

移出事件

//注册移出事件
$(".son").mouseleave(function () {
    console.log("mouseleave");
});

同时监听移入移出事件

    //hover方法同时接收两个函数一个是移入处理,一个是移出处理
    $(".father").hover(function () {
        console.log("11");
    },function () {
        console.log("22");
    });