jQuery详解之事件

Bertha 。 2022-04-08 08:17 268阅读 0赞

**这篇的总结是我在看了jQuery的中文文档后写出来的，如果需要查看更详细的细节，请查看**[https://www.jquery123.com/][https_www.jquery123.com]

**一、常用事件**

1.点击事件click

.click( handler(eventObject) )

2.双击事件dbclick

3.鼠标在元素上的时候mouseenter

4.鼠标移开mouseleave

5.hover()，第一个参数是鼠标移入时候的处理函数，第二个参数是鼠标离开元素的处理函数

6.鼠标在元素内移动的时候mousemove()

7.鼠标离开元素的时候mouseout()

8.鼠标进入元素内mouseover

9.鼠标按键按下mousedown

10.鼠标按键被释放mouseup

11.元素失去焦点触发blur()，带参数（事件处理函数）的时候为失去焦点事件绑定一个事件处理函数，不带参数就是触发元素的失去焦点的事件。

.blur( handler(eventObject) )为 "blur" 事件绑定一个处理函数，或者触发元素上的 "blur" 事件（注：此事件不支持冒泡）。

12、元素得到焦点focus()

<div class="container">
    
        <div class="content">
    
          <input type="text">
    
        </div>
    
    </div>
    
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    
    <script>
    
       $("input:text").blur(function () {
    
           console.log("input 失去焦点");
    
       });
    
       $("input:text").focus(function () {
    
           console.log("input 得到焦点");
    
       });
    
    
    
    </script>

![20181207104651174.gif][]

13、focusin 事件会在元素（或者其内部的任何元素）获得焦点时触发。这跟 focus 事件的显著区别在于，它可以在父元素上检测子元素获得焦点的情况(换而言之，它支持事件冒泡)。

14、focusout 事件会在元素（或者其内部的任何元素）失去焦点时触发。这跟 blur 事件的显著区别在于，它可以在父元素上检测子元素失去焦点的情况(换而言之，它支持事件冒泡)。

<div class="container">
    
        <div class="content">
    
          <input type="text">
    
        </div>
    
    </div>
    
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    
    <script>
    
       $(".content").focusin(function () {
    
           console.log("content 下的input 得到焦点");
    
       });
    
       $(".content").focusout(function () {
    
           console.log("content 下的input 失去焦点");
    
       });
    
    
    
    </script>

![20181207104651144.gif][]

15.鼠标滚动的时候触发：scroll（）

.scroll( handler(eventObject) )

$(window).scroll(function () {
    
    $("span").css("display", "inline").fadeOut("slow");
    
    });

16.window窗口改变尺寸的的时候触发resize()

.resize( handler(eventObject) )

$(window).resize(function() {
    
    $('body').prepend('<div>' + $(window).width() + '</div>');
    
    });

17.当dom加载完毕之后触发ready()

这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。当使用的脚本依赖 CSS 属性值时，需要特别注意，要保证外部的样式或内嵌的样式被加载完后，再调用脚本。

$(document).ready(function() {
    
    // Handler for .ready() called.
    
    });

18.所有子元素已经被完全加载完成时load（）

<img src="book.png" alt="Book" id="book" />
    
    $('#book').load(function() {
    
    // Handler for .load() called.
    
    });

19、当元素的值发生改变的时候触发，change()。‘

’此事件只有input元素、textarea、select元素可以被触发，对于下拉选择框，复选框和单选按钮，当用户用鼠标作出选择，该事件立即触发，但对于其他类型的input元素，该事件触发将推迟，直到元素失去焦点才会触点。

.change( handler(eventObject) )

<div class="container">
    
        <div class="content">
    
          <input type="text">
    
            <select>
    
                <option>1</option>
    
                <option>2</option>
    
            </select>
    
        </div>
    
    </div>
    
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    
    <script>
    
       $("input:text").change(function () {
    
           console.log($("input:text").val());
    
       });
    
       $("select").change(function () {
    
           console.log($("select option:selected").text());
    
       });
    
    </script>

![20181207104651332.gif][]

20.用户在页面上选择文本的时候会被触发

当用户在一个元素中进行文本选择时，这个元素上的select事件就会被触发。此事件只能用在<input type="text"> 和<textarea>。

<div class="container">
    
        <div class="content">
    
          <input type="text">
    
        </div>
    
    </div>
    
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    
    <script>
    
       $(".content").select(function () {
    
           console.log("content 下的input 的文本被选择了");
    
       });
    
    </script>

![20181207104651174.gif][]

21、表单提交事件submit()

用户试图提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在<form>元素上.

以下几种情况会导致表单被提交：用户点击了<input type="submit">, <input type="image">, 或者 <button type="submit">，或者当某些表单元素获取焦点时，敲击Enter（回车键），都可以提交。

22、keydown()当用户在元素按下键盘的时候触发

keydown( handler(eventObject) )为 "keydown" 事件绑定一个处理函数，或者触发元素上的 "keydown" 事件。

它可以绑定到任何元素，但该事件只是发送到具有焦点的元素上。不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

23、keypress（）

跟13一样

24、keyup（）

当按键被释放的时候触发。

上面三个事件都是，当有一个事件处理函数作为参数的时候，那么这个函数就是当事件被触发的时候所调用，而没有参数的时候，就是去触发这个事件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

**二、绑定事件以及解绑**

1.绑定事件bind，可以为同一份个事件同时触发多个处理函数

$("div").bind("click",functionname);

2.解绑事件unbind，直接传入需要解绑的事件，把所有的事件处理函数都清除，如果第二个参数传入指定的事件处理函数，则只清除对应的事件处理函数

$("div").unbind("click");

3.绑定事件on（jQuery1.7之后）

$("div").on("click",functionname);

4.解绑事件off（jQuery1.7之后）

$("div").off("click",functionname);

5.绑定事件delegate()

.delegate( selector, eventType, handler(eventObject) )返回: jQuery

描述: 为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。

$("body").delegate("p", "click", function(){
    
    alert( $(this).text() );
    
    });

6.解绑事件undelegate()

.undelegate( selector, eventType, handler(eventObject) )

$("p").undelegate( "click" )

**三、事件目标与冒泡**

什么是事件的目标和事件的冒泡

首先我们先来了解一下什么是事件的目标（target），

我们先来组织一下布局

<div class="container">
    
        <div class="content">
    
            <button id="btn">my button</button>
    
        </div>
    
    </div>

然后给button和content都添加点击事件

$("#btn").on("click",function () {
    
        console.log("button事件")
    
       console.log(event);
    
    });
    
    $(".content").on("click",function () {
    
        console.log("content事件：");
    
        console.log(event);
    
    });

我们为这两个都添加了点击事件，当它们被点击的时候，就会在控制台输出当前事件的属性。我们来看一下，当在button上面点击的时候，控制台会输出什么。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1][]

可以看到虽然我们只点击了button，但是content的点击事件也被触发了，因为button被点击的时候他的currentTarget和target都是他自己，但是此时，content的currentTarget是它自己，target却是button！！

可以看到，父级元素content也被触发了！

所以我们就可以明白了，**其实事件的目标target就是那个触发事件的元素，在这里无论是button还是content，这个target就是button！！。**

但是如果我们触发事件的时候并不想要父级元素被触发怎么办？？因为js的**事件是从下往上冒泡上去**的，所以此时我们阻止冒泡事件就好了。

但是看到官方文档中有

**event.stopImmediatePropagation()阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。**

**event.stopPropagation()防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数**

其中stopImmediatePropagation是阻止**当前元素的其他的处理函数**（就是如果button中的click事件有多个处理函数，那么当当前的处理函数使用了stopImmediatePropagation之后，其余的处理函数将不起作用）。

[https_www.jquery123.com]: https://www.jquery123.com/
[20181207104651174.gif]: /images/20220407/8df453e35f094eccb94f2317cd9dd2f1.png
[20181207104651144.gif]: /images/20220407/6684b86ca1f5404d8ac8868b43ea9e19.png
[20181207104651332.gif]: /images/20220407/6f28ca074f06424b926a2cdfd7ada8a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220407/cf6fb69a131441d39f0de0ef32cf5262.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220407/4cffac6117e842a78cf4c4e348fdb324.png