井井客

搜索

jquery中的事件方法分类整理

了解JQ有哪些事件方法,有具体分类整理,可以在实际应用中更快速的找到合适的事件代码,就是本文的意义所在。

jquery中的事件方法分类整理

1、页面载入完毕响应

jQuery中的$(doucument).ready()事件方法

所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了。

并且由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。

因为ready()函数仅能用于当前文档,因此无需选择器。

所以可以使用$(document).ready(function)或者$().ready(function)

$(document).ready(function(){
    $('p').hide();
})

同时JaveScript中window.onload()也是页面载入完毕响应的方法,但它们两者之间却是有一些不一样的地方:
如果使用多个window.onload(),则只有最后一个绑定的函数能被执行,它将覆盖前面所有window.onload()绑定的函数。而使用多个如果使用多个$(),则它们都能被执行。

2、绑定与反绑定

(1)绑定事件bind(type,[data],fn)方法

type:事件类型
data:可选,作为event.data属性值传递给后面fn的实参Object
fn:绑定到事件上的函数Function

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

有时bind绑定的函数会与浏览器默认的操作冲突,这时如果想阻止浏览器默认的操作,只需在fn后面加一句return false;

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

(2)反绑定unbind([type],[fn名]) 方法

type:事件类型
fn名:要被解除绑定的函数名Function
以上俩参数都是可选参数 如果参数为空,就是解除所有匹配元素的所有事件所绑定的函数。

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

意思即是单击botton01后,解除所有为type=text文本框的事件绑定的所有函数

(3)一次性的事件one(type,[data],fn)方法

type:事件类型
data:可选,作为event.data属性值传递给后面fn的实参Object
fn:绑定到事件上的函数Function

使用与bind()方法一致,不同之处就是one()方法里的fn只能被执行一次。

(4)为子元素添加事件:delegate()方法

$(选择器).delegate(子选择器,事件类型event,[可选]传递给函数的参数date,事件发生时运行的函数fn)

<html>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素,它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
</body>
</html>

(5)undelegate()方法删除由 delegate() 方法添加的一个或多个事件处理程序

function changeSize(){  $(this).animate({fontSize:"+=3px"}); }
function changeSpacing(){ $(this).animate({letterSpacing:"+=2px"}); }
$(document).ready(function(){
  $("body").delegate("p","click",changeSize);
  $("body").delegate("p","click",changeSpacing);
  $("button").click(function(){
    $("body").undelegate("p","click");
  });
});

(6)live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

使用方法同bind

(7)die()方法:移除所有通过 live() 方法向 p 元素添加的事件处理程序。

  $("p").live("click",changeSize);
  $("p").live("click",changeColor);
  $("button").click(function(){
    $("p").die("click",changeSize);
  });

3、元素指定事件

元素指定事件是可以使用代码模拟用户的操作动作进而执行事件,相比click这类方法并不需要用户实际进行某些操作。

(1)trigger(type,[data]) 方法

type:事件类型
data:可选,传递给所触发的事件所绑定的函数的实参Array

<input id="Text1" type="text" value="输入用户名" /> 
<input id="Text2" type="text" /> 
<script>
$(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"])}) 
</script>

虽然Text1与Text2都绑定了需要click才能触发的事件方法,但因为trigger为文本框指定执行了click事件操作,所以用户虽没有操作但上面的两个事件也都执行了。

需要注意的是:trigger函数所触发的事件与浏览器的默认操作冲突时该事件触发器会执行浏览器默认的操作,而triggerHandler函数则不会执行浏览器默认的操作。

而triggerHandler(type,[data])方法的使用则与trigger方法一致

4、事件的交互方法

(1)hover(over,out) 鼠标悬停方法

over:鼠标移到元素上触发的函数Function
out:鼠标移出元素触发的函数Function

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

意思即是当hover1移上去时执行hoverpd显示,移开时执行hoverpd隐藏。

(2)toggle(fn1,fn2,fn3...) 方法

toggle()方法为匹配的元素的单击事件添加许多绑定函数,这些函数随着不停的单击该元素而循环执行

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

预览上面的代码可以发现,数字变化是滚流执行了第一个函数的+1和第二个函数+2的一个规律。

5、jQuery的内置事件方法

首页来看看内置方法的两种申明:即带参和不带参。前者即触发该事件执行参数(函数),后者则是模拟执行了该事件。

下面再来看看jQuery内置方法的分类

(1)浏览器相关方法

error(fn) ——匹配当元素遇到错误(没有正确载入)时触发事件,error事件没有标准,如当图像src无效时会触发图像的error事件

load(fn) ——匹配元素加载完后触发某函数,如window是在所有DOM对象加载完才触发,其他单个元素是在单个元素加载完后触发

unload(fn) ——匹配当用户离开页面时触发事件

resize(fn) ——匹配元素改变大小时触发某函数事件

scroll(fn) ——匹配滚动条发生变化时触发事件

(2)表单相关方法

change(fn) ——匹配元素失去焦点时触发事件,也会在元素获得焦点后触发

select(fn) ——匹配当用户在文本框中选中某段文字时触发事件

submit(fn) ——匹配提交表单时触发事件

(3)键盘操作相关方法

keydown(fn) ——匹配键盘按下时触发事件

keypress(fn) ——匹配键盘按下又弹起时触发 顺序是keydown->keyup->keypress

keyup(fn) ——匹配键盘弹起时触发事件

(4)鼠标操作相关事件

click(fn) ——匹配鼠标在元素上点击时触发事件

dblclick(fn) ——匹配鼠标双击元素时事件

需要注意的是click事件执行的顺序是mousedown->mouseup->click

mouseup(fn) ——匹配鼠标在元素上并按键时触发事件

mousedown(fn) ——匹配元素上放开鼠标时触发事件

  $("p").mousedown(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseup(function(){
    $("p").css("background-color","#E9E9E4");
  });

mouseleave(fn) ——匹配当鼠标指针离开元素时触发事件,大多数时候会与mouseenter一起使用。

mouseenter(fun) ——匹配当鼠标指针穿过元素时触发事件,大多数时候会与mouseleave一起使用。

  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","#E9E9E4");
  });

mouseover(fn) ——匹配鼠标位于元素上方时发生的事件

mouseout(fn) ——匹配鼠标离开元素时事件

  $("p").mouseover(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color","#E9E9E4");
  });

mousemove(fn) ——在匹配元素上移动时触发,事件处理函数会被传递一个变量--事件对象(其clientX,clientY属性代表鼠标坐标)

  $(document).mousemove(function(e){
    $("span").text(e.pageX + ", " + e.pageY);
  });

(5)界面显示相关方法

blur(fn) ——匹配元素失去焦点时触发 即可是鼠标也可是Tab键

focus(fn) ——匹配元素获取焦点时触发

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:jquery中的事件方法分类整理
本文链接:http://www.jingjingke.com/c/26112.html

上一篇:浅谈HTML5如何做到语义化标签
下一篇:select元素做到IE7/IE6高度兼容的几种方法

文章分类

相关阅读

随便看看