1. 鼠标事件

概念： 一次鼠标单击，会先后触发 mousedown()，mouseup() 和 click()：

元素.click(() => {})：鼠标左键单击元素时触发事件。
- 元素.mousedown(() => {})：鼠标左键在元素上按下时触发事件。
- 元素.mouseup(() => {})：鼠标左键在元素上抬起时触发事件。
元素.dblclick(() => {})：鼠标左键双击元素时触发事件。
元素.mouseover(() => {})：鼠标移入元素时触发事件，子元素有影响。
元素.mouseout(() => {})：鼠标移出元素时触发事件，子元素有影响。
元素.mouseenter(() => {})鼠标穿入元素时触发事件，子元素无影响。
元素.mouseleave(() => {})鼠标穿出元素时触发事件，子元素无影响。
元素.mousemove(() => {})：鼠标在元素上移动时触发事件。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        section {
            margin-top: 10px;
        }

        #fu1, #fu2 {
            width: 200px;
            height: 200px;
            background: red;
        }

        .zi {
            width: 100px;
            height: 100px;
            background: green;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<section>
    <button id="click-btn" type="button">鼠标左键单击我</button>
    <br/>
    <button id="dblclick-btn" type="button">鼠标左键双击我</button>
    <br/>
    <button id="mousemove-btn" type="button">鼠标在我身上移动</button>
    <br/>
</section>

<section id="fu1">
    <div class="zi">鼠标移入移出</div>
</section>

<section id="fu2">
    <div class="zi">鼠标穿入穿出</div>
</section>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        let clickBtn = $("#click-btn");
        clickBtn.mousedown(() => console.log("click-mousedown..."));
        clickBtn.mouseup(() => console.log("click-mouseup..."));
        clickBtn.click(() => console.log("click..."));

        $("#dblclick-btn").dblclick(() => console.log("dblclick..."));
        $("#mousemove-btn").mousemove(() => console.log("mousemove..."));

        let fu1 = $("#fu1");
        fu1.mouseover(() => console.log("mouseover..."));
        fu1.mouseout(() => console.log("mouseout..."));

        let fu2 = $("#fu2");
        fu2.mouseenter(() => console.log("mouseenter..."));
        fu2.mouseleave(() => console.log("mouseleave..."));
    });
</script>

</body>
</html>

2. 窗口事件

概念：

$(window).unload(() => {})：当页面被卸载或刷新时触发事件，仅IE支持，一般用于清理工作。
$(window).resize(() => {})：当窗口重新被改变大小时触发事件。
$(window).scroll(() => {})：当窗口滚动条发生变化时触发事件。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            height: 1000px;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        $(window).resize(() => console.log("resize..."));
        $(window).scroll(() => console.log("scroll..."));
    });
</script>

</body>
</html>

3. 表单事件

概念： 一次键盘敲击，会先后触发 keydown()，keypress() 和 keyup()：

$(document).keypress(() => {})：当完整敲击一次按键时触发事件。
- $(document).keydown(() => {})：键盘按下时触发事件。
- $(document).keyup(() => {})：键盘抬起时触发事件。
元素.select(() => {})：文本被选中时触发事件。
元素.change(() => {})：文本发生改变后，丧失了焦点时触发事件。
元素.focus(() => {})：当前元素获得焦点的时候触发事件。
元素.blur(() => {})：当前元素丧失焦点的时候触发事件。
元素.focusin(() => {})：当前元素，或当前元素的子元素获得焦点时触发事件。
元素.focusout(() => {})：当前元素，或当前元素的子元素丧失焦点时触发事件。
表单.submit(() => {})：表单提交时触发事件。

布局：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #parent-sec {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>

<form id="login-form" action="http://www.baidu.com" method="get">
    <label><input id="select-ipt" value="文本选中..."/></label><br/>
    <label><input id="change-ipt" value="文本改变..."/></label><br/>
    <label><input id="focus-ipt" value="获取焦点..."/></label><br/>
    <label><input id="blur-ipt" value="丧失焦点..."/></label><br/>
    <button type="submit">提交</button>
</form>

<section id="parent-sec">
    <label><input id="zi-ipt" value="子元素获取/丧失焦点..."/></label><br/>
</section>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        $(document).keypress(() => console.log("keypress..."));
        $(document).keydown(() => console.log("keydown..."));
        $(document).keyup(() => console.log("keyup..."));

        $("#select-ipt").select(() => console.log("select..."));
        $("#change-ipt").change(() => console.log("change..."));

        $("#focus-ipt").focus(() => console.log("focus..."));
        $("#blur-ipt").blur(() => console.log("blur..."));

        let parentSec = $("#parent-sec");
        parentSec.focusin(() => console.log("focusin..."));
        parentSec.focusout(() => console.log("focusout..."));
    });
</script>

</body>
</html>l

4. event关键字

概念： JQ在事件函数中默认传递了 event 事件对象：

event.type：事件名，string类型。
event.target：触发事件的DOM元素（它触发的该事件）。
event.currentTarget：监听事件的DOM元素（事件绑在它身上）。
event.data：获取事件携带的数据。
event.timeStamp：获取当前时间戳。
event.pageX：获取鼠标相对于文档原点的X坐标。
event.pageY：获取鼠标相对于文档原点的Y坐标。
event.screenX：获取鼠标相对于屏幕原点的X坐标。
event.screenY：获取鼠标相对于屏幕原点的Y坐标。
event.clientX：获取鼠标相对于视口原点的X坐标。
event.clientY：获取鼠标相对于视口原点的Y坐标。
event.which：获取键盘的键盘码，也可以获取鼠标左/中/右键(1/2/3)。
event.altKey：是否同时按下了alt键。
event.shiftKey：是否同时按下了shift键。
event.ctrlKey：是否同时按下了ctrl键。
event.stopPropagation()：阻止事件冒泡到父元素中。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #event-div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="event-div">
    <button type="button">click me!</button>
</div>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {

        let data = [1, 2];
        $("#event-div").click(data, ev => {
            ev = ev || event;

            console.log("type:", ev.type);
            console.log("target:", ev.target);
            console.log("currentTarget:", ev.currentTarget);
            console.log("data:", ev.data);
            console.log("timeStamp:", ev.timeStamp);
        });
    });
</script>

</body>
</html>

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            height: 1000px;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).click(ev => {
        ev = ev || event;

        console.log("page:", ev.pageX, ev.pageY);
        console.log("screen:", ev.screenX, ev.screenY);
        console.log("client:", ev.clientX, ev.clientY);
    });
</script>

</body>
</html>

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        $(document).keydown(ev => {
            ev = ev || event;
            console.log("which:", ev.which);
            console.log("shiftKey:", ev.shiftKey);
            console.log("altKey:", ev.altKey);
            console.log("ctrlKey:", ev.ctrlKey);
        });

        $(document).dblclick(ev => {
            ev = ev || event;
            console.log("which:", ev.which);
        });

        $(document).contextmenu(ev => {
            ev = ev || event;
            console.log("which:", ev.which);
        });
    });
</script>

</body>
</html>

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #propagation-div {
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="propagation-div">
    <button id="propagation-btn" type="button">事件冒泡</button>
</div>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        $("#propagation-btn").click(() => {
            console.log("propagation-btn...");
        });

        $("#propagation-div").click(ev => {
            ev = ev || event;
            console.log("propagation-div...");
            ev.stopPropagation();
        });

        $("body").click(() => {
            console.log("propagation-body...");
        });
    });
</script>

</body>
</html>

5. 事件挂载

概念：

元素.on("type", ["selector"], [data], fn-name)：为元素挂载JQ事件：
- param1：事件名，string类型，多事件用空格分隔。
- param2：CSS风格选择器，string类型，用来指定哪些子元素可以事件冒泡，可选。
- param3：事件数据，向事件内部传递基本类型，数组或JSON数据，暂存在 event.data 中，可选。
- param4：事件函数名（不加双引号），或直接使用匿名函数。
元素.on({})：若对元素同时添加多种事件，且事件处理方式不同，建议使用JSON参数的方式。
元素.one()：事件只触发一次，其余和 on() 用法一致。

JQuery1.7版本之前提供了 元素.bind("type", [data], fn-name)，但它不支持 selector 这个参数，已过时。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        section {
            width: 250px;
            height: 50px;
            background: red;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>

<section id="on-sec-a">on挂载：带名函数处理</section>
<section id="on-sec-b">on挂载：匿名函数处理</section>
<section id="on-sec-c">on挂载：多种事件，相同处理</section>
<section id="on-sec-d">on挂载：多种事件，不同处理</section>

<section id="selector-sec">
    <button id="a-btn" type="button">按钮A</button>
    <button id="b-btn" type="button">按钮B</button>
    <button type="button">按钮C</button>
    <button type="button">按钮D</button>
</section>

<section id="data-sec">
    参数data
</section>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {

        $("#on-sec-a").on("click", myFunction);
        $("#on-sec-b").on("click", () => console.log("b-click..."));
        $("#on-sec-c").on("click mouseout", () => console.log("c-click or c-mouseout..."));
        $("#on-sec-d").on({
            "click": () => console.log("d-click..."),
            "mouseout": () => console.log("d-mouseout..."),
        });

        let selector = "#a-btn,#b-btn";
        $("#selector-sec").on("click", selector, () => {
            console.log("bubble...");
        });

        let data = {"score": [90, 100, 80], "age": 3};
        $("#data-sec").on("click", data, ev => {
            ev = ev || event;
            console.log("data:", ev.data["score"]);
        });

    });


    function myFunction() {
        console.log("a-click...");
    }

</script>
</body>
</html>

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="one-btn" type="button">one()</button><br/>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        $("#one-btn").one("click", () => console.log("one..."));
    });
</script>
</body>
</html>

6. 事件卸载

概念：

元素.off()：解绑元素身上的所有事件。
元素.off("click")：解绑元素身上的所有 click 事件，其他事件保留。
元素.off("click", fn1)：解绑元素身上的所有 click 事件中的 fn1 事件，其余保留。
元素.off("click.a")：解绑元素身上的所有 click.a 事件，其余保留。

JQuery1.7版本之前提供了 元素.unbind()，已过时。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        section {
            width: 250px;
            height: 50px;
            background: red;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>

<section id="off-a-sec">A</section>
<section id="off-b-sec">B</section>
<section id="off-c-sec">C</section>
<section id="off-d-sec">D</section>
<section id="off-e-sec">E</section>
<hr/>
<button id="off-a-btn">解绑A的所有事件</button>
<br/>
<button id="off-b-btn">解绑B的所有click事件，mouseout事件保留</button>
<br/>
<button id="off-c-btn">解绑C的所有click事件中的myFunctionA处理，myFunctionB保留</button>
<br/>
<button id="off-d-btn">解绑D的所有click.a事件，click.b事件保留</button>
<br/>
<button id="off-e-btn">解绑E的所有.b后缀事件</button>
<br/>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        let offASec = $("#off-a-sec");
        offASec.on("click mouseout", () => console.log("event a..."));

        let offBSec = $("#off-b-sec");
        offBSec.on("click mouseout", () => console.log("event b..."));

        let offCSec = $("#off-c-sec");
        offCSec.on("click", myFunctionA);
        offCSec.on("click", myFunctionB);

        let offDSec = $("#off-d-sec");
        offDSec.on("click.a", () => console.log("click.a..."));
        offDSec.on("click.b", () => console.log("click.b..."));

        let offESec = $("#off-e-sec");
        offESec.on("click.a", () => console.log("click.a..."));
        offESec.on("click.b", () => console.log("click.b..."));
        offESec.on("mouseout.a", () => console.log("mouseout.a..."));
        offESec.on("mouseout.b", () => console.log("mouseout.b..."));


        $("#off-a-btn").on("click", () => {
            offASec.off();
        });

        $("#off-b-btn").on("click", () => {
            offBSec.off("click");
        });

        $("#off-c-btn").on("click", () => {
            offCSec.off("click", myFunctionA);
        });

        $("#off-d-btn").on("click", () => {
            offDSec.off("click.b");
        });

        $("#off-e-btn").on("click", () => {
            offESec.off(".b");
        });

    });

    function myFunctionA() {
        console.log("my function a...");
    }

    function myFunctionB() {
        console.log("my function b...");
    }
</script>
</body>
</html>

jquery（3）事件操作

1. 鼠标事件

2. 窗口事件

3. 表单事件

4. event关键字

5. 事件挂载

6. 事件卸载