jq自定义事件

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

$("button:first").click(function(event,bottonName) {

        bottonName = bottonName || 'first';

        update($("span:first"),$("span:last"),bottonName);

    });

    //通过自定义事件调用，更新次数

    $("button:last").click(function() {

        $("button:first").trigger('click','last');

    });

jq事件对象的属性和方法

event.type：获取事件的类型

触发元素的事件类型

$("a").click(function(event){

    alert(event.type);

});

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

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

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

event.which：获取在鼠标单击时，单击的是鼠标的哪个键:。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素:等同于this

this和event.target的区别：

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

jq事件对象的作用

event

event.target

target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托

event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

卸载事件off()

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

例子

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

删除一个事件

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

删除所有事件

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

快捷方式删除所有的

$("elem").off()

on()的高级用法

委托机制

<div class="left">

    <p class="arron">

        <a>目标节点</a>

</div>

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

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

on()的多事件绑定

最常见的给元素绑定一个点击事件，：

$("#elem").on('click',function(){})

多个事件绑定同一个函数

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

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

多个事件绑定不同函数

$("#elem").on({

    mouseover:function(){},

    mouseout:function(){}

});

jq 键盘事件

keypress()

在input元素上绑定keydown事件会发现一个问题：每次获取的内容都是之前输入的，当前输入的获取不到

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

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

• 只能捕获单个字符，不能捕获组合键

• 无法响应系统功能键（如delete，backspace）

• 不区分小键盘和主键盘的数字字符

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

jq键盘事件

keydown() keyup()

keydown事件：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。

//直接绑定事件

$elem.keydown(handler(eventObject))

//传递参数

$elem.keydown([eventData],handler(eventObject))

//手动触发已绑定的事件

$elem.keydown()

keyup事件：

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

• keydown是在键盘按下就会触发

• keyup是在键盘松手就会触发

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

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

$(ele).mouseenter(function(){
     $(this).css("background", '#bbffaa');
 })
$(ele).mouseleave(function(){
    $(this).css("background", 'red');
})

这样目的是达到了，代码稍微有点多，对于这样的简单逻辑jQuery直接提供了一个hover方法，可以便捷处理

只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件

$(selector).hover(handlerIn, handlerOut)

• handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数

• handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

jq表单事件

submit：开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作

方法一：$ele.submit()

<div id="test">点击触发</div>

$("ele").submit(function(){

    alert('触发指定事件')

})

$("#test").click(function(){

    $("ele").submit()

});

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

<form id="target" action="destination.html">

    <input type="submit" value="Go"/>

</form>

$("#target").submit(function(){

    //this指向form元素

})

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

<form id="target" action="destination.html">

    <input type="submit" value="Go"/>

</form>

$("#target").submit(1111,function(data){

    //data=>1111

});

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

• <input type="submit">

• <input type="image">

• <button type="submit">

• 当某些表单元素获取焦点时，敲击Enter（回车键）

form元素是由默认提交表单的能力，如果通过submit处理，e.preventDefalut()来处理，jq中直接在函数中最后结尾return false即可

mouseover为例：

<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

1. p元素响应事件

2. div元素响应事件

这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

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

jq表单事件

select:当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

方法一：.select()

$("input").select()

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

<input id="test" value="文字选中”></input>

$("#test").select(function(){

    //this指向input元素

}）

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

$("#test").select(1111,function(e){

    //this指向input元素

    //e,data=>1111

}）

jq表单事件

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

input元素

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

select元素

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

textarea元素

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

jq表单事件

blur、focus

focusin与focus的区别

<div>

    <input type="text">

</div>

div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin（）事件

blur与focusout也亦是如此

    <h4>测试二</h4>

    <div class="left">

        <div class="aaron1">

            <p>鼠标移进此区域触发mouseover事件</p>

            <a>进入元素内部,mouseover事件触发次数：</a>

        </div>

    </div>

    <script type="text/javascript">

        var n = 0;

        //绑定一个mouseover事件

        $(".aaron1 p:first").mouseover(function(e) {

            $(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))

        })

    </script>

    <h4>测试三</h4>

    <div class="right">

        <div class="aaron2">

            <p>鼠标移动：不同函数传递数据</p>

            <a>进入元素内部,mouseover事件触发次数：</a>

        </div>

    </div>

    <br/>

    <script type="text/javascript">

        var n = 0;

        //不同函数传递数据

        function data(e) {

            $(".right a").html('mouseover事件触发次数：' + (++n) + '<br/> 传入数据为 ：'+ e.data)

        }

        function a() {

            $(".right p:first").mouseover('data = 慕课网', data)

        }

        a();