关于前端:JQuery事件

总结：

鼠标事件

1.click 与 dbclick 事件
$ele.click()
$ele.click(handler(eventObject))
$ele.click([eventData],handler(eventObject))
2.mousedown,mouseover
3.mouseover,mouseout
4.mouseenter,mouseleave
5.hover
6.focusin,focusout

表单事件

1.blur,focus
2.change
3.select
4.submit

键盘事件

1.keydown(),keyup()
2.keypress()

多事件

1.on()
2.off()
3.event
4.event.type
5.event.pageX,event.pageY
6.event.preventDefault()
7.event.stopPropagation()
8.event.which
9.this,event.target

自定义事件

1.trigger
2.triggerHandler

jQuery 鼠标事件之 click 与 dbclick 事件

用交互操作中，最简略间接的操作就是点击操作。jQuery 提供了两个办法一个是 click 办法用于监听用户单击操作，另一个办法是 dbclick 办法用于监听用户双击操作。这两个办法的用法是相似的，上面以 click()事件为例
应用上非常简单：

办法一：$ele.click()

<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()的用法。
dbclick 与 click 事件不同的是：
click 事件触发须要以下几点：
• click 事件其实是由 mousedown 与 mouseup 2 个动作形成，所以点击的动作只有在松手后才触发
PS:mousedown 和 mouseup 下一节会讲到
dblclick 事件触发须要以下几点：
dblclick 又是由 2 个 click 叠加而来的，所以 dblclick 事件只有在满足以下条件的状况下能力被触发
• 鼠标指针在元素外面时点击。
• 鼠标指针在元素外面时开释。
• 鼠标指针在元素外面时再次点击，点击间隔时间，是零碎而定。
• 鼠标指针在元素外面时再次开释。
留神：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的程序是不同的，一些浏览器在 dblclick 之前承受两个 click 事件，而一些浏览器只承受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度
例子：

$(“button:eq(0)”).click(function(){alert(this)
})
后果：this 指向 button 元素

[object HTMLButtonElement]

$(‘p’).click(function(e){alert(e.target.textContent)
})               // 取了 p 元素的文字局部
$(“button:eq(1)”).click(function(){$(‘p’).click()   // 手动指定触发事件})

function data(e) {alert(e.data)
}
function a() {$(“button:eq(2)”).click(1111,data)
}
a();

function a() {} 是自定义一个 a()办法 , 如果在你上下文中不调用是不会执行 a()中办法的，结尾处写一个函数 a()是调用 a()办法体。

jQuery 鼠标事件之 mousedown 与 mouseup 事件

用户交互操作中，最简略间接的操作就是点击操作，因而 jQuery 提供了一个 mousedown 的快捷办法能够监听用户鼠标按下的操作，与其对应的还有一个办法 mouseup 快捷办法能够监听用户鼠标弹起的操作。两种办法用法相似，上面以 mousedown()为例
应用上非常简单：
办法一：$ele.mousedown()
绑定 $ele 元素，不带任何参数个别是用来指定触发一个事件，可能个别用的比拟少

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

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

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

办法三：$ele.mousedown([eventData], handler(eventObject) )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

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

mousedown 事件触发须要以下几点：
• mousedown 强调是按下触发
• 如果在一个元素按住了鼠标不放，并且拖动鼠标来到这个元素，并开释鼠标键，这依然是算作 mousedown 事件
• 任何鼠标按钮被按下时都能触发 mousedown 事件
• 用 event 对象的 which 区别按键，敲击鼠标左键 which 的值是 1，敲击鼠标中键 which 的值是 2，敲击鼠标右键 which 的值是 3
mouseup 事件触发须要以下几点：
• mouseup 强调是松手触发，与 mousedown 是相同的
• mouseup 与 mousedown 组合起来就是 click 事件
• 如果用户在一个元素上按下鼠标按键，并且拖动鼠标来到这个元素，而后开释鼠标键，这依然是算作 mouseup 事件
• 任何鼠标按钮松手时都能触发 mouseup 事件
用 event 对象的 which 区别按键，敲击鼠标左键 which 的值是 1，敲击鼠标中键 which 的值是 2，敲击鼠标右键 which 的值是 3

<script type="text/javascript">
    //this 指向 button 元素
    $("button:eq(0)").mousedown(function(e) {alert('e.which:' + e.which)
    })
 </script>

另外须要留神的是：
click 与 mousedown 的区别：
• click 事件其实是由 mousedown 于 mouseup 2 个动作形成，所以点击的动作只有在松手后才触发

jQuery 鼠标事件之 mousemove 事件

用交互操作中，常常须要晓得用户是否有挪动的操作。基于挪动的机制能够做出拖动、拖拽一系列的成果进去。针对挪动事件，jQuery 提供了一个 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 传递数据
});

mousemove 事件触发须要以下几点：
• mousemove 事件是当鼠标指针挪动时触发的，即便是一个像素
• 如果处理器做任何重大的解决，或者如果该事件存在多个处理函数，这可能造成浏览器的重大的性能问题

<script type="text/javascript">
    // 不同函数传递数据
     function data(e) {$(this).find('p:last').html('数据:' + e.data)
    }
    function a() {$(".right").mousemove(1111, data)
    }
   a();   
    $(".aaron3").mousemove(function(e) {$(this).find('p:last').html('数  据：' + e.pageX)
    }) 
    </script>
这里不显示 $(“.aaron3”).mousemove 后果，只显示 1111

jQuery 鼠标事件之 mouseover 与 mouseout 事件

在学 JS 的时候，大家还记得有两个办法叫移入移出事件吗？onmouseover()与 onmouseout()事件~
jQuery 当中同样提供了这样的事件来监听用户的移入移出操作，mouseover()与 mouseout()事件，两者用法相似，上面一 mouseover 为例：
办法一：$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 传递数据
});

    <script type="text/javascript">
        var n = 0;
        // 绑定一个 mouseover 事件
        $(".aaron1 p:first").mouseover(function(e) {$(".aaron1 a").html('进入元素外部,mouseover 事件触发次数：' + (++n))
        })
        
        /*
        $ele.mouseover(function(e){})
        */
    </script>

jQuery 鼠标事件之 mouseenter 与 mouseleave 事件

用交互操作中，常常须要晓得用户操作鼠标是否有移到元素外部或是元素内部，因而 jQuery 提供了一个 mouseenter 和 mouseleave 的快捷办法能够监听用户挪动到外部的操作
应用上非常简单，三种参数传递形式与 mouseover 和 mouseout 是截然不同的，所以这里不再反复，次要讲讲区别，上面以 mouseenter 为例：
mouseenter JavaScript 事件是 Internet Explorer 专有的。因为该事件在平时很有用，jQuery 的模仿这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何 HTML 元素都能够承受此事件。
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 事件

学了 mouseover、mouseout、mouseenter、mouseleave 事件，也了解了四个事件的相同点与不同点，当初能够用来给元素做一个简略的切换成果
在元素上移进移出切换其换色，个别通过 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)：当鼠标指针来到元素时触发执行的事件函数

jQuery 鼠标事件之 focusin 事件

当一个元素，或者其外部任何一个元素取得焦点的时候，例如：input 元素，用户在点击聚焦的时候，如果开发者须要捕捉这个动作的时候，jQuery 提供了一个 focusin 事件
应用上非常简单：
办法一：$ele.focusin()
绑定 $ele 元素，不带任何参数个别是用来指定触发一个事件，个别用的比拟少

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

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

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

办法三：$ele.focusin([eventData], handler )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

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

jQuery 鼠标事件之 focusout 事件

当一个元素，或者其外部任何一个元素失去焦点的时候，比方 input 元素，用户在点击失去焦的时候，如果开发者须要捕捉这个动作，jQuery 提供了一个 focusout 事件
应用上非常简单：
办法一：$ele.focusout()
绑定 $ele 元素，不带任何参数个别是用来指定触发一个事件，可能个别用的比拟少

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

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

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

办法三：$ele.focusout([eventData], handler )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

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

    <script type="text/javascript">
        function fn(e){$(this).val(e.data)
        }
        
        function a() {$("input:last").focusout("llll",fn)
        }
        a();
</script>

    <script type="text/javascript">

        //input 失去焦点
        // 给 input 元素减少一个边框
        $("input:first").focusout(function() {$(this).css('border','2px solid red')
        })
      
    </script>

jQuery 表单事件之 blur 与 focus 事件

在之前 2.8 与 2.9 节咱们学过了表单处理事件 focusin 事件与 focusout 事件，同样用于解决表单焦点的事件还有 blur 与 focus 事件
它们之间的本质区别:
是否反对冒泡解决
举个简略的例子

<div>
  <input type="text" />
</div>

其中 input 元素能够触发 focus()事件
div 是 input 的父元素，当它蕴含的元素 input 触发了 focus 事件时，它就产生了 focusin() 事件。
focus()在元素自身产生，focusin()在元素蕴含的元素中产生
blur 与 focusout 也亦是如此

focusin 会影响到父元素，focus 不会，focus 只定位到自身

jQuery 表单事件之 change 事件

<input> 元素，<textarea> 和 <select> 元素的值都是能够产生扭转的，开发者能够通过 change 事件去监听这些扭转的动作
input 元素
监听 value 值的变动，当有扭转时，失去焦点后触发 change 事件。对于单选按钮和复选框，当用户用鼠标做出抉择时，该事件立刻触发。

select 元素
对于下拉抉择框，当用户用鼠标作出抉择时，该事件立刻触发

textarea 元素
多行文本输入框，当有扭转时，失去焦点后触发 change 事件

    $('.target1').change(function(e) {$("#result").html(e.target.value)
});
//result 是要输入的值

jQuery 表单事件之 select 事件

当 textarea 或文本类型的 input 元素中的文本被抉择时，会产生 select 事件。
这个函数会调用执行绑定到 select 事件的所有函数，包含浏览器的默认行为。能够通过在某个绑定的函数中返回 false 来避免触发浏览器的默认行为。
select 事件只能用于 <input> 元素与 <textarea> 元素
应用上非常简单：
办法一：.select()
触发元素的 select 事件:
$(“input”).select();

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

<input id="test" value="文字选中"></input>
$("#test").select(function() { // 响应文字选中回调
    //this 指向 input 元素 
});

办法三：$ele.select([eventData], handler(eventObject) )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

<input id="test" value="文字选中"></input>
$("#test").select(11111,function(e) {// 响应文字选中回调
    //this 指向 div 元素 
   //e.data  => 11111 传递数据
});
  $("input").select(function(e){alert(e.target.value)
    })
    // 选中 input 框中文字时弹出

    $('#bt1').click(function() {$("input").select();})
    // 单击按钮时弹出

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

jQuery 表单事件之 submit 事件

提交表单是一个最常见的业务需要，比方用户注册，一些信息的输出都是须要表单的提交。同样的有时候开发者须要在表单提交的时候过滤一些的数据、做一些必要的操作（例如：验证表单输出的正确性，如果谬误就阻止提交，从新输出）此时能够通过 submit 事件，监听下提交表单的这个动作
应用上非常简单，与根本事件参数解决保持一致
办法一：$ele.submit()
绑定 $ele 元素，不带任何参数个别是用来指定触发一个事件，用的比拟少

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

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

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(function() { // 绑定提交表单触发
    //this 指向 from 元素 
});

办法三：$ele.submit([eventData], handler(eventObject) )
应用与办法二统一，不过能够承受一个数据参数，这样的解决是为了解决不同作用域下数据传递的问题

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { // 绑定提交表单触发
    //data => 1111 // 传递的 data 数据
});

通过在 <form> 元素上绑定 submit 事件，开发者能够监听到用户的提交表单的的行为
具体能触发 submit 事件的行为：
• input type=”submit”
• input type=”image”
• button type=”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>

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

鼠标有 mousedown,mouseup 之类的事件，这是依据人的手势动作合成的 2 个触发行为。绝对应的键盘也有这类事件，将用户行为分解成 2 个动作，键盘按下与松手，针对这样的 2 种动作，jQuery 别离提供了对应 keydown 与 keyup 办法来监听
keydown 事件：
当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。应用上非常简单，与根本事件参数解决保持一致，这里应用不在反复了，列出应用的办法

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

keyup 事件：
当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。应用办法与 keydown 是统一的只是触发的条件是办法的

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

jQuery 键盘事件之 keypress()事件

在 input 元素上绑定 keydown 事件会发现一个问题：
每次获取的内容都是之前输出的，以后输出的获取不到
keydown 事件触发在文字还没敲进文本框，这时如果在 keydown 事件中输入文本框中的文本，失去的是触发键盘事件前的文本，而 keyup 事件触发时整个键盘事件的操作曾经实现，取得的是触发键盘事件后的文本
当浏览器捕捉键盘输入时，还提供了一个 keypress 的响应，这个跟 keydown 是十分类似，这里应用请参考 keydown 这一节，具体说说不同点
keypress 事件与 keydown 和 keyup 的次要区别
• 只能捕捉单个字符，不能捕捉组合键
• 无奈响应零碎功能键（如 delete，backspace）
• 不辨别小键盘和主键盘的数字字符
总而言之，
KeyPress 次要用来接管字母、数字等 ANSI 字符，而 KeyDown 和 KeyUP 事件过程能够解决任何不被 KeyPress 辨认的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

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 办法，还有依据 on 演变进去的 live 办法 (1.7 后去掉了)，delegate 办法等等。这些办法的底层实现局部 还是 on 办法，这是利用了 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()办法

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

绑定 2 个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不须要传递事件名了，节点上绑定的所有事件讲全副销毁
$("elem").off()

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(这里只写了 3 个)，如果我要响应每一个 li 的事件，那么惯例的办法就是须要给所有的 li 都独自绑定一个事件监听，这样写法很合乎逻辑，然而同时有显得繁琐
因为 li 都有一个独特的父元素，而且所有的事件都是统一的，这里咱们能够采纳要一个技巧来解决，也是常说的 ” 事件委托 ”
事件没间接和 li 元素产生关系，而且绑定父元素了。因为浏览器有事件冒泡的这个个性，咱们能够在触发 li 的时候把这个事件往上冒泡到 ul 上，因为 ul 上绑定事件响应所以就可能触发这个动作了。惟一的问题怎么才晓得触发的 li 元素是哪个一个？
这里就引出了事件对象了
事件对象是用来记录一些事件产生时的相干信息的对象。事件对象只有事件产生时才会产生，并且只能是事件处理函数外部拜访，在所有事件处理函数运行完结后，事件对象就被销毁
回到下面的问题，既然事件对象是跟以后触发元素非亲非故的，所以咱们就能从外面相干的信息，从事件对象中找到 event.target
event.target
target 属性能够是注册事件时的元素，或者它的子元素。通常用于比拟 event.target 和 this 来确定事件是不是因为冒泡而触发的。常常用于事件冒泡时处理事件委托
简略来说：event.target 代表以后触发事件的元素，能够通过以后元素对象的一系列属性来判断是不是咱们想要的元素
通过简略的试验，感觉 event 是理论的触发事件的元素，而 this 是给哪个元素绑定了事件

jQuery 事件对象的属性和办法

事件对象的属于与办法有很多，然而咱们常常用的只有那么几个，这里我次要说下作用与区别

event.type：获取事件的类型
触发元素的事件类型

$("a").click(function(event) {alert(event.type); // "click" 事件
});

event.pageX 和 event.pageY：获取鼠标以后绝对于页面的坐标
通过这 2 个属性，能够确定元素在以后页面的坐标值，鼠标绝对于文档的左边缘的地位（右边）与（顶边）的间隔，简略来说是从页面左上角开始, 即是以页面为参考点, 不随滑动条挪动而变动

event.preventDefault() 办法：阻止默认行为
这个用的特地多，在执行这个办法后，如果点击一个链接（a 标签），浏览器不会跳转到新的 URL 去了。咱们能够用 ###### event.isDefaultPrevented() 来确定这个办法是否 (在那个事件对象上) 被调用过了

event.stopPropagation() 办法：阻止事件冒泡
事件是能够冒泡的，为避免事件冒泡到 DOM 树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.which 将 event.keyCode 和 event.charCode 标准化了。event.which 也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告 1，两头键报告 2，右键报告 3
event.currentTarget : 在事件冒泡过程中的以后 DOM 元素
冒泡前的以后触发事件的 DOM 对象, 等同于 this.

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

jQuery 自定义事件之 trigger 事件
家喻户晓相似于 mousedown、click、keydown 等等这类型的事件都是浏览器提供的，艰深叫原生事件，这类型的事件是须要有交互行为能力被触发。
在 jQuery 通过 on 办法绑定一个原生事件

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

alert 须要执行的条件：必须有用户点击才能够。如果不同用户交互是否能在某一时刻主动触发该事件呢？失常来说是不能够的，然而 jQuery 解决了这个问题，提供了一个 trigger 办法来触发浏览器事件
所以咱们能够这样：
$(‘#elem’).trigger(‘click’);
在绑定 on 的事件元素上，通过 trigger 办法就能够调用到 alert 了，挺简略！
再来看看.trigger 是什么？
简略来讲就是：依据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
trigger 除了可能触发浏览器事件，同时还反对自定义事件，并且自定义工夫还反对传递参数

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

trigger 触发浏览器事件与自定义事件区别？
• 自定义事件对象，是 jQuery 模仿原生实现的
• 自定义事件能够传递参数

jQuery 自定义事件之 triggerHandler 事件

trigger 事件还有一个个性：会在 DOM 树上冒泡，所以如果要阻止冒泡就须要在事件处理程序中返回 false 或调用事件对象中的.stopPropagation() 办法能够使事件进行冒泡
trigger 事件是具备触发原生与自定义能力的，然而存在一个不可避免的问题：事件对象 event 无奈完满的实现，毕竟一个是浏览器给的，一个是本人模仿的。只管 .trigger() 模仿事件对象，然而它并没有完满的复制天然产生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，应用.triggerHandler() 来代替
triggerHandler 与 trigger 的用法是一样的，重点看不同之处：
• triggerHandler 不会触发浏览器的默认行为，.triggerHandler(“submit”) 将不会调用表单上的.submit()
• .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
• 应用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。如果它们不是由指标元素间接触发的，那么它就不会进行任何解决
• 与一般的办法返回 jQuery 对象(这样就可能应用链式用法) 相同，.triggerHandler() 返回最初一个解决的事件的返回值。如果没有触发任何事件，会返回 undefined