开发文章

jQuery事件基础

jQuery基础——事件篇

鼠标事件

click与dbclick事件

click方法监听用户单击操作,dbclick监听用户双击操作,这两个方法类似。
dbclick与click事件不同的是

click事件触发需要以下几点:

  • click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发

dblclick事件触发需要以下几点:
dblclick又是由2个click叠加而来的,所以dblclick事件只有在满足以下条件的情况下才能被触发

  • 鼠标指针在元素里面时点击。
  • 鼠标指针在元素里面时释放。
  • 鼠标指针在元素里面时再次点击,点击间隔时间,是系统而定。
  • 鼠标指针在元素里面时再次释放。

方法一:$ele.click()
用来手动触发事件
方法二:$ele.click( handler(eventObject) )

复制内容到剪贴板
  1. <script type="text/javascript">  
  2.     $('p').click(function(e) {  
  3.         alert(e.target.textContent)  
  4.     })  
  5.     //this指向button元素  
  6.     $("button:eq(1)").click(function() {  
  7.         $('p').click() //指定触发绑定的事件  
  8.     })  
  9. </script>  

function(e)中的e代表的是event,具体理解请参考In Javascript/jQuery what does (e) mean?。比如 e.preventDefault 可以屏蔽掉原有控件的一些事件,执行新的事件。

复制内容到剪贴板
  1. $('a').click(function(e) {  
  2.     e.preventDefault();  
  3. }  

执行新的事件.png

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

复制内容到剪贴板
  1. <script type="text/javascript">  
  2.   
  3.     //不同函数传递数据  
  4.     function data(e) {  
  5.         alert(e.data) //1111  
  6.     }  
  7.   
  8.     function a() {  
  9.         $("button:eq(2)").click(1111, data)  
  10.     }  
  11.     a();  

mousedown与mouseup事件

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

mousemove事件

mousemove事件是当鼠标指针移动时触发的,即使是一个像素

复制内容到剪贴板
  1. <script type="text/javascript">  
  2. //绑定一个mousemove事件  
  3. //触发后修改内容  
  4. $(".aaron1").mousemove(function(e) {  
  5.     $(this).find('p:last').html('移动的X位置:' + e.pageX)  
  6. })  
  7. </script>  

mousemove事件.png

mouseover与mouseout事件

用来监听用户的移入移出操作

复制内容到剪贴板
  1. <script type="text/javascript">  
  2.     var n = 0;  
  3.     //绑定一个mouseover事件  
  4.     $(".aaron1 p:first").mouseover(function(e) {  
  5.         $(".aaron1 a").html('进入元素内部,mouseover事件触发次数:' + (++n))  
  6.     })  
  7. </script>  

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事件,如果有全触发了

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

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


复制内容到剪贴板
  1. <script type="text/javascript">  
  2.   
  3.     var i = 0;  
  4.     $(".aaron2 p").mouseenter(function(e) {  
  5.         $(".aaron2 a:first").html('mouseenter事件触发次数:' + (++i))  
  6.     })  
  7.   
  8.     var n = 0;  
  9.     $(".aaron2").mouseenter(function() {  
  10.         $(".aaron2 a:last").html('mouseenter冒泡事件触发次数:' + (++n))  
  11.     })  
  12.   
  13. </script>  

hover事件

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

复制内容到剪贴板
  1. $(ele).mouseenter(function(){  
  2.      $(this).css("background"'#bbffaa');  
  3.  })  
  4. $(ele).mouseleave(function(){  
  5.     $(this).css("background"'red');  
  6. })  

但是这样有点复杂,可以使用hover方法代替$(selector).hover(handlerIn, handlerOut)

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

如下:

复制内容到剪贴板
  1. $("p").hover(  
  2.        function() {  
  3.            $(this).css("background"'red');  
  4.        },  
  5.        function() {  
  6.            $(this).css("background"'#bbffaa');  
  7.        }  
  8.    );  

focusin事件

当一个元素,或者其内部任何一个元素获得焦点的时候,可以使用focusin方法

复制内容到剪贴板
  1. <script type="text/javascript">  
  2.   
  3.     //不同函数传递数据  
  4.     function fn(e) {  
  5.          $(this).val(e.data)  
  6.     }  
  7.   
  8.     function a() {  
  9.         $("input:last").focusin('慕课网', fn)  
  10.     }  
  11.     a();  
  12.   
  13. </script>  

或者

复制内容到剪贴板
  1. <script type="text/javascript">  
  2.   
  3.     //input聚焦  
  4.     //给input元素增加一个边框  
  5.     $("input:first").focusin(function() {  
  6.          $(this).css('border','2px solid red')  
  7.     })  
  8.   
  9. </script>  

focusout事件

当一个元素,或者其内部任何一个元素失去焦点的时候,可以使用focusout方法

复制内容到剪贴板
  1. <script type="text/javascript">  
  2.   
  3.     //input失去焦点  
  4.     //给input元素增加一个边框  
  5.     $("input:first").focusout(function() {  
  6.          $(this).css('border','2px solid red')  
  7.     })  
  8.   
  9. </script>  

 

表单事件

blur与foucus事件

它们之间的本质区别:是否支持冒泡处理
举个简单的例子

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

其中input元素可以触发focus()事件

div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了focusin()事件。

focus()在元素本身产生,focusin()在元素包含的元素中产生 

blur与focusout也亦是如此

复制内容到剪贴板
  1. <script type="text/javascript">  
  2. $(".aaron").focus(function() {  
  3.     $(this).css('border''2px solid red')  
  4. })  
  5. $(".aaron1").focusin(function() {  
  6.     $(this).find('input').val('冒泡捕获了focusin事件')  
  7. })  
  8. </script>  

change事件

<input>元素,<textarea><select>元素都是可以选择值一些改变

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

select事件

select事件只能用于<input>元素与<textarea>元素

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

submit事件

通过在<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; //阻止默认行为,提交表单 }); 

例子:

复制内容到剪贴板
  1. <div class="left">  
  2.         <div class="aaron">  
  3.             <form id="target1" action="test.html">  
  4.                 回车键或者点击提交表单:   
  5.                 <input type="text" value="输入新的值" />  
  6.                 <input type="submit" value="Go" />  
  7.             </form>  
  8.         </div>  
  9.         <div class="aaron">  
  10.             <form id="target2" action="destination.html">  
  11.                 回车键或者点击提交表单,禁止浏览器默认跳转:   
  12.                 <input type="text" value="输入新的值" />  
  13.                 <input type="submit" value="Go" />  
  14.             </form>  
  15.         </div>  
  16.     </div>  
  17.     <script type="text/javascript">  
  18.     //回车键或者点击提交表单  
  19.     $('#target1').submit(function(e) {  
  20.         alert('捕获提交表达动作,不阻止页面跳转')  
  21.     });  
  22.     //回车键或者点击提交表单,禁止浏览器默认跳转:  
  23.     $('#target2').submit(function() {  
  24.         alert('捕获提交表达动作,阻止页面跳转')  
  25.         return false;  
  26.     });  
  27.     </script>  

键盘事件

keydown()与keyup()事件

keydown事件在键盘按下时触发

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

keyup事件在键盘松手时触发

keypress()事件

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

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

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

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

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

对中文输入法支持不好,无法响应中文输入 无法响应系统功能键(如delete,backspace) 由于前面两个限制,keyCode与keydown和keyup不是很一致 

总而言之,

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

事件的绑定和解绑

on()的多事件绑定

基本用法:.on( events [, selector ] [, data ] )
最常见的:

$("#elem").click(function(){})  //快捷方式 $("#elem").on('click',function(){}) //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) ) 

例子

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

卸载事件off()方法

绑定2个事件

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

删除一个事件

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

删除所有事件

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

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

$("elem").off() 

事件对象的使用

通过实际的一个小案例,从而来了解事件对象的作用

<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代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

<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.preventDefault() 方法:阻止默认行为
  • event.stopPropagation() 方法:阻止事件冒泡
  • event.which:获取在鼠标单击时,单击的是鼠标的哪个键
  • event.currentTarget : 在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别

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

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换,为jquery对象:(this)(event.target);比如:event.target和$(event.target)的使用

$("#content").click(function(event) {     $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");     event.stopPropagation(); //阻止事件冒泡   }); 

自定义事件

trigger事件

trigger用来触发事件

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

triggerHandler事件

trigger事件还有一个特性:会在DOM树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

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

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

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

例子

//给input绑定一个聚焦事件 $("input").on("focus",function(event,titie) {     $(this).val('聚焦') });   //trigger触发focus $("button:first").click(function() {     $("input").trigger("focus",['触发默认事件']); });   //triggerHandler触发focus $("button:last").click(function() {     $("input").triggerHandler("focus",'没有触发默认事件'); }); 

感谢 winfredzen 支持 磐实编程网 原文地址:
blog.csdn.net/winfredzen/article/details/51382772

文章信息

发布时间:2016-05-13

作者:winfredzen

发布者:aquwcw

浏览次数: