jQuery基础(三)—事件篇（慕课网）

第一章 事件介绍

第二章 鼠标事件

2-1 jQuery鼠标事件之click与dbclick事件

click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作。
使用方法：
方法一：$ele.click()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

<div id="test">点击触发<div>
$("ele").click(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").click()  //手动指定触发事件 
});

方法二：$ele.click( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

<div id="test">点击触发<div>
$("#test").click(function() {
    //this指向 div元素
});

方法三：$ele.click( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 传递数据
});

核心代码理解：

• 先定义了一个带参数的函数data，传出这个参数里的数据；
• 再定义一个带传递数据的点击函数，调用data函数；
• 执行入口函数。
  执行顺序是由上至下的，人的思维逻辑是由下至上的。

<script type="text/javascript">

        //不同函数传递数据
        function data(e) {
            alert(e.data) //1111
        }

        function a() {
            $("button:eq(2)").click(1111, data)
        }
        a();

    </script>

2.2 JQ鼠标事件之mousedown与mouseup事件

方法一：$ele.mousedown()
方法二：$ele.mousedown( handler(eventObject) )
方法三：$ele.mousedown( [eventData ], handler(eventObject) )
注意：click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发

<script type="text/javascript">
    //不同函数传递数据
    function data(e) {
        alert(e.data) //1111
    }

    function a() {
        $("button:eq(2)").mousedown(1111, data)
    }
    a();
    </script>

2.3 jQuery鼠标事件之mousemove事件

方法一：$ele.mousemove()
方法二：$ele.mousemove( handler(eventObject) )
方法三：$ele.mousemove( [eventData ], handler(eventObject) )

<script type="text/javascript">
    //不同函数传递数据
    function data(e) {
        $(this).find('p:last').html('数据:' + e.data)
    }

    function a() {
        $(".right").mousemove(1111, data)
    }
    a();
    </script>

2.4 jQuery鼠标事件之mouseover与mouseout事件

方法一：$ele.mouseover()
方法二：$ele.mouseover( handler(eventObject) )
方法三：$ele.mouseover( [eventData ], handler(eventObject) )

2.5 jQuery鼠标事件之mouseenter与mouseleave事件

事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发
所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

(2.6丢到月球啦……为了章节与该课程匹配，就这样吧……)

2.7 jQuery鼠标事件之hover事件

<script type="text/javascript">

    // hover()方法是同时绑定 mouseenter和 mouseleave事件。
    // 我们可以用它来简单地应用在 鼠标在元素上行为
    $("p").hover(
        function() {
            $(this).css("background", 'red');
        },
        function() {
            $(this).css("background", '#bbffaa');
        }
    );


    </script>

一般自己写的时候ele:hover{ }就好了，用js更改的时候用到这个吧……

2.8 jQuery鼠标事件之focusin事件

当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件。
方法一：$ele.focusin()
方法二：$ele.focusin( handler )
方法三：$ele.focusin( [eventData ], handler )

2.9 jQuery鼠标事件之focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件。
方法一：$ele.focusout()
方法二：$ele.focusout( handler )
方法三：$ele.focusout( [eventData ], handler )

第三章 表单事件

3.1 jQuery表单事件之blur与focus事件

在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件
它们之间的本质区别:

是否支持冒泡处理

focus()在元素本身产生，focusin()在元素包含的元素中产生

3.2 jQuery表单事件之change事件

可用于监听：input元素、select元素、textarea元素。

3.3 jQuery表单事件之select事件

方法一：.select()
方法二：$ele.select( handler(eventObject) )
方法三：$ele.select( [eventData ], handler(eventObject) )

3.4 jQuery表单事件之submit事件

方法一：$ele.submit()
方法二：$ele.submit( handler(eventObject) )
方法三：$ele.submit( [eventData ], handler(eventObject) )

第四章 键盘事件

4.1 jQuery键盘事件之keydown()与keyup()事件

注意：

• keydown是在键盘按下就会触发
• keyup是在键盘松手就会触发
• 理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

<script type="text/javascript">
    //监听键盘按键
    //获取输入的值
    $('.target1').keydown(function(e) {
        $("em:first").text(e.target.value)
    });

    //监听键盘按键
    //获取输入的值
    $('.target2').keyup(function(e) {
        $("em:last").text(e.target.value)
    });

    </script>

4.2 jQuery键盘事件之keypress()事件

在input元素上绑定keydown事件会发现一个问题：

每次获取的内容都是之前输入的，当前输入的获取不到

KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

第五章 事件的绑定和解绑

5.1 on()的多事件绑定

基本用法：.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

5.2 on()的高级用法

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

例子：

$("div").on("click","p",fn)

$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

    <h2>on事件委托</h2>
    <div class="left">
        <div class="aaron">
            <a>点击这里</a>
        </div>
    </div>
    <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
    </script>
</body>

5.3 卸载事件off()方法

• 通过.on()绑定的事件处理程序
• 通过off() 方法移除该绑定

绑定2个事件

$("elem").on("mousedown mouseup",fn)

删除一个事件

$("elem").off("mousedown")

删除所有事件

$("elem").off("mousedown mouseup")

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁

$("elem").off()

第六章 事件对象的使用

6.1 jQuery事件对象的作用

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

event.target

target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素。

<h3>事件委托，通过事件对象区别触发元素</h3>
    <div class="left">
        <div class="aaron">
            <ul>
                <li>点击：触发一</li>
                <li>点击：触发二</li>
                <li>点击：触发三</li>
                <li>点击：触发四</li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">

        //多事件绑定一
        $("ul").on('click',function(e){
           alert('触发的元素是内容是: ' + e.target.textContent)
        })



    </script>

6.2 jQuery事件对象的属性和方法

• 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)的使用；

<body>
    <h3>事件对象的属性与方法</h3>
    <div class="left">
        <div id="content">
            外层div元素
            <br />
            <span style="background: silver;">内层span元素</span>
            <br /> 外层div元素
        </div>
        <br />
        <div id="msg"></div>
    </div>
    <script type="text/javascript">
    //为 <span> 元素绑定 click 事件  
    $("span").click(function() {
        $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
    });
    //为 Id 为 content 的 <div> 元素绑定 click 事件  
    $("#content").click(function(event) {
        $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
        event.stopPropagation(); //阻止事件冒泡  
    });
    //为 <body> 元素绑定 click 事件  
    $("body").click(function() {
        $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
    });
    </script>
</body>

第七章 自定义事件

7.1 jQuery自定义事件之trigger事件

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自触自定义时间")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])

7.1 jQuery自定义事件之triggerHandler事件

triggerHandler与trigger的用法是一样的，重点看不同之处：

• triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
• .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
• 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
• 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

     <script type="text/javascript">
     //给input绑定一个聚焦事件
     $("input").on("focus",function(event,title) {
       $(this).val(title)
       });

       $("#accident").on("click",function() {
       alert("trigger触发的事件会在 DOM 树中向上冒泡");
         });
           //trigger触发focus
             $("button:first").click(function() {
       $("a").trigger("click");
       $("input").trigger("focus");
           });

           //triggerHandler触发focus
           $("button:last").click(function() {
       $("a").triggerHandler("click");
       $("input").triggerHandler("focus","没有触发默认聚焦事件");
           });
       </script>

---

---

---

---

---

---