jQuery基础(三、事件)

鼠标事件

1、jQuery鼠标事件之click与dbclick事件
常见的交互操作中的点击操作。
.click有三个方法：
方法一：$ele.click()

不带任何参数一般是用来指定触发一个事件。
使用示例：如下，页面中有个div块和一个按钮，我们点击按钮来触发div块的点击事件。(这里我们给div块绑定了点击事件，但是并没有通过自身的点击事件来触发。)

<div>div部分</div><input type="button" value="触发div的点击事件"><script type="text/javascript">    $("div").click(function () {            alert("我是div");    })    $("input").click(function () {            $("div").click();    })

方法二：$ele.click( handler(eventObject) )

绑定ele元素，每次ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了。
栗子：点击页面中的div，执行其回调函数。

<div>div部分</div><script type="text/javascript">    $("div").click(function () {       alert("执行了回调函数");    });</script>

方法三：$ele.click( [eventData ], handler(eventObject) )：

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题。

栗子：我们来进行一下，不同函数之间的数据传递。通过点击div块，向data()函数传递数据，并且弹出获取到的数据。

<div>div部分</div><script type="text/javascript">    function  data(dt) {        alert(dt.data);    }    $("div").click(123456,data);</script>

结果显示：

dbclick与click事件不同的是：
click事件触发需要以下几点：

click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发

dblclick事件触发需要以下几点：

dblclick又是由2个click叠加而来的，所以dblclick事件只有在满足以下条件的情况下才能被触发
1、鼠标指针在元素里面时点击
2、鼠标指针在元素里面时释放
3、鼠标指针在元素里面时再次点击，点击间隔时间是由系统定的
4、鼠标在元素里面时再次释放。

注意：

在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度。

2、jQuery鼠标事件之mousedown与mouseup事件

jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作。两种方法用法类似。

方法一：$ele.mousedown()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件。

方法二：$ele.mousedown( handler(eventObject) )

绑定ele元素，每次ele元素触发点击操作会执行回调 handler函数。

方法三：$ele.mousedown( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题。

mousedown事件触发需要以下几点：

1、mousedown强调是按下触发
2、如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件
3、任何鼠标按钮被按下时都能触发mousedown事件
4、用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

mouseup事件触发需要以下几点：

1、mouseup强调是松手触发，与mousedown是相反的
2、mouseup与mousedown组合起来就是click事件
3、如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件
4、任何鼠标按钮松手时都能触发mouseup事件
5、用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

3、jQuery鼠标事件之mousemove事件

交互操作中，经常需要知道用户是否有移动的操作。基于移动的机制可以做出拖动、拖拽一系列的效果出来。针对移动事件，jQuery提供了一个mousemove的快捷方法可以监听用户移动的的操作。
方法一：$ele.mousemove()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件。

方法二：$ele.mousemove( handler(eventObject) )

绑定ele元素，每次ele元素触发点击操作会执行回调 handler函数

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

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题。

使用示例：我们再下面的div块上移动鼠标，就会触发mousemove事件。

<div style="width: 100px;height: 100px;background: red;"></div><script type="text/javascript">    $("div").mousemove(function () {        alert("移动触发");    })

mousemove事件触发需要以下几点：

1、mousemove事件是当鼠标指针移动时触发的，即使是一个像素
2、如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题。

4、jQuery鼠标事件之mouseover与mouseout事件

JS中有两个移出移入事件，seover()与onmouseout()事件。
jQuery当中同样提供了这样的事件来监听用户的移入移出操作，mouseover()与mouseout()事件，两者用法类似。
方法一：$ele.mouseover()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件

方法二：$ele.mouseover( handler(eventObject) )

绑定ele元素，每次ele元素触发点击操作会执行回调 handler函数

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

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题。

栗子：我们在一个div块上，做鼠标移出移入的操作，查看显示结果。

<div style="width: 100px;height: 100px;background: red;"></div><script type="text/javascript">    $("div").mouseover(function () {        $("div").css('background','yellow');    })    $("div").mouseout(function () {        $("div").css('background','blue');    })</script>

显示结果：

5、jQuery鼠标事件之mouseenter与mouseleave事件

用交互操作中，经常需要知道用户操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作。

mouseenter事件和mouseover的区别

关键点就是：冒泡的方式处理问题
栗子：

<div class="arron">    <div style="width: 100px;height: 100px;background: red;">离开此部分触发mouseleave事件</div></div><script type="text/javascript">    $("div").mouseleave(function () {        $("div").css('background', 'yellow');    })</script>

在这里我们发现一个问题，在离开子div的时候，同时给父div添加了切换为黄色背景的属性。子div响应了事件，同时父div响应了此事件，这个就是事件冒泡。这个时候，jQuery推荐我们使用mouseenter事件。

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

6、jQuery鼠标事件之hover事件

在元素上移进移出切换其换色，一般通过2个事件配合就可以达到，这里用mouseenter与mouseleave，这样可以避免冒泡问题。

我们来用代码实现一个在目标区域上移出移入改变背景颜色的效果。

<div></div><script type="text/javascript">    $("div").mouseleave(function () {        $("div").css('background', 'blue');    })    $("div").mouseenter(function () {        $("div").css('background', 'yellow');    })</script>

这里看来，代码是否有些繁琐呢？jQuery给我们提供了一个hover方法，便捷处理。

只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

例如上面的就可以写成：

 $("div").hover(function () {                $("div").css('background', 'yellow');            },            function () {                $("div").css('background', 'blue');            })

显示结果：

7、jQuery鼠标事件之focusin事件

当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件。
方法一：$ele.focusin()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件

方法二：$ele.focusin( handler )

绑定ele元素，每次ele元素触发点击操作会执行回调 handler函数

方法三：$ele.focusin( [eventData ], handler )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

栗子：展示效果。

    <input type="text" value="请输入"><script type="text/javascript">    $("input").focus(function () {            alert("输入框获取到了焦点");    })

8、jQuery鼠标事件之focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件。

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

使用示例：例如上面栗子，我们将其修改。

    <input type="text" value="请输入"><script type="text/javascript">    $("input").focusout(function () {            alert("输入框失去了焦点");    })

显示结果：input失去焦点时触发事件。

表单事件

1、jQuery表单事件之blur与focus事件

我们学过表单处理事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件。
它们之间的本质区别是：focusin与focuout支持事件冒泡。
focus与blur事件：不支持冒泡。

2、jQuery表单事件之change事件

< input>元素，< textarea>和< select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件

栗子：我们分别监听input、select以及textarea标签，内容改变。

<div>    <input class="input" type="text" value="请输入"></div><br><br><div>    <select class="select">        <option value="option1" selected="selected">Option 1</option>        <option value="option2">Option 2</option>        <option value="option2">Option 3</option>        <option value="option2">Option 4</option>    </select></div><br><br><div>textarea：    <textarea class="textarea" rows="3" cols="20">多行的文本输入控件</textarea></div><script type="text/javascript">    $(".input").change(function () {        alert("input内容改变了");    })    $(".select").change(function () {        alert("select内容改变了");    })    $(".textarea").change(function () {        alert("textarea内容改变了");    })</script>

显示结果：

3、jQuery表单事件之select事件

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

select事件只能用于< input>元素与< textarea>元素

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

栗子：监听input元素中value的选中，触发元素的select事件

<input type="text" value="选中此文本框的内容"><script type="text/javascript">    $("input").select(function () {        alert(this.value);    })</script>

结果显示：

4、jQuery表单事件之submit事件

提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作。

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

通过在< form>元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为。
具体能触发submit事件的行为：

< input type=”submit”>
< input type=”image”>
< button type=”submit”>
当某些表单元素获取焦点时，敲击Enter（回车键）

注意：

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可

jQuery处理如下：

$("#target").submit(function(data) {    return false; //阻止默认行为，提交表单});

栗子：我们做一个登陆的简单功能。
页面代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>用户登录</title>    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>    <style type="text/css">        * {            margin: 0px;            padding: 0px;        }        .login_content{            width: 300px;            height: 500px;            background: #cccccc;        }        h2{            margin: 0px auto;            font-size: 24px;            color: #ffffff;            background: aquamarine;            text-align: center;            line-height: 48px;        }        .content{            width: 100%;        }        input{            width: 266px;            height: 40px;            line-height: 48px;            margin: 20px 15px auto;        }        #btn_login{            width: 270px;        }    </style></head><body><div class="login_content">    <h2>登录</h2>    <div class="content">        <form action="#" id="login">            <input id="acount" type="text" placeholder="请输入用户名">            <input id="password" type="password" placeholder="请输入密码">            <input  type="submit" value="登录">        </form>    </div></div><script type="text/javascript">    $("#login").submit(function () {        var acount=$("#acount").val();        var password=$("#password").val();        alert("正在登录中...用户名为："+acount+"---密码为"+password);      //回车键或者点击提交表单,禁止浏览器默认跳转：     // return false;    })</script></body></html>

结果显示：

键盘事件

1、jQuery键盘事件之keydown()与keyup()事件

鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件，将用户行为分解成2个动作，键盘按下与松手，针对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听。

1、keydown事件：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法

//直接绑定事件$elem.keydown( handler(eventObject) )//传递参数$elem.keydown( [eventData ], handler(eventObject) )//手动触发已绑定的事件$elem.keydown()

2、keyup事件：

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的。

注意：

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

2、jQuery键盘事件之keypress()事件
在input元素上绑定keydown事件会发现一个问题：每次获取的内容都是之前输入的，当前输入的获取不到。

keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

keypress事件与keydown和keyup的主要区别：

1、只能捕获单个字符，不能捕获组合键
2、无法响应系统功能键（如delete，backspace）
3、不区分小键盘和主键盘的数字字符
总的来说：
KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

事件的绑定与解绑

1、on()的多事件绑定

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法：

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

通过.on()方法，点击事件我们可以写成这样：

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

1、多个事件绑定同一个函数
通过空格分离，传递不同的事件名，可以同时绑定多个事件

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

2、多个事件绑定不同函数
通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法。

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

3、将数据传递到处理程序
可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的。

function greet( event ) {  alert( "Hello " + event.data.name ); //Hello 妹子}$( "button" ).on( "click", {  name: "幺妹"}, greet );

2、on()的高级用法
委托机制

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

在on的第二参数中提供了一个selector选择器。

栗子，例如以下结构：

<div class="left">    <p class="aaron">        <a>目标节点</a> //点击在这个元素上    </p></div>给p标签添加点击事件：$("div").on("click","p",fn)

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

3、卸载事件off()方法

通过.on()绑定的事件处理程序
通过off() 方法移除该绑定
、
根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。

使用方法：
绑定两个事件：

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

删除一个事件：

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

删除所有事件：

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

快捷方式删除所有事件，节点上绑定的所有事件全部销毁：

$("elem").off()

事件对象的使用

1、jQuery事件对象的作用
事件对象Event。
标准的‘click’点击事件。

$(elem).on("click",function(event){   event //事件对象})

在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jQuery根据 W3C 标准规范了事件对象，所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象。

小案例：

<ul>    <li class="even1"></li>    <li class="even2"></li>    <li class="even2"></li>    .........</ul>

ul有N个子元素li，如果需要响应每一个li的事件，那么常规的方法就是需要给所有的li都单独绑定一个事件对象，这样写起来会更繁琐。

所有的li元素都有一个共同的父元素，而且所有的事件都是一致的，这里可以采用”事件委托”来处理。事件没有直接个li元素发生关系，与父元素进行绑定。由于浏览器具有事件冒泡的特性，我们可以在触发li的时候把这个事件往上冒泡到ul上，这个时候ul就能够响应绑定事件了。

事件对象：

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

既然事件对象是跟当前触发元素息息相关的，所以我们就能从里面相关的信息，从事件对象中找到 event.target。
event.target：

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

栗子：我们给ul列表进行多事件绑定。

 <ul>        <li>内容1</li>        <li>内容2</li>        <li>内容3</li>        <li>内容4</li>        <li>内容5</li>        <li>内容6</li>        <li>内容7</li>        <li>内容8</li>    </ul>    <script type="text/javascript">        $("ul").on('click',function (e) {            alert("点击的元素内容为："+e.target.textContent);        })    </script>

显示结果：

2、jQuery事件对象的属性和方法
1、event.type：获取事件的类型
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

2、event.preventDefault() 方法：阻止默认行为

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

3、event.stopPropagation() 方法：阻止事件冒泡

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

4、event.which：获取在鼠标单击时，单击的是鼠标的哪个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

5、event.currentTarget : 在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

6、this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

7、.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和(this)的使用、event.target和(event.target)的使用；

jQuery自定义事件

1、jQuery自定义事件之trigger事件
我们有个点击事件，通过jQuery的on方法进行绑定。

$('#elem').on('click', function() {    alert("触发系统事件") });

这个时候，我们只要对目标元素进行点击即可触发事件！如果我们需要在某一个时刻自动触发程序呢？jQuery提供了trigger方法来触发浏览器事件。
我们可以这样写：

$('#elem').trigger('click');

.trigger 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

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

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

trigger触发浏览器事件与自定义事件区别？

1、自定义事件对象，是jQuery模拟原生实现的
2、自定义事件可以传递参数

2、jQuery自定义事件之triggerHandler事件

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题：事件对象event无法完美的实现，尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替。

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

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