PHPText.Net > 文章 > 技术 > WEB开发

jQuery 事件绑定(event)学习笔记

2017/04/05 23:59
2人阅读
event事件绑定在jquery中是一个很常用字并且也是非常方法的一个用法，像我们所有函数都可以不写在容器上，可以直接给容器定义一个ID或class然后就可以直接绑定事件了。本篇主要记录jQuery事件响应的处理50 bi

event事件绑定在jquery中是一个很常用字并且也是非常方法的一个用法，像我们所有函数都可以不写在容器上，可以直接给容器定义一个ID或class然后就可以直接绑定事件了。

 

本篇主要记录jQuery事件响应的处理

50. bind(type, data, fn)对所有选定的element判断事件,type是事件类型,data是参数,fn是事处理方法.

eg:1. $("p").bind("click", function(){ alert( $(this).text() ); });

2. function handler(event) { alert(event.data.foo); }

$("p").bind("click", {foo: "bar"}, handler)==>alert("bar")

51. blur() 触发blur方法,blur(fn)设置blur函数

eg: <p>Hello</p>

$("p").blur( function() { alert("Hello"); } );==>

<p onblur="alert('Hello');">Hello</p>

52. change(fn)设置onchange事件的方法

eg:<p>Hello</p>

$("p").change( function() { alert("Hello"); } );==><p onchange="alert('Hello');">Hello</p>

53 click()触发onclick事件, click(fn)设置onclick方法

54. dblclick(fn)设置ondblclick方法

55.error(fn)设置error方法

56 focus()触发onfocus,focus(fn)设置focus方法

eg:<p>Hello</p>

$("p").focus( function() { alert("Hello"); } );

==><p onfocus="alert('Hello');">Hello</p>

57 hover(over, out) 设置mouse移入以及mouse移出时所触发的事件.

eg: $("p").hover(function(){
  $(this).addClass("over");
},function(){
  $(this).addClass("out");
});

keydown(fn),keypress(fn),keyup(fn),按键盘相关的操作分别对应onkeydown,onkeypress,onkeyup.

mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),mouseup(fn)这些是mouse相关的操作分别对应onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.60 load 当element load事件发生时触发eg <p>Hello</p>$("p").load( function() { alert("Hello"); } );==><p onload="alert('Hello');">Hello</p>

one(type, data, fn)与bind差不多,最大的区别是前者只运行一次后便不再响应.如果运行后不想继续运行默认的方法只要fn中返回值return false就可以了.eg: <p>Hello</p>$("p").one("click", function(){ alert( $(this).text() ); });==>alert("Hello")

ready(fn)当dom 结构载入完毕的时候.用此方法时,请不要在onload方法里面写代码.不然就不会触发ready事件eg

$(document).ready(function(){ Your code here... });

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

resize 设置onresize方法.当大小改变时触发

eg: <p>Hello</p>$("p").resize( function() { alert("Hello"); } );<p onresize="alert('Hello');">Hello</p>

scroll(fn) 设置onscroll方法

select()触发onselect方法.select(fn)设置select方法

 submit()提交表单,submit(fn)设置submit方法.eg: $("#myform").submit( function() {return $("input", this).val().length > 0; } );<form id="myform"><input /></form>
 
 toggle(even, odd),even当偶数单击时运行,odd当奇数单击时运行.用unbind('click')删除

eg: $("p").toggle(function(){
  $(this).addClass("selected");
},function(){
  $(this).removeClass("selected");
});

trigger(type)触发相应的type方法

eg: <p click="alert('hello')">Hello</p>$("p").trigger("click")==>alert('hello')

unbind(type, fn)与bind相反,

unbind()删除所有的绑定

eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind()==>[ <p>Hello</p> ]

unbind(type)删除指定的绑定

eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind( "click" )==>[ <p>Hello</p> ]

unbind(type, fn)删除指定type的指定fn

eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind( "click", function() { alert("Hello"); } )==>[ <p>Hello</p> ]

unload(fn)当页面unload的时候触发方法

eg: <p>Hello</p>$("p").unload( function() { alert("Hello"); } );==><p onunload="alert('Hello');">Hello</p>