jquery基础（三）——事件篇

1.1、jQuery鼠标事件之click与dbclick事件

click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作

$("#test").click(function(){
     $("ele").click()  //手动指定触发事件 
});

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

mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作

$("#test").mousedown(function(){
     $("ele").mousedown()  //手动指定触发事件 
});

1.3、jQuery鼠标事件之mousemove事件

mousemove的快捷方法可以监听用户移动

$("#test").click(function(){
     $("ele").mousemove()  //指定触发事件 
});

1.4、mouseover与mouseout事件

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

1.5、mouseenter与mouseleave事件

mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作

var i = 0;
        $(".aaron1 p").mouseover(function(e) {
            $(".aaron1 a:first").html('mouseover事件触发次数：' + (++i))
        })

mouseover就像是针，一层层元素就像是纸，最外层没有mouseover的时候就一直向下扎，直到扎穿了为止。
mouseenter就像时刷子，刷上哪儿是哪儿

1.6、hover事件

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

$(selector).hover(handlerIn, handlerOut)

1.7、focusin事件

捕获动作的时候，jQuery提供了一个focusin事件

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

1.8、focusout事件

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

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

单处理事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件

2.1、blur与focus事件

事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件

2.2、change事件

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

 //监听input值的改变
    $('.target1').change(function(e) {
        $("#result").html(e.target.value)
    });

    //监听select：
    $(".target2").change(function(e) {
        $("#result").html(e.target.value)
    })

     //监听textarea：
    $(".target3").change(function(e) {
        $("#result").html(e.target.value)
    })

2.3、

select事件

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

//监听input元素中value的选中
    //触发元素的select事件
    $("input").select(function(e){
        alert(e.target.value)
    })
    $("#bt1").click(function(){
        $("input").select();
    })


    //监听textarea元素中value的选中
    $('textarea').select(function(e) {
        alert(e.target.value);
    });

2.4、submit事件

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

  //回车键或者点击提交表单
    $('#target1').submit(function(e) {
        alert('捕获提交表达动作,不阻止页面跳转')
    });
    //回车键或者点击提交表单,禁止浏览器默认跳转：
    $('#target2').submit(function() {
        alert('捕获提交表达动作,阻止页面跳转')
        return false;
    });

3.1、keydown()与keyup()事件

键盘按下与松手，针对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听

 //监听键盘按键
    //获取输入的值
    $('.target1').keydown(function(e) {
        $("em:first").text(e.target.value)
    });

    //监听键盘按键
    //获取输入的值
    $('.target2').keyup(function(e) {
        $("em:last").text(e.target.value)
    });

操作：按下数字键盘的“5”不放
现象：上面的框（keydown）会同步显示输入的值！
下面的框（keyup）当松手之后才会显示输入的值！

3.2、keypress()事件

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

    //监听键盘按键
    //获取输入的值
    $('.target1').keypress(function(e) {
        $("em").text(e.target.value)
    });

4.1、on()的多事件绑定

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

0n的高级用法：

触发事件

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

/给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })

4.2、卸载事件off()方法

• 通过.on()绑定的事件处理程序
• 通过off() 方法移除该绑定

绑定2个事件

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

删除一个事件

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

删除所有事件

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

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁

$("elem").off()

jQuery事件对象的作用

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

event是实际的触发事件的元素，而this是给哪个元素绑定了事件，结合这个例子 event是li，this是ul

不了解什么是冒泡事件的要先去学学"DOM事件揭秘"这个课程,学完就清楚了. 传送门:http://www.imooc.com/learn/138

jQuery自定义事件之trigger事件

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

简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

• 自定义事件可以传递参数

triggerHandler事件

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

trigger会触发浏览器默认行为，比如光标聚集，triggerHandler则不会，它只会显示文本，触发focus事件函数

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left div,
        .right div {
            width: 500px;
            height: 50px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
        }

        .left div {
            background: #bbffaa;
        }

        .right div {
            background: yellow;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>自定义事件triggerHandler</h2>
<div class="left">
    <div id="accident">
        <a>triggerHandler事件</a>
        <input type="text">
    </div>
    <button>事件冒泡,触发浏览器默认聚焦行为</button><br><br>
    <button>不会冒泡，不触发浏览器默认聚焦行为</button>
</div>
<script type="text/javascript">

    //给input绑定一个聚焦事件
    $("input").on("focus",function(event,title) {
        $(this).val(title)
    });

    $("#accident").on("click",function() {
        alert("trigger触发的事件会在 DOM 树中向上冒泡");
    });
    //trigger触发focus
    $("button:first").click(function() {
        $("a").trigger("click");
        $("input").trigger("focus");
    });

    //triggerHandler触发focus
    $("button:last").click(function() {
        $("a").triggerHandler("click");
        $("input").triggerHandler("focus","没有触发默认聚焦事件");
    });



</script>
</body>

</html>

待整理。。。