jQuery基础教程之jquery事件

有了jquery之后，我们对js中的事件的处理，更加的得心应手了，而且使用jquery的事件绑定方法可以让HTML代码部分只注意”显示”逻辑，而不用在HTML代码中直接写触发js的方法. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件。

对于上述的描述，可能有些人会比较迷惑，当有下面这样的需求：

1 <input type="button" value="删除" onclick="delete(1)">
2 <input type="button" value="删除" onclick="delete(2)">
3 <input type="button" value="删除" onclick="delete(3)">

上面的代码，是在html代码中，直接绑定的js事件，当点击不同的删除按钮，会删除ID分别为1，2，3的文章或者别的什么东西，那如果不在html代码中直接绑定js事件的话，用jquery的方式绑定事件，那么该如何传递ID这个参数呢？
我的做法是这样的：
给每个input元素加入一个属性alt，将ID放到这个alt属性中：

1 <input type="button" value="删除" alt="1">
2 <input type="button" value="删除" alt="2">
3 <input type="button" value="删除" alt="3">

然后看看用jquery绑定的click事件如何获取这个alt属性的值

1 $(function(){
2     $("input").click(function(){
3         alert(this.alt);
4     });
5 });

大家一定要注意了，在绑定事件的代码中，一定要将jquery代码写在

1 $(function(){
2       ........这里放jquery代码.......
3 });

如果有不明白的可以去看下面的文章：
jquery中的$(document).ready()方法和window.onload方法区别

大家可以看看在线DEMO

大家应该能看出来，像上面那样做是可以有效传递不同的ID的。梦三秋一直是这样做的，但是不知道其他同行是不是也和我一样，呵呵~~也没研究过别人是如何做的，如果有人和我的方法不同的话，可以提出来大家一起讨论讨论。

一开始说上面这个例子，是因为有好人在jquery群中问了我这样的问题，所以我想既然今天讲到了jquery事件这一块的东西，那就顺便提一下吧~而且也刚好帮自己提一提这个问题，呵呵~~

下面让我们来系统地学习jquery中的事件
首先让我们来看一个jquery中很重要的方法：

1 bind(type [,data],fn);

bind()方法有三个参数，第一个参数是事件类型：通常的类型包括(blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,
mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,和error等)，另外还可以自定义事件。
第二个参数为可选参数，是作为event.data属性值传递给事件对象的额外数据对象。
第三个参数则是用来绑定的处理函数。

接下来看一下bind()方法的用法：

1 <input type="button" value="点击我"><br>
2 <span id="result"></span>
3 <script>
4 $(function(){
5     $("input").bind("click",{name:"甘强",age:"26"},function(event){
6         $("#result").append(event.data.name + event.data.age + "");
7     });
8 });
9 </script>

jquery中还有一个方法和bind()方法类似，它就是one()方法了，这个方法和bind的唯一区别就是用one()方法绑定的事件只执行一次就再也不执行了，看在线DEMO：

另外事件还有快捷的绑定方法：
blur( fn )
change( fn )
click( fn )
dblclick( fn )
error( fn )
focus( fn )
keydown( fn )
keypress( fn )
keyup( fn )
load( fn )
mousedown( fn )
mouseenter( fn )
mouseleave( fn )
mousemove( fn )
mouseout( fn )
mouseover( fn )
mouseup( fn )
resize( fn )
scroll( fn )
select( fn )
submit( fn )
unload( fn )

对于上面的方法我就不一一举例了~~下面来看一个mouseover的例子：

今天就说这么多了~~有空再继续吧·
第一天上班，还挺忙的~~没啥时间整教程了~~见谅~~