jQuery详解之事件

这篇的总结是我在看了jQuery的中文文档后写出来的，如果需要查看更详细的细节，请查看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>

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>

 

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>

 

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>

 

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（）

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

 

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

二、绑定事件以及解绑

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上面点击的时候，控制台会输出什么。

 

可以看到虽然我们只点击了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之后，其余的处理函数将不起作用）。