• 傅抱石《琵琶行诗意》1.035亿元成交 2019-12-01
  • 一语惊坛(5月21日):不忘初心,将改革开放进行到底,中国梦一定实现! 2019-11-28
  • 一香港男子携女友泰国自驾游身亡 香港入境处跟进 2019-11-28
  • 注意了!报考这个专业须先参加面试 2019-11-27
  • 一只浣熊都这么努力,你还有什么理由不上进! 2019-11-27
  • 张艺谋玩起艺术与科技的碰撞 现代舞与机械臂齐登场 2019-11-26
  • 《泄密者》佘诗曼出演正义记者 追问学生:我和周秀娜谁漂亮 2019-11-26
  • 东电欲报废福岛第二核电站 开始考虑具体时间表 2019-11-22
  • 惊魂一刻!沙特国家队飞机半空中起火 2019-11-20
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-11-20
  • 机关党建工作巡礼——长春市直机关“两锋(风)行动” 2019-11-18
  • 《国家人文历史》杂志社荣膺“中国妇女儿童慈善奖” 2019-11-18
  • 高原净土·大美青海--旅游频道 2019-11-17
  • 晋中市直机关将开展纪念建党97周年“红色+”系列活动 2019-11-13
  • 土地是自然存在的地球的一部分,不是人类劳动成果,正如“深山老林”是自然存在的地球的一部分,不是人类劳动成果一样。懂吗? 2019-11-13
  • Jquery中文网 码报 www.okkrb.tw
    Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jquery中的事件处理详细介绍

    码报图片:jquery中的事件处理详细介绍

    发布时间:2014-01-27   编辑:码报 www.okkrb.tw
    本文为大家详细介绍喜爱页面载入完毕响应事件、绑定与反绑定事件监听器、事件触发器、事件的交互处理等等,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    1.页面载入完毕响应事件
    所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了。
    jquery中的$(doucument).ready()事件
    ready(fn)是jQuery事件??橹凶钪匾囊桓龊?。这个方法可以看作是对window.onload注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的javaScript函数都是需要在那一刻执行。
    ready(fn) 返回值:Object 参数-fn:要在DOM载入就绪时执行的参数Function 当DOM载入就绪时绑定一个要执行的函数
    而它有一种很简单的缩写形式$(document).ready(function(){}) => $(function(){})
    ②window.onload()事件和$(document).ready()事件的比较
    window.onload()=function(){}
    如果使用多个window.onload(),则只有最后一个绑定的函数能被执行,它将覆盖前面所有window.onload()绑定的函数。
    如果使用多个$(),则它们都能被执行。
    需要注意的是如果<body onload> body标签的onload事件已经注册了某个函数 则$()事件注册的函数将不会被执行

    2.绑定与反绑定事件监听器
    ①绑定事件
    ⑴bind(type,[data],fn)函数
    就是将某函数与某元素的某事件绑定在一起 $("#id").click(function(){})就是将一个匿名函数与id元素的click事件绑在一起
    但上面的例子其实只是缩写形式,因为其是简单常用的事件绑定,正规写法应如下:
    $("#id").bind("click",[data],function(){})
    bind(type,[data],fn) 返回值:Object 参数-type:事件类型String data:可选,作为event.data属性值传递给后面fn的实参Object fn:绑定到事件上的函数Function
    ⑵为处理函数传递参数
    这里用到bind()函数的第二个参数及event.data属性为fn函数传递参数
    复制代码 代码如下:

    <input id="Text2" type="text" />
    $("#Text2").bind("click",{first:"1",second:"2"},function(event){
    if(event.data.first=="1"){$(this).val("欢迎光临")}
    if(event.data.second=="1"){$(this).val("")}
    });
    })

    第二个参数为一个json对象,在fn函数中通过event.data通过键名获得参数值
    ⑶阻止浏览器默认的行为
    有时bind绑定的函数会与浏览器默认的操作冲突,这时如果想阻止浏览器默认的操作,只需在fn后面加一句return false;
    复制代码 代码如下:

    $("form").bind("submit",function(){return false;})

    ②反绑定事件
    就是解除与某元素的某事件绑定在一起的某函数
    unbind([type],[fn名]) 返回值:Object 参数-type:事件类型String fn名:要被解除绑定的函数名Function
    以上俩参数都是可选参数 如果参数为空,就是解除所有匹配元素的所有事件所绑定的函数
    复制代码 代码如下:

    $(function(){$("#btn1").click(function(){
    $("input[type=text]").unbind()})
    })

    单击btn1后,解除所有为type=text文本框的事件绑定的所有函数
    ③一次性的事件绑定
    就是为某元素的某事件所绑定的某函数只能被执行一次
    one(type,[data],fn) 返回值:Object 参数-type:事件类型String data:可选,作为event.data属性值传递给后面fn的实参Object fn:绑定到事件上的函数Function
    使用与bind()函数一致,不同之处就是one里的fn只能被执行一次。

    3.事件触发器
    上述绑定的一些函数,需要用户执行一定的操作才会被执行,如click事件绑定的函数需要用户单击相应的元素才会被执行。但事件触发器可以用代码模拟用户的操作动作进而执行事件所绑定的函数,而不需要用户进行某些操作。
    trigger(type,[data]) 返回值:Object 参数-type:事件类型String data:可选,传递给所触发的事件所绑定的函数的实参Array(是一个javascript数组) 触发所匹配的元素的某类事件所绑定的所有函数,当这类事件与浏览器的默认操作冲突时该事件触发器会执行浏览器默认的操作
    复制代码 代码如下:

    <input id="Text1" type="text" value="输入用户名" />
    <input id="Text2" type="text" />
    $(function(){$("#Text1").bind("click",function(){$(this).val("")})})
    $(function(){$("#Text2").click(function(event,pamas1,pamas2)
    {$(this).val("trigger事件触发器"+pamas1+pamas2)})
    })
    $(function(){$("input[type=text]").trigger("click",["1","2"])})

    如上代码,虽然为俩文本框的单击事件绑定了函数,可最后一句代码也为这俩文本框的单击事件设置了触发器,所以不需要用户单击相应的文本框就能执行它们的单击事件所绑定的函数。另外该触发器还为它所触发的函数传递了参数,是一个javascript数组,可以在Text2的单击函数里看到参数的获得。
    trigger函数所触发的事件与浏览器的默认操作冲突时该事件触发器会执行浏览器默认的操作,而triggerHandler函数则不会执行浏览器默认的操作。
    triggerHandler(type,[data]) 与trigger的使用一致

    4.事件的交互处理
    ①hover:模仿鼠标悬停
    hover(over,out) 返回值:Object 参数-over:鼠标移到元素上触发的函数Function out:鼠标移出元素触发的函数Function
    复制代码 代码如下:

    <input type="text" id="hover1" /><span id="hoverpd" style="display:none;">判断用户输入</span>
    $(function(){$("#hover1").hover(function(){
    $("#hoverpd").show();},function(){
    $("#hoverpd").hide();})
    })

    ②toggle:多次单击的循环响应
    为匹配的元素的单击事件添加许多绑定函数,这些函数随着不停的单击该元素而循环执行
    toggle(fn1,fn2,fn3...) 返回值:Object 参数-fn1,fn2,fn3...要循环的函数Function
    复制代码 代码如下:

    <input type="button" id="toggle1" value="toggle"/>
    var i=0;
    $(function(){$("#toggle1").toggle(function(){i++;$("#hover1").val(i)},
    function(){i=i+2;$("#hover1").val(i)})
    })

    5.jQuery的内置事件类型
    ①jQuery内置事件函数的两种声明方式
    不带参数的事件函数-事件类型名() 模拟了用户的操作
    带参数的事件函数-事件类型名(事件函数)
    $($("#id").click(function(){})) 带参数的事件函数
    $($("#id").click(function(){}); $("#id").click();) 不带参数的事件函数-不单击#id也会执行相应函数 即模拟了用户操作
    ②jQuery内置事件类型分类
    ⑴浏览器相关事件
    error(fn) 匹配元素发生错误时触发某函数,error事件没有标准,如当图像src无效时会触发图像的error事件
    load(fn) 匹配元素加载完后触发某函数,如window是在所有DOM对象加载完才触发,其他单个元素是在单个元素加载完后触发
    unload(fn)
    resize(fn) 匹配元素改变大小时触发某函数
    scroll(fn) 滚动条发生变化时触发
    ⑵表单相关事件
    change(fn) 在匹配元素失去焦点时触发,也会在元素获得焦点后触发
    select(fn) 当用户在文本框中选中某段文字时触发
    submit(fn) 提交表单时触发
    ⑶键盘操作相关事件
    keydown(fn) 键盘按下时触发
    keypress(fn) 键盘按下又弹起时触发 顺序是keydown->keyup->keypress
    keyup(fn) 键盘弹起时触发
    ⑷鼠标操作相关事件
    click(fn) 顺序是mousedown->mouseup->click
    mousedown(fn)
    mouseup(fn)
    dblclick(fn)
    mouseover(fn)
    mouseout(fn)
    mousemove(fn) 在匹配元素上移动时触发,事件处理函数会被传递一个变量--事件对象(其clientX,clientY属性代表鼠标坐标)
    ⑸界面显示相关事件
    blur(fn) 匹配元素失去焦点时触发 即可是鼠标 也可使Tab键
    focus(fn)

    码报 www.okkrb.tw 您可能感兴趣的文章:
    JQuery入门——用bind方法绑定事件处理函数应用介绍
    JQuery入门——用映射方式绑定不同事件应用示例
    jQuery 回车事件enter使用示例
    jQuery中bind,live,delegate与one方法的用法及区别解析
    按Enter键触发事件的jquery方法实现代码
    JQuery入门—编写一个简单的JQuery应用案例
    JQuery入门——事件切换之toggle()方法应用介绍
    jquery click([data],fn)使用方法实例介绍
    jquery中event对象属性与方法小结
    jQuery中.live()方法的用法深入解析

    关键词: jquery  事件处理   
    [关闭]
  • 傅抱石《琵琶行诗意》1.035亿元成交 2019-12-01
  • 一语惊坛(5月21日):不忘初心,将改革开放进行到底,中国梦一定实现! 2019-11-28
  • 一香港男子携女友泰国自驾游身亡 香港入境处跟进 2019-11-28
  • 注意了!报考这个专业须先参加面试 2019-11-27
  • 一只浣熊都这么努力,你还有什么理由不上进! 2019-11-27
  • 张艺谋玩起艺术与科技的碰撞 现代舞与机械臂齐登场 2019-11-26
  • 《泄密者》佘诗曼出演正义记者 追问学生:我和周秀娜谁漂亮 2019-11-26
  • 东电欲报废福岛第二核电站 开始考虑具体时间表 2019-11-22
  • 惊魂一刻!沙特国家队飞机半空中起火 2019-11-20
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-11-20
  • 机关党建工作巡礼——长春市直机关“两锋(风)行动” 2019-11-18
  • 《国家人文历史》杂志社荣膺“中国妇女儿童慈善奖” 2019-11-18
  • 高原净土·大美青海--旅游频道 2019-11-17
  • 晋中市直机关将开展纪念建党97周年“红色+”系列活动 2019-11-13
  • 土地是自然存在的地球的一部分,不是人类劳动成果,正如“深山老林”是自然存在的地球的一部分,不是人类劳动成果一样。懂吗? 2019-11-13
  • 今日河南快三开奖结果 3d求胆方法公式 湖南彩票大奖排行 陕西11选5历史开奖结果查询 领航时时彩软件 体彩6+1走势图带连线 易博网首页 做小说平台赚钱还是推广赚钱 黑龙江22选5开奖结果今天 开元棋牌官方版下载