jQuery基础（三）事件

1、鼠标事件

jQuery鼠标事件之click与dblclick事件

click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作。

• 方法一：$ele.click()
  
  绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

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

• 方法二：$ele.click( handler(eventObject) )
  
  绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

<div id="test">点击触发<div>
$("#test").click(function() {
    //this指向 div元素
});

• 方法三：$ele.click( [eventData ], handler(eventObject) )
  
  使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

dblclick()的用法和click()的用法是类似的，可以参考以上click()的用法。

jQuery鼠标事件之mousedown与mouseup事件

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

    <h4>测试一</h4>
    <button>弹出回调中的鼠标键</button>
    <script type="text/javascript">
    //this指向button元素
    $("button:eq(0)").mousedown(function(e) {
        alert('e.which: ' + e.which)
    })
    </script>

    <h4>测试二</h4>
    <div class="test2">
        <p>$('button:first').mousedown(function(e) {alert(this)})</p>
    </div>
    <button>指定触发事件</button>
    <script type="text/javascript">
    $('p').mousedown(function(e) {
            alert(e.target.textContent)
        })
        //this指向button元素
    $("button:eq(1)").mousedown(function() {
        $('p').mousedown() //指定触发绑定的事件
    })
    </script>

    <h4>测试三</h4>
    <div class="test3">
        <p>$('.right').mousedown(1111, set)</p>
    </div>
    <button>不同函数传递数据</button>
    <script type="text/javascript">
    //不同函数传递数据
    function mydata(e) {
        alert(e.data) //1111
    }

    function a() {
        $("button:eq(2)").mousedown(1111, mydata)
    }
    a();
    </script>

注意：

• 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
• target：返回触发事件的节点
• e：指代event（事件）
• data：是event的属性
• $ele.click( [eventData ], handler(eventObject) )eventData可以被当作参数传递到事件event的data属性里

jQuery鼠标事件之mousemove事件

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

• 方法一：$ele.mousemove()
  
  绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

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

• 方法二：$ele.mousemove( handler(eventObject) )
  
  绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
  
  这样可以针对事件的反馈做很多操作了

<div id="test">滑动触发<div>
$("#test").mousemove(function() {
    //this指向 div元素
});

• 方法三：$ele.mousemove( [eventData ], handler(eventObject) )
  
  使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>
$("#test").mousemove(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

• jQuery html() 方法：html() 方法设置或返回被选元素的内容（innerHTML）。

jQuery鼠标事件之mouseover与mouseout事件

移入移出事件

• 方法一：$ele.mouseover()
  
  绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

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

• 方法二：$ele.mouseover( handler(eventObject) )
  
  绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
  
  这样可以针对事件的反馈做很多操作了

<div id="test">滑动触发<div>
$("#test").mouseover(function() {
    //this指向 div元素
});

• 方法三：$ele.mouseover( [eventData ], handler(eventObject) )
  
  使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>
$("#test").mouseover(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

jQuery鼠标事件之mouseenter与mouseleave事件

mouseenter事件和mouseover的区别

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

简单的例子：

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事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

这就是最本质的区别。

jQuery鼠标事件之hover事件

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件，避免冒泡问题。

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

$(selector).hover(handlerIn, handlerOut)

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

    <script type="text/javascript">

    // hover()方法是同时绑定 mouseenter和 mouseleave事件。
    // 我们可以用它来简单地应用在 鼠标在元素上行为
    $("p").hover(
        function() {
            $(this).css("background", 'red');
        },
        function() {
            $(this).css("background", '#bbffaa');
        }
    );

    </script>

jQuery鼠标事件之focusin事件

当元素（或在其内的任意元素）获得焦点时发生 focusin 事件。

当在元素或在其内的任意元素上发生 focus 事件时，focusin() 方法添加要运行的函数。

与 focus() 方法不同的是，focusin() 方法在任意子元素获得焦点时也会触发。

提示：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

提示：该方法通常与 focusout() 方法一起使用。

 <script type="text/javascript">

        //input聚焦
        //给input元素增加一个边框
        $("input:first").focusin(function() {
             $(this).css('border','2px solid red')
        })

    </script>

    <script type="text/javascript">

        //不同函数传递数据
        function fn(e) {
             $(this).val(e.data)
        }

        function a() {
            $("input:last").focusin('慕课网', fn)
        }
        a();

    </script>

jQuery鼠标事件之focusout事件

当元素（或在其内的任意元素）失去焦点时发生 focusout 事件。

当在元素或在其内的任意元素上发生 focusout 事件时，focusout() 方法添加要运行的函数。

与 blur() 方法不同的是，focusout() 方法在任意子元素失去焦点时也会触发。

提示：该方法通常与 focusin() 方法一起使用。

2、表单事件

jQuery表单事件之blur与focus事件

当元素失去焦点时发生 blur 事件。

它们和focusin事件与focusout事件之间的本质区别:

• 是否支持冒泡处理
• focus()在元素本身产生，focusin()在元素包含的元素中产生；blur与focusout也亦是如此

jQuery表单事件之change事件

• 当input元素，textarea和select元素的值改变时发生 change 事件（仅适用于表单字段）。
• change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
• 注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
  
  input元素
  
  监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
  
  select元素
  
  对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素

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

    <script type="text/javascript">

    //监听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)
    })
    </script>

jQuery表单事件之select事件

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

select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。

<script>
$(document).ready(function(){
  $("input").select(function(){
    alert("文本已选中!");
  });
});
</script>

• 当 DOM（document object model 文档对象模型）加载完毕且页面完全加载（包括图像）时发生 ready 事件。ready() 方法不应该与 一起使用。

jQuery表单事件之submit事件

当提交表单时，会发生 submit 事件。

该事件只适用于 元素。

submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

<script>
$(document).ready(function(){
  $("form").submit(function(){
    alert("提交");
  });
});
</script>
</head>

具体能触发submit事件的行为：

• 当某些表单元素获取焦点时，敲击Enter（回车键）
  
  上述这些操作下，都可以截获submit事件。

这里需要特别注意：

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为

传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可

jQuery处理如下：

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

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

3、键盘事件

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

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

注意：

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

jQuery键盘事件之keypress()事件

在input元素上绑定keydown事件会发现一个问题：

每次获取的内容都是之前输入的，当前输入的获取不到

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

当浏览器捕获键盘输入时，还提供了一个keypress的响应，这个跟keydown是非常相似，这里使用请参考keydown这一节，具体说说不同点

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

• 只能捕获单个字符，不能捕获组合键
• 无法响应系统功能键（如delete，backspace）
• 不区分小键盘和主键盘的数字字符
  
  总而言之，
  
  keypress和keydown的区别就是，keypress只在按下字符键（也就是字母键和数字键）后才触发，keydown是按下任意键（键盘上所有键都可以）触发。

4、时间的绑定和解绑

on()的多事件绑定

所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法：.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

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

最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看

多个事件绑定同一个函数

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

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

多个事件绑定不同函数

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

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

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

on()的高级用法

委托机制

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

在on的第二参数中提供了一个selector选择器，简单的来描述下

参考下面3层结构

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>

给出如下代码：

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

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

事件冒泡的过程中碰到符合选择条件的节点就触发。

<body>
    <h2>on事件委托</h2>
    <div class="left">
        <div class="aaron">
            <a>点击这里</a>
        </div>
    </div>
    <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })
    </script>
</body>

卸载事件off()方法

绑定2个事件

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

删除一个事件

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

删除所有事件

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

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

$("elem").off()

5、事件(event)对象的使用

jQuery事件对象的作用

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

event.target

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

    <div class="left">
        <div class="aaron">
            <ul>
                <li>点击：触发一</li>
                <li>点击：触发二</li>
                <li>点击：触发三</li>
                <li>点击：触发四</li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">

        //多事件绑定一
        $("ul").on('click',function(e){
           alert('触发的元素是内容是: ' + e.target.textContent)
        })

    </script>

jQuery事件对象的属性和方法

属性 和 方法	作用
event.type	获取事件的类型
event.pageX 和 event.pageY	属性返回鼠标指针的位置，相对于文档的左边缘和文档的上边缘。
event.which	获取在鼠标单击时，单击的是鼠标的哪个键，左键报告1，中间键报告2，右键报告3。
event.currentTarget	在事件冒泡过程中的当前DOM元素
event.preventDefault()方法	阻止默认行为
event.stopPropagation()方法	阻止事件冒泡

• this和event.target的区别：
  
  js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
  
  .this和event.target都是dom对象
• 如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

6、自定义事件

jQuery自定义事件之trigger事件

trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。

$("button").click(function(){
    $("input").trigger("select");
});

触发 input 元素的 select 事件：

jQuery自定义事件之triggerHandler事件

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

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