jQuery事件进阶

在jQuery中，如果想要为元素添加事件，我们有两种方法：一种是“基本事件”（如click()等）；另外一种是“绑定事件”（如on(“click”,function(){}))。

绑定事件

$().on(type, fn)

type是必选参数，它是一个字符串，表示事件类型。例如单击事件是"click"。
fn也是必选参数，它是一个匿名函数，即function(){}。

on()方法不仅可以为“已经存在的元素”添加绑定事件，还可以为“动态创建的元素”添加绑定事件。

$(function () {
            //动态创建元素
            var $btn = $('<input id="btn" type="button" value="按钮">');
            $($btn).appendTo("body");
            //绑定事件
            $("#btn").on("click",function(){
                alert("绿叶，给你初恋般的感觉")
            })
        })

解绑事件

$().off(type)

type是可选参数，它是一个字符串，表示事件类型。例如单击事件是"click"。

合成事件

jQuery为我们提供hover()方法一次性定义鼠标移入mouseenter和鼠标移出mouseleave两个事件。

$().hover(function(){}, function(){})

 $(function () {
            $("h3").hover(function(){
                $("div").css("display", "block");
            }, function(){
                $("div").css("display", "none");
            })
        })

CSS的:hover伪类只限于改变CSS样式，而对于更复杂的操作就没法了
区别mouseover与mouseenter
mouseenter：当鼠标移入元素之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素，再次移入才能触发。并且移入子元素不会触发事件。
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。
也就是说：mouseover支持事件冒泡，而mouseenter不支持事件冒泡。

什么是冒泡，如何阻止冒泡
https://www.cnblogs.com/micro-chen/p/5453870.html
区别visible：hidden与display：none
https://blog.csdn.net/qq_38128179/article/details/80794397

一次事件

$().one(type, fn)

使用one()方法为元素添加一个“只触发一次”的事件。
type是必选参数，表示事件类型。fn也是必选参数，表示事件的处理函数。

自定义事件

用户自己定义的事件。在jQuery中，我们可以使用on()方法来自定义一个事件，然后使用trigger()`方法来触发自定义事件。

$(function () {
            $("#btn").on("delay", function(){//自定义delay事件
                setTimeout(function(){
                    alert("欢迎来到绿叶学习网！")
                },1000)
            })
            $("#btn").click(function(){
                $("#btn").trigger("delay");
            })
        })

$("#btn").on("click" ,function(){
    alert("欢迎来到绿叶学习网！");
}).trigger("click");
//实现自动触发按钮

事件对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。每一个事件，都有一个对应的event对象。

type 事件类型
target 事件元素
which 鼠标左、中、右键
pageX、pageY 鼠标坐标
shiftKey 是否按下shift键
ctrlKey 是否按下ctrl键
altKey 是否按下alt键
keyCode 键码值

event.type

 $(function () {
            $("#btn").click(function(e){
                alert(e.type);    //click
            })
        })

return:click

event.target

使用event对象的target属性来获取触发事件的元素。
在JavaScript中，事件是冒泡的，所以this是可以变化的。但是event.target不会变化，它永远都是触发当前事件的元素。一般来说，(this)和(event.target)是等价的。

$("a").click(function(e){
                var result = $(e.target).attr("href");
                alert(result);
                return false;   //阻止超链接跳转
            })

event.which

可以使用event对象的which属性来获取单击事件中鼠标的左、中、右键。
event.which会返回一个数字，其中1表示左键，2表示中键，3表示右键。

 $("a").mousedown(function(e){
                switch(e.which){
                    case 1: alert("你点击的是左键");break;
                    case 2: alert("你点击的是中键");break;
                    case 3: alert("你点击的是右键");break;
                }
            })

event.pageX和event.pageY

event.pageX
event.pageY

使用event对象的pageX和pageY这两个属性来分别获取鼠标相对于页面左上角的坐标。该坐标是以页面作为参考点，不随滚动条移动而变化。
$(document).mousemove(function(e){
var result = “鼠标坐标为：（” + e.pageX + “，” + e.pageY + “）”;
$(“body”).text(result);
})

KeyCode

event.keyCode

获取按下键盘的是哪个键，可以使用event对象的keyCode属性来获取。
event.keyCode返回的是一个数值，对应的键码。

 $(document).keydown(function(e){
                if (e.shiftKey || e.altKey || e.ctrlKey) {
                    alert("禁止使用Shift、Ctrl、Alt键！")
                }
            })

e.keyCode返回的是一个数字，而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值（true或false）。

this

this始终指向触发当前事件的元素