1 事件

1.1 事件命名空间

$(".my").on("click",function () {console.log("1")})
      .on("click.a",function () {console.log("2")})
      .on("click.a.b",function () {console.log("3")})
      .trigger("click")//触发1,2,3
      .trigger("click.a")//触发2,3
      .off("click.a.b") .trigger("click")//触发1,2
      .trigger("click!");//只触发1

详解： https://www.haorooms.com/post/jquery_namespaces_eventname

1.2 事件处理

on(events,[selector],[data],fn)

参数1：一个或多个用空格分隔的事件类型和可选的命名空间。

  $(":root").on("click keydown",function () {console.log("1")})

参数2：过滤后代的选择器，实现事件委托。

<ul>
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
<script>
    $("ul").on("click","li",function () {
        console.log($(this).text());
    })
</script>

参数3：要传递event.data给事件处理函数的数据。

$("ul").on("click",{name:"bolala"},function (e) {
        console.log(e.data.name);
    })

参数4：要执行的函数或者false（取消冒泡和默认行为）。

off() 移除一个或多个事件的事件处理函数。
one() 绑定一个一次性的事件处理函数。
-trigger(type,[data]) 在每一个匹配的元素上触发某类事件。
triggerHandler(type, [data]) 触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

$(":submit").submit(function () {
        console.log("|haha");
    });
    $("p").click(function () {
        $(":submit").triggerHandler("submit");
//        只触发自定义事件 不执行默认，不冒泡
    })

1.3 切换事件

hover() 悬停切换
toggle() 点击切换

  $("p").hover(function () {$(this).toggleClass("active");})
        .next("span")
        .toggle(
            function () {$(this).addClass("active")}, 
            function () {$(this).removeClass("active")})

1.3 简写事件

表单类
①blur() ：失去焦点
②change() ：当元素的值发生改变时，发生 change 事件。该事件仅适用于文本域，以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
③focus(): 获得焦点时
④select()：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
⑤ submit()：当提交表单时触发。
鼠标类
① click() 单击
② dbclick() 双击
③ mousedown() 到上方并鼠标按下
④ mouseup() 到上方并鼠标按键释放
⑤ mouseenter() 移入不冒泡
⑥ mouseleave() 移出不冒泡
⑦ mouseover() 移入
⑧ mouseout() 移出
⑨ mousemove() 鼠标移动时
鼠标类
① keydown() 键盘按下触发
② keypress() 按下插入字符时触发
③ keyup() 按键松下时触发
窗口类
①resize() 调整浏览器窗口的大小时
②scroll() 当用户滚动指定的元素时，包括window 对象。