## jquery事件 ##### 页面载入事件 ```javascript window.onload与$(document).ready() $(document).ready()仅仅是DOM元素加载完成就可以执行， 而window.onload除了DOM元素加载完成外还需要等待所有外部文件加载完成才可以执行。 ready()方法的4种写法 $(document).ready(functin(){ //代码部分 }) jQuery(document).ready(function(){ //代码部分 }) $(function(){ //代码 }) jQuery(function(){ //代码部分 }) 在JavaScript中，window.onload方法只能调用1次， 如果多次调用，则执行最后一个window.onload方法中的代码。 但是在jQuery中，$(document).ready()却可以多次执行 ``` jQuery鼠标事件 ```javascript $("#btn").click(function () { ... } // 单击事件 $("h3").mouseover(function () { ... } //鼠标的“移入” $("h3").mouseout(function () { ... } //“移出” mouseover mouseout 所选元素及其后代子元素 mouseenter和mouseleave 所选元素 mousedown和mouseup 鼠标按下和松开事件 ``` 键盘事件 ```javascript *keydown→keypress→keyup keydown 按下（数字键，功能键） keypress 按下（数字键） keyup 放下键（数字键，功能键） 组合键： event.ctrlKey, event.shiftKey, event.altKey ``` 表单事件 ```javascript focus()相当于JavaScript中的onfocus()方法,作用是获得焦点时触发的事件 和blur()相当于JavaScript中的onblur()方法，作用是失去焦点时触发的事件 用户在文本框输入信息时，将光标放在文本框中，文本框会获取焦点。 当文本框失去光标时，文本框失去焦点; 具有获得焦点/失去焦点事件/获得onchange事件的元素有3个: （1）单行文本框text；（2）多行文本框textarea；（3）下拉列表select； $("#txt").change(function () { ... } // 文本框内字符串的改变将会触发onchange事件 下拉列表列表项的选中触发的事件是change而不是select $("#txt1").select(function () { ... } 当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件 ``` 滚动事件 ```javascript $(window).scroll(function () { ... } // scroll()滚动事件常常和scrollTop()和scrollLeft()这两个方法结合 ``` 绑定事件 ```javascript $("#btn").on("click", function () { ... } // 为“已经存在的元素”绑定事件 -------------------------------------------------------- // 为“未来创建的元素”绑定事件 <script type="text/javascript"> $(function () { var $btn = $('<input id="btn" type="button" value="按钮"/>'); $($btn).appendTo("body"); $("#btn").on("click", function () { alert("fzx"); }); })</script> ------------------------------------------------------------------ // on()方法的兼容性 function addEvent(obj, type, fn) { //定义绑定事件函数 if (obj.attachEvent) { //兼容IE浏览器 obj.attachEvent("on" + type, fn); } else { //兼容非IE浏览器 obj.addEventListener(type, fn, false); } } ``` 解绑事件 ```javascript $("#btn").off("click"); ``` 合成事件 ```javascript $("#wrapper").hover(function () { }, function () { }) ---------------------------------------------------------- $(function () { $("h3").hover(function () { $("#content").css("display","block"); }, function () { $("#content").css("display", "none"); }); }) ``` 一次事件one() ```javascript $("#btn").one("click", function () { ... } ```