当前位置:  编程技术>jquery

jquery事件用法,jquery事件实例

    来源: 互联网  发布时间:2014-10-09

    本文导语:  jquery事件的用法 1、通过方法名给元素绑定事件:   $('li').click(function(event){}) 2、通过bind方法给元素绑定事件:   $('li')  .bind('click',function(event){})  .bind('click',function(event){}) 可见,通过bind,可以给元素绑定多个事件。 3、事...

jquery事件的用法

1、通过方法名给元素绑定事件:
 

$('li').click(function(event){})

2、通过bind方法给元素绑定事件:
 

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){})

可见,通过bind,可以给元素绑定多个事件。

3、事件的命名空间
为什么需要事件命名空间?
→假设,先给li元素绑定2个click事件。
 

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){})
 

→现在我们要把其中一个click事件注销掉,可能这样写:
 

$('li').unbind('click')

但这样,li所有的click事件都注销了。
使用事件命名空间可解决这一问题,之所以需要事件命名空间,是因为它为在注销事件提供了方便。

如何使用事件命名空间?
→在为元素绑定事件时,在事件名称后加上命名空间,符合格式:事件名称.命名空间名称。
 

$('li')
 .bind('click.editmode',function(event){})
 .bind('click.displaymode',function(event){})
→在注销事件时候,可以这样写:
$('li').unbind('click.editmode')

4.事件的种类
blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mouseenter
mouseleave
mousemove
mouseout
moseover
mouseup
ready
resize
scroll
select
submit
unload

5.one方法
用于创建一次性事件,一旦这个事件执行了一次后,就会被自动删除。
 

$("p").one("click",function(){
 $(this).animate({fontsize: "+=6px"});
})
 

6.删除事件
 

//先给元素添加事件
$("p").click(function(){
 $(this).slidetoggle();
})
//再把元素的事件删除
$("button").click(function(){
 $("p").unbind();
})

7.event属性
实际上,它是jquery的全局属性,jquery.event。每当触发事件,event对象实例就会被传递给event handler。
可以通过event的构造函数来创建事件,并触发事件。
 

var e = jqueery.event("click")
jquery("body").trigger(e);

甚至可以通过构造函数,把一个匿名对象放在event中传递。
 

var e = jquery.event("keydown", {keycode : 64});
jquery("body").trigger(e);

使用时候,通过event.data.keycode来获取匿名对象的值。
可以通过jquery.event的构造函数把匿名对象放在event中传递,不仅如此,通过事件也可以传递匿名对象。
 

$("p").click({param1 : "hello", param2 : "world"}, somefunction);
function somefunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}
 

可见,通过event.data可以获取匿名对象的键。
通过event对象实例,还可以拿到其它方面的信息,比如:
 

$("p").click(function(event){
 alert(event.target.nodename);
})
 

以上,通过event.target.nodename获取触发事件的元素名称。
jquery.event的其它属性包括:
altkey 如果alt键按下就为true,在mac键盘中alt键标记为option
ctrkey ctrl键被按下
shiftkey shift键被按下
currenttarget 冒泡阶段的当前元素
data
metakey 一般meta键是ctrl,而mac上是command键
pagex 鼠标事件时光标相对于页面原点的水平坐标
pagey 鼠标事件时光标相对于页面原点的垂直坐标
relatedtarget 触发鼠标事件时光标离开或进入的元素
screenx 鼠标事件时光标相对于屏幕原点的水平坐标
screeny 鼠标事件时光标相对于屏幕原点的垂直坐标
result 从前面的事件处理器返回最近非undefined的值
target 触发事件的元素
timestamp jquery.event创建实例时时间戳,以毫秒为单位
type 事件类型,比如click
which 如果是键盘事件,代表按键的数字,如果是鼠标事件,记录按下的是左键、中键或右键

8.event方法
event.preventdefault()阻止默认行为
event.stoppropgation()停止"冒泡",即停止沿着dom向上进一步传播
event.stopimmediatepropagation()停止所有事件的进一步传播
event.isdefaultprevented()
event.ispropgationstopped()
isimmediatepropgagationstopped()

9.live方法和on方法
该方法允许我们为还不存在的元素创建事件。与bind方法不同的是:能为所有匹配的元素绑定事件,设置是那些暂时还不存在、需要动态创建的元素。而且,live方法不一定要放在$(function(){})就绪处理器中。到了 jquery 1.7以后,就改为on方法了。
 

$("p").on("click", function(){
 alert("hello");
})
 

如果想取消注册事件:
 

$("button").click(function(){
 $("p").off("click");
})
 

10.trigger方法
当我们想手动触发元素绑定的事件时可以使用trigger方法。
 

$("#foo").on("click",function(){
 alert($(this).text());
})
$("#foo").trigger("click");

还可以在绑定事件时候出传入形参,在trigger事件时候传入实参。
 

$("#foo").on("custom", function(event, param1, param2){
 alert(param1 + "n" + param2)
})
$("#foo").trigger("custom",["custom","event"]);

trigger触发由jquery.event创建的实例:
 

var event = jquery.event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

甚至可以在trigger触发方法时候传入匿名对象:
 

$("body").trigger({
 type: "logged",
 user: "foo",
 pass: "bar"
});
 

如果想停止触发事件的传播,可通过jquery.event实例的stoppropgation()方法,或在任何事件中返回false。

11.triggerhandler方法
triggerhandler方法与trigger方法的不同之处在于:triggerhandler方法不会执行元素的默认事件,也不会"冒泡"。
 

//给一个元素绑定一个focus事件
$("input").focus(function(){
 $("focused").appendto("#id").fadeout(1000);
})
//用triggerhandler触发
$("#id").click(function(){
 $("input").triggerhandler("focus");//不会触发focus的默认行为,即进入文本框
})
//用trigger触发
$("#id").click(function(){
 $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})

12.事件冒泡和事件委托
什么是事件冒泡?
 

代码示例:

现在,给该页面所有的元素绑定click事件,包括window和document。
 

代码示例:
$(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventdefault();
    console.log(this);
   });
  });
 

当单击页面任何元素,单击事件会从当前元素开始,向上一级元素传播,直到最顶级元素,这里是window。
如何阻止事件冒泡?
显然,通常只希望在某个特定元素发生特定的事件,不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。
 

代码示例:
  $(function () {
   $('a').on('click', function(event) {
    event.preventdefault();
    console.log($(this).attr('href'));
   });
  });
 

以上,只为a绑定了click事件,无它。
如何有效利用事件冒泡?
在jquery中,事件委托却很好地利用了事件冒泡。
 

代码示例:



 


现在,给现有li中的a标签绑定事件:
 

代码示例:
$( "#list a" ).on( "click", function( event ) {
 event.preventdefault();
 console.log( $( this ).text() );
});

但是,如果又在现有的ul中添加新的li和a,那情况又如何呢?
 

代码示例:
$( "#list" ).append( "
  • item #5
  • " );

    结果,点击新添加的li中的a,什么都没有发生。那么,如何为动态添加的元素绑定事件呢?
    如果能把事件绑定到a的父级元素,那在父级元素内生成的子级动态元素,也会有绑定事件的行为。
     

    代码示例:
    $( "#list" ).on( "click", "a", function( event ) {
     event.preventdefault();
     console.log( $( this ).text() );
    });
     

    以上把click事件绑定到a的父级元素id为list的ul上,on方法中的第二个参数,这里是a,是事件真正的执行者。

    具体过程:
    →点击某个a标签
    →根据事件冒泡,触发了a的父级元素ul的click事件
    →而事件真正的执行者是a
    事件委托允许我们把事件绑定到父级元素,这相当于给所有的子级元素绑定了事件,不管这个子级元素是静态的、还是动态添加的。

    13、toggle方法
    允许我们依次执行多个事件,当执行完最后一个事件后,再执行第一个事件。
     

    代码示例:
    $('img[src*=small]').toggle({
     function(){},
     function(){},
     function(){}
    });

    14、mouseenter和mouseleave方法
     

    $(element).mouseenter(function(){}).mouseleave(function(){})

    15、hover方法
     

    $("p").hover(function(){
     $("p").css("background-color","yellow");
     },function(){
     $("p").css("background-color","pink");
    });

        
     
     

    您可能感兴趣的文章:

  • JQuery文本改变触发事件如聚焦事件、失焦事件
  • jquery阻止后续事件只执行第一个事件
  • jquery button默认enter事件(回车事件)
  • jquery onpropertychange键盘事件用法举例
  • jquery 绑定、捕获、拦截回车事件的例子
  • jquery回车事件的示例代码
  • jQuery查看事件内容的小例子
  • jQuery回车键事件实例代码
  • jquery动态添加元素事件失效问题解决方法
  • JQuery中阻止事件冒泡几种方式及其区别介绍
  • jquery 回车键事件小例子
  • jquery捕捉回车事件的代码
  • jquery1.10给新增元素绑定事件的方法
  • jquery 回车事件的实例分享
  • jquery 文本框回车事件 跳到下一个文本框
  • jquery 回车事件的实现代码
  • jquery代码:多浏览器捕捉回车事件
  • JQuery如何触发元素事件
  • 使用JS或jQuery模拟鼠标点击a标签事件代码
  • jquery为动态加载的元素绑定事件的代码
  • JS与jquery自定义属性用法
  • jQuery setTimeout()函数的用法介绍
  • jQuery :visible 选择器(冒号)的用法
  • JQuery 判断某个属性是否存在hasAttr用法
  • jQuery setTimeout用法总结(实例)
  • Jquery confirm弹出框的用法
  • jquery的focus函数用法示例
  • Jquery中slideToggle()与toggleClass()用法
  • Jquery 过滤器(first,last,not,even,odd)用法举例
  • jquery 字符串切割函数substring的用法说明
  • jquery判断浏览器类型($.browser用法)
  •  
    本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.169IT.COM)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号