JQuery快速学三之一(事件)

首先我们来看一看JQuery事件，包括如下几部分：

1.页面载入 ready(fn)

2.事件处理 bind,one,trigger,triggerHandler,unbind

3.事件委派 live,die

4.事件切换 hover,toggle

5.普通事件 click,blur,focus......

页面载入：
ready事件是JQuery的一个标志性事件,ready事件和传统的javascript的load事件有点相像，主要区别是在执行时机方面。我们先来看一个例子吧：

[javascript]
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    function Test(){
        alert("JavaScript");
    }

    function Test2(){
        alert("JQuery");
    }

    $(document).ready(function(){
        Test2();
    })

</script>
</head>

<body onLoad="Test()">

</body>

</body>运行这个例子，会发现先弹出"JQuery",然后再弹出"JavaScript",这是他们两者之间的一个明显的区别。

区别：

1.）window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器之后才执行，即JavaScript此时才可以访问网页中的任何元素(图片，div)等等。

而通过JQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用了,也就是说JQuery的ready方法优于js的onload方法。

2.）JQuery中的$(document).ready()方法可以多次使用，而window.onload只加载一次，需要点技巧才可以多次使用(想知道的话，百度一下哈)。案例：

[javascript]
<script type="text/javascript">
    $(function(){
        JQTe();
    })
    $(function(){
        JQTe2();
    })

    function JQTe(){
        alert("abc1");
    }

    function JQTe2(){
        alert("abc2");
    }

    function Js(){
        alert("0");
    }

    function Js2(){
        alert("1");
    }

    window.onload=Js;
    window.onload=Js2;
</script>

温馨提示：$(document).ready(function(){...Code..})可以简写成：$(function(){..Code..})

事件处理：(bind,one,trigger,triggerHandler,unbind)
bind事件:绑定的元素必定要事先存在，后添加进来的元素无效(例如通过js动态添加新的元素，该元素将不会被bind事件所绑定)。

语法：$(选择器).bind('事件',function(){});

例如：

html代码：

<div id="abc">Div内容</div>

js代码：

$('#abc').bind('click',function(){

alert('bind事件');

});

one事件：为元素绑定一次性事件，该事件只会执行一次。

语法：$('选择器').one('click',function(){})

例如：

html代码：

<div id="abc">Div内容</div>

js代码：

$('#abc').one('click',function(){

alert('只会弹出一次');

});

trigger事件：模拟用户触发事件，该事件会引起冒泡(冒泡事件会在稍后提到)

例如：

html代码：

<div id="abc2">Div2内容<div id="abc">Div内容</div>

js代码：

[javascript]
$(function(){
    $('#abc').click(function(){
        alert('test');
    })

    $('#abc2').click(function(){
        alert('test2');
    })

    $('#abc').trigger('click');
    $('#abc').click();
})

$(function(){
$('#abc').click(function(){
  alert('test');
})

$('#abc2').click(function(){
  alert('test2');
})

$('#abc').trigger('click');
$('#abc').click();
})程序运行的时候为id为abc的元素绑定单击事件，并且为id为abc2的元素也绑定单击事件，绑定完成之后使用trigger模拟用户的点击操作，程序弹出alert('test');和alert('test2');

如此可见，该trigger会触发事件冒泡，模拟事件还可以使用如上写到的直接调用事件（$('#abc').click()），不为事件指定方法体即可，实现的效果和trigger一致。要阻止事件冒泡可以使用：stopPropagation(),该方法稍后会提到。

triggerHandler事件：与trigger事件相似，有如下不同之处：

1）triggerHandler方法并不会触发事件的默认行为。(例如，表单提交)。

2）trigger()会影响所有与 jQuery 对象相匹配的元素，而triggerHandler()仅影响第一个匹配到的元素。

3）使用 triggerHandler()创建的事件，并不会在 DOM 树中向上冒泡。如果事件没有被目标元素直接处理，那么它就不会进行任何处理。

4) 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，triggerHandler()返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined。

unbind事件：移除bind方法绑定的事件。

1）当直接使用unbind方法的时候，将去除对应元素上所有的bind方法绑定的事件，例如:$('#abc').unbind();

2）当然unbind方法也可以指定移除具体的事件，

补充：web前端 , JavaScript ,