03.JQuery的事件处理

JQuery提供了事件绑定机制，类似于原生JS中的addEventListener形式。

1. ready()

DOM准备就绪事件，当DOM载入就绪可以查询及操纵时触发，简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。JQuery中的所有的事件绑定操作，必须在ready事件中完成。
ready与window.load事件相同

• 在使用者看起来，两者都是在页面载入时自动执行

ready与window.load事件不同

• ready事件的执行时机实际早于load事件，在ready事件完成事件绑定会提供web的响应速度（ready相当于盖房子的图纸已经完成，load相当于房子盖好了）
• load事件在整个HTML文件中只能声明一次，ready事件可以在一个HTML页面中出现多次，执行顺序就是从上至下。
• 如果HTML中使用了ready事件，不要再使用load事件，否则也会造成ready事件失效。

语法：

$(document).ready(function (){
  //要执行的JS代码
});

简写为

$(function($) {
  //要执行的JS代码
});

2. bind()与unbind()

事件绑定与解绑，可以理解为是JS的addEventListener的JQuery写法

• bind() 为某个DOM元素绑定事件

选择器.bind("click", function (){
  ...
})

• unbind() 为某个DOM元素解除绑定事件

选择器.unbind(); //解除选择器对应DOM元素的所有事件
选择器.unbind("click"); //解除选择器对应DOM元素的click事件

HTML代码

<input type="button" name="btn1" id="btn1" value="测试1" />
<input type="button" name="btn2" id="btn2" value="解除测试1的功能" />
<input type="button" name="btn3" id="btn3" value="一次性按钮" />

JQuery代码

$(document).ready(function (){
    $("#btn1").bind("click", function (){
        alert("嘻嘻");
    });
    $("#btn2").bind("click", function (){
        $("#btn1").unbind();
    })
    $("#btn3").bind("click", function (){
        alert("功能");
        $("#btn3").unbind("click");
    })
    
});

执行结果
点击“测试1”按钮：弹出“嘻嘻”警告框
点击“解除测试1的功能”按钮：解除测试1的功能，点击测试1不再有效果
点击“一次性”按钮：弹出“功能”警告框，再次点击则无效

3. one()

一次性事件，对于bind和unbind实现的一次性事件的简便写法
语法规则与bind()一致，只不过事件只执行一次

选择器.one("click", function (){
  //JS代码
})

使用one函数绑定的事件，仅在第一次触发时生效。
HTML代码

<input type="button" name="btn4" id="btn4" value="一次性按钮" />

JQuery代码

$("#btn4").one("click", function (){
    alert("功能");
})

4. click()

以click事件为例，理解常规事件
HTML代码

<input type="button" name="btn1" id="btn1" value="测试" />

JQuery代码

$("#btn1").click(function (){
    alert("123");
});

JQuery常规事件	事件字符串	JS事件名称	触发时机
blur()	blur	onBlur	失去焦点
focus()	focus	onFocus	获得焦点
change()	change	onChange	下拉列表选中项改变
click()	click	onClick	鼠标左键单击
dblclick()	dblclick	onDblclick	鼠标左键双击
keydown()	keydown	onKeydown	键盘按键按下
keypress ()	keypress	onKeypress	键盘按键按下和抬起
keyup()	keyup	onkeyup	键盘按键抬起
mousedown()	mousedown	onMousedown	鼠标左键按下
mouseup()	mouseup	onMouseup	鼠标左键抬起
mouseenter()	mouseenter	onMouseenter	鼠标进入（悬停）
mouseover()	mouseover	onMouseover	鼠标进入（悬停）
mouseleave()	mouseleave	onMouseleave	鼠标离开
mouseout()	mouseout	onMouseout	鼠标离开
mousemove()	mousemove	onMousemove	鼠标移动

5. hover()

复合事件hover表示一组悬停功能，类似于CSS伪类:hover。
hover()与常规事件不同，参数包括两个函数
语法：

选择器.hover(function (){
      //悬停时触发的JS
    },function (){
      //离开时触发的JS
    });

也可以利用mouseover()和mouseout()分别处理悬停和离开事件触发

6. submit()

表单提交事件

• submit() 相当于按了submit按钮，提交表单
• submit(function (){}) 相当于原生JS中的onSubmit事件，需要函数给出boolean类型的返回值

HTML代码

<form id="form1" action="http://www.baidu.com" method="post">
    用户名:<input type="text" name="lname" id="lname" />
    <input type="button" id="btn1" value="提交"/>
</form>

JQuery代码

$(document).ready(function (){
    $("#btn1").click(function (){
        $("#form1").submit();  //提交表单
    });
    $("#form1").submit(function (){  //onsubmit
        var lname = $("#lname").val();
        if(lname == ""){
            alert("请输入用户名");
            return false;
        }
        return true;
    });
    
});

结果：在用户名中的文本框中输入内容后可以提交，未输入提示“请输入用户名”