jQ的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="button" id="btn" value="点击">
<ul>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
    <li>link5</li>
    <li>link6</li>
</ul>
</body>
<script src="../jquery.js"></script>
<script>

    // 赋值：不允许重复绑定，没有兼容。
    // 监听：可以重复绑定，有兼容

    $("#btn").click(fn)
    function fn(){
        console.log("hello")
    }
     $("#btn").click(function(){
         console.log(2)
     })

    // 总结：jq中只有监听式绑定事件，没有赋值式
    // 注意：jq中只有监听式绑定事件


    // 1.事件名绑定
    // 元素.事件名(函数)
     $("#btn").mousedown(function(){
         console.log(1)
     })

    // 2.on绑定,可做事件委托
     $("#btn").on("click.a",function(){
         console.log(1)
     })
     $("#btn").on("click.b",function(){
         console.log(2)
     })

    // off删除on绑定的方法
     $("#btn").off("click.a")

    // 事件委托,click后面写上委托的元素
     $("ul").on("click","li",function(){
         console.log(this)
     })


    // 3.bind绑定，不能时间委托
     $("#btn").bind("click.a",function(){
         console.log(1)
     });
     $("#btn").bind("click.b",function(){
         console.log(2)
     });

     // unbind删除bind绑定的方法
     $("#btn").unbind("click.a")

    // 4.one绑定,执行一次之后就结束这个事件
     $("#btn").one("click",function(){
         console.log(1)
     })

    // 5.hover绑定：没有事件冒泡，第一个函数是进入，第二个函数是出来。只写一个就只有进入事件
    // mouseover
    // mouseout

    // 没有事件冒泡
    // mouseenter
    // mouseleave
     $("#btn").hover(function(){
         console.log("进入")
     },function(){
         console.log("离开")
     })

    // 6.模拟事件执行
    //每隔一秒会console.log一个1
     setInterval(() => {
         // 有事件冒泡
         $("#btn").trigger("click")
         // 没有事件冒泡
//         $("#btn").triggerHandler("click")
     }, 1000);


</script>
</html>

jq的事件对象

   点击按钮，会出现点击的这个事件的全部信息

 　　$("#btn").click(fn)
   　　 function fn(){
       　　 console.log(event) //MouseEvent {isTrusted: true, screenX: 30, screenY: 91, clientX: 30, clientY: 20, …}
    　　}