@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ChapterFourOn</title>
    <style>
        div {
            width:400px;
            height:100px;
            margin:20px auto;
            border:1px solid #ccc;
            background:#9759dd;
            font-size:20px;
            text-align:center;
            line-height:100px;
            color:#fff;
        }
        p {
            text-align:center;
        }
    </style>
</head>
<body>
    <p>点击触发：on('click',fn)</p>
    <div id="div1"> </div>
    <p>点击触发：on('mousedown mouseup')</p>
    <div id="div2"> </div>
    <p>点击触发：on(mousedown:fn1,mouseup:fn2)</p>
    <div id="div3"> </div>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <script>
        //事件的绑定和解绑
        //4-1 on()的多事件绑定
        /*之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。
        基本用法：on(events,[selector],[data],fn)  在选择元素上绑定一个或多个事件的事件处理函数。

        最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
        $("#elem").click(function(){})  //快捷方式
        $("#elem").on('click',function(){}) //on方式
        最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看
            多个事件绑定同一个函数
            $("#elem").on("mouseover mouseout",function(){ });
            通过空格分离，传递不同的事件名，可以同时绑定多个事件

        多个事件绑定不同函数
            $("#elem").on({
                mouseover:function(){},  
                mouseout:function(){}
            });
        通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
        */
        //给元素绑定一个点击事件 on方式
        $("#div1").on('click', function (e) {//事件对象看最下面：
            //e为事件对象 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
            
            $(this).text("触发事件：" + e.type);
            console.log(e);//浏览器控制台看输出结果
            /*event.target
            target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
            简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
            */
        });
        //多个事件绑定同一个函数 
        $("#div2").on("mousedown mouseup", function (e) {
            $(this).text("触发事件：" + e.type);
        });
        //多个事件绑定不同函数
        $("#div3").on({
            mousedown: function (e) {
                $(this).text("触发事件：" + e.type);
            },
            mouseup: function (e) {
                $(this).text("触发事件：" + e.type);
            }
        });
        //4-2 卸载事件off()方法
        /*通过.on()绑定的事件处理程序
            通过off() 方法移除该绑定
            根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除

            绑定2个事件
            $("elem").on("mousedown mouseup",fn)

            删除一个事件
            $("elem").off("mousedown")

            删除所有事件
            $("elem").off("mousedown mouseup")

            快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
            $("elem").off()*/
        $("#div2").off("mousedown mouseup");//移除div2的mousedown 和mouseup事件
        $("#div3").off();//off()不带参数 快捷方式删除所有事件

        //事件对象：Query事件对象的属性和方法
        /*
            事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别
            event.type：获取事件的类型
                触发元素的事件类型
                $("a").click(function(event) {
                  alert(event.type); // "click"事件
                });
            event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
                通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
            event.preventDefault() 方法：阻止默认行为
                这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
            event.stopPropagation() 方法：阻止事件冒泡
                事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
            event.which：获取在鼠标单击时，单击的是鼠标的哪个键
                event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3
            event.currentTarget : 在事件冒泡过程中的当前DOM元素
                冒泡前的当前触发事件的DOM对象, 等同于this.
            this和event.target的区别：
                js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
            .this和event.target都是dom对象
                如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；
        */
    </script>
</body>
</html>