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

客官°小女子只卖身不卖艺 2021-06-24 16:11 384阅读 0赞

### 第一章 事件介绍 ###

![2789632-b0fe888e12bd33a6.png][]

### 第二章 鼠标事件 ###

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

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

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

方法二：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函数；
 *  执行入口函数。  
    执行顺序是由上至下的，人的思维逻辑是由下至上的。

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

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

##### 2.3 jQuery鼠标事件之mousemove事件 #####

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

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

方法一：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事件 #####

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

##### 2.8 jQuery鼠标事件之focusin事件 #####

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

##### 2.9 jQuery鼠标事件之focusout事件 #####

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个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( \[eventData \], handler(eventObject) )

##### 3.4 jQuery表单事件之submit事件 #####

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

### 第四章 键盘事件 ###

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

###### 注意： ######

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

##### 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和(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

--------------------

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-b0fe888e12bd33a6.png]: /images/20210615/5e3f414e3c1c4a889450d646ceedd794.png
[2789632-3b18269684ea9294.png]: /images/20210615/a60cefde6e3d4b3cb2f3663da90ab183.png