Jquery怎么获取触发事件的元素 jquery触发点击事件

一、鼠标事件
1、click与dbclick事件：click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作
方法一：$ele.click()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").click(function(){
触发指定事件')
})
$("#text").click(function(){
手动指定触发事件 
});
方法二：$ele.click( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素
<div id="test">点击触发<div>
$("#text").click(function() {
指向 div元素
});
方法三：$ele.click( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#text").click(11111,function(e) {
指向 div元素
传递数据
});
2、mousedown与mouseup事件：mousedown强调是按下触发，mouseup强调是松手触发
方法一：$ele.mousedown()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少
<div id="test">点击触发<div>
$("ele").mousedown(function(){
触发指定事件')
})
$("#text").mousedown(function(){
手动指定触发事件 
});
 
方法二：$ele.mousedown( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<div id="test">点击触发<div>
$("#text").mousedown(function() {
指向 div元素
});
方法三：$ele.mousedown( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#text").mousedown(11111,function(e) {
指向 div元素
传递数据
});
click与mousedown的区别：
click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发
3、mousemove事件：当鼠标指针移动时触发的，即使是一个像素
方法一：$ele.mousemove()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").mousemove(function(){
触发指定事件')
})
$("#text").click(function(){
指定触发事件 
});
$ele.mousemove( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<div id="test">滑动触发<div>
$("#text").mousemove(function() {
指向 div元素 
});
$ele.mousemove( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#text").mousemove(11111,function(e) {
指向 div元素
传递数据
});
 
4、mouseover与mouseout事件
方法一：$ele.mouseover()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").mouseover(function(){

    alert('触发指定事件')
})
$("#text").click(function(){

     $("ele").mouseover()  //指定触发事件 
});
方法二：$ele.mouseover( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<div id="test">滑动触发<div>
$("#text").mouseover(function() {

    //this指向 div元素 
});
方法三：$ele.mouseover( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#text").mouseover(11111,function(e) {

    //this指向 div元素
    //e.date  => 11111 传递数据
});
5、mouseenter与mouseleave事件：监听用户移动到内部的操作
使用上非常简单，三种参数传递方式与mouseover和mouseout是一模一样的
mouseenter事件和mouseover的区别关键点就是：冒泡的方式处理问题
6、hover事件
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
7、focusin事件
方法一：$ele.focusin()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，一般用的比较少
<div id="test">点击触发<div>
$("ele").focusin(function(){
触发指定事件')
})
$("#text").mouseup(function(){
指定触发事件 
});
 
方法二：$ele.focusin( handler )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<div id="test">点击触发<div>
$("#text").focusin(function() {
指向 div元素
});
 
方法三：$ele.focusin( [eventData ], handler )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#text").focusin(11111,function(e) {
指向 div元素
传递数据
});
8、focusout事件
 //input失去焦点给input元素增加一个边框
        $("input:first").focusout(function() {
             $(this).css('border','2px solid red')
        })
不同函数传递数据
        function fn(e) {
             $(this).val(e.data)
        }
 
        function a() {
慕课网', fn)
        }
        a();
二、表单事件
1、blur与foucus事件
2、change事件
3、select事件：当  textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件，只能用于<input>元素与<textarea>元素
4、submit事件：验证表单输入的正确性，如果错误就阻止提交，从新输入
submit事件的行为：
    <input type="submit">
    <input type="image">
    <button type="submit">
Enter（回车键）
 
 
 
三、键盘事件
keydown事件：
当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法
//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()
 keyup事件：
当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的
keypress()事件：KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
四、事件的绑定和解绑
1、on()的多事件绑定：
多个事件绑定同一个函数
 $("#elem").on("mouseover mouseout",function(){ });
通过空格分离，传递不同的事件名，可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});
通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
将数据传递到处理程序
function greet( event ) {
慕课网
}
$( "button" ).on( "click", {
慕课网"
}, greet );
2、卸载事件off()方法
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁     $("elem").off()
五、事件对象的使用
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
event.type：获取事件的类型
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
event.preventDefault() 方法：阻止默认行为
event.stopPropagation() 方法：阻止事件冒泡
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.currentTarget : 在事件冒泡过程中的当前DOM元素
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换，为jquery对象：$(this)和$(event.target);比如：event.target和$(event.target)的使用：
六、自定义事件
trigger事件：
$('#elem').on('Aaron', function(event,arg1,arg2) {
自触自定义时间")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])
trigger触发浏览器事件与自定义事件区别：自定义事件对象，是jQuery模拟原生实现的，自定义事件可以传递参数
triggerHandler事件：
triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined