Jquery 事件

Posted on 2010-06-19 13:53 java小爬虫 阅读(1586) 评论(0)  编辑  收藏
 

一:DOM的加载

$(document).ready(function(){

});

$().ready(function(){

});

$(function(){

});

三种加载有相同的功能。

$(window).load(function(){

})

Window.onload=function(){

}具有相同的功能。

这两种加载方式和上面三种加载方式区别在于:

第一类加载方式:DOM就绪就会执行,并不考虑关联文件的加载情况。

第二类加载方式:DOM对象的所有内容全部加载才会执行。

二:事件绑定

bind(type, [data], fn)

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。

这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false

$("p").bind("click", function(){

  alert( $(this).text() );

});

 

 

function handler(event) {

  alert(event.data.foo);

}

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

三:简单事件绑定

有些事件经常被用到,jquery提供了简写的方法,它和bind()具有相同的效果和类似的使用方法。惟一的区别是减少了代码量。

$("p").blur( function () { alert("Hello World!"); } );

 

四:事件的切换

hover(over, out)

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

 

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

 

 

toggle(fn, fn2, [fn3, fn4, ...])

每次点击后依次调用函数。

如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。

可以使用unbind("click")来删除。

  $("li").toggle(

      function () {

        $(this).css({"list-style-type":"disc", "color":"blue"});

      },

      function () {

        $(this).css({"list-style-type":"disc", "color":"red"});

      },

      function () {

        $(this).css({"list-style-type":"", "color":""});

      }

    );

五:事件冒泡

多个元素可以响应同一事件。假设有两个元素,一个嵌套在另一个当中,并且绑定了同一事件。那个点击了最里层的元素以后,不但里层元素触发事件,外层元素也会触发事件。所谓“冒泡”,是指事件会按照DOM的层次结构从内向外,直至顶端的依次触发。

事件对象

jquery中,只需为函数增加一个参数就可以使用事件对象。

事件对象的属性:

Event.type

Event.preventDefault()

Event.stopPropagation()

Event.target()

Event.relatedTarget()

Event.pageX(),event.pageY();

事件对象的用处?

1:停止事件冒泡

$("form").bind("submit", function(event){
  event.stopPropagation();
});

2:阻止默认行为

$("form").bind("submit", function(event){

  event.preventDefault();

});

 

六:移除事件

一个元素可以绑定多个事件,多个元素可以绑定同一事件。

unbind([type], [data])

bind()的反向操作,从每一个匹配的元素中删除绑定的事件。

如果没有参数,则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

如果提供了事件类型作为参数,则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

 

七:模拟事件

trigger(type, [data])

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false

你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。

事件处理函数会收到一个修复的(规范化的)事件对象,但这个对象没有特定浏览器才有的属性,比如keyCode

jQuery也支持 命名空间事件。这允许你触发或者解除绑定一组特定的事件处理函数,而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。

 

 

 

 


只有注册用户登录后才能发表评论。


网站导航: