一、事件绑定

1. $("target").bind/unbind("事件名",handler)

$("target").bind/unbind("事件名",handler) 
    同addEventListener()
    .unbind三种重载: 
        .unbind("事件名",handler) 移除当前元素上，指定事件上的名为handler的处理函数。
        .unbind("事件名") 移除当前元素上，指定事件上的所有处理函数
        .unbind() 移除当前元素上，所有事件的监听

2. $("target").one("事件名",handle)

$("target").one("事件名",handle)，同bind
    区别: 只触发一次，触发后，自动解绑

3. $("parent").delegate("selector","事件名",handler)

$("parent").delegate("selector","事件名",handler)
    原理: 简化利用冒泡:
    1. 获得目标元素: this->e.target
    2. 筛选目标元素: 第一个参数: "selector"
        只有满足"selector"要求的元素，才能触发事件

bind 与 .delegate 的区别
1. .bind直接绑定在目标元素上
    .delegate 绑定在父元素上
2. 监听个数: .bind 监听个数多——每个目标元素都添加
    .delegate 监听个数少——只给父元素添加一个
3. 新增子元素自动获得事件处理函数:
    .bind 只能对现有元素添加事件监听
        新增元素无法自动获得监听
    .delegate 只要父元素下的元素，无论现有，还是新增，都能自动获得父元素上统一的事件监听　　

4. .on/off

1. 代替bind: .on("事件名",handler) 同bind
2. 代替delegate: .on("事件名","selector",handler)同delegate

5.  .事件名

此方法仅对常用的事件提供了终极简化

6.页面加载后执行步骤

1. DOMContentLoaded: 仅DOM内容加载完，就可提前执行
    DOM内容仅包括: html和js
    提前触发：只要不依赖于css和图片的所有操作都可在DOM内容加载后，提前触发
        比如: 事件绑定
    jq: $(document).ready(()=>{
        //DOM内容加载后，就可提前执行的操作
            //比如: 事件绑定
    })
    简化: $().ready(()=>{
    更简化: $(()=>{...})
        注意：写在body结尾的script中的代码默认就是DOM内容加载后自动执行
2. window.onload 在所有页面内容加载完成后自动触发
    包括: html,css,js,图片
    使用场景：js代码必须依赖css或图片才能执行时

二、鼠标事件和模拟触发

1.鼠标事件

mouseover  mouseout 进出子元素，会频繁触发父元素的处理函数
mouseenter  mouseleave 进入子元素，不再频繁触发父元素的处理函数
 简写: 如果同时绑定鼠标进入和移出事件时，可简写为hover
    $(...).hover(
        e=>{...}  //给mouseenter
        ,
        e=>{...}  //给mouseleave
    )
    更简化: 如果两个处理函数，可用toggle统一为一个处理函数，则只需要传一个参数即可

2.模拟触发

虽然没有触发事件，但是依然可用程序模拟执行元素的事件处理函数
 语法:  $(...).trigger("事件名")
 更简单: $(...).事件名()