jQuery 事件
1.ready() - 类似于window.onload的作用 *写法 *$(document).ready(function(){}); *$().ready(function(){}); *$(function(){}); * ready与onload的区别 * ready * 具有简写方式 * 在一个HTML页面中允许多个 * 等待HTML页面中所有DOM结构加载完毕后就可以执行 * onload * 没有简写方式 * 在一个HTML页面中只能一个 * 必须等待HTML页面中所有内容全部加载完毕后才能执行
1 //示例 2 $(document).ready(function(){ 3 console.log($("#user").val()); 4 }); 5 6 // jQuery - undefined - 具有相对完善的事件处理机制 7 var $user = $("#user"); 8 console.log($user.val());//空元素调用方法不报错，返回undefined 9 10 // DOM - 报错 DOM空元素调用方法属性报错11 var user = document.getElementById("user11");12 if(user){13 console.log(user.value);14 }else{15 console.log("undefined");16 } 1 //jQuery中的事件-ready与onload区别 (相差近6毫秒) 2 var startTime = new Date().getTime(); 3 $(function(){ 4 var endTime1 = new Date().getTime(); 5 console.log("ready执行时间: "+(endTime1-startTime)+" ms"); 6 }); 7 window.onload = function(){ 8 var endTime2 = new Date().getTime(); 9 console.log("onload执行时间: "+(endTime2-startTime)+" ms");10 } 2.事件绑定与解绑
* bind(type,data,fn) - 绑定事件 * type - 指定绑定的事件名称 * 如果绑定多个事件时,使用空格隔开 * data - 可选项,作为event.data属性值传递给事件对象的额外数据对象 * fn - 绑定事件的处理函数 * unbind() - 解绑事件 * type - 指定解绑的事件名称 * 默认不传递任何内容 - 解绑所有事件 * 指定单个事件名称 - 解绑单个事件 * 指定多个事件名称 - 解绑多个事件 * 绑定与解绑允许指定哪些事件? blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。 * 注意 * 所谓的click()事件是bind('click')的简写方式 1 /* 2 * bind(type,data,fn)方法 - 事件绑定 3 * * type - 设置绑定的事件名称,string类型. 4 * * data - 可选项,作为event.data属性值传递给事件对象的额外数据对象 5 * * fn - 事件对应的处理函数 6 */ 7 $(".d1").bind("click",function(){ 8 if($(".d2").is(":hidden")){ 9 $(".d2").show(3000);10 }else{11 $(".d2").hide(3000);12 }13 });14 //多事件绑定15 $(".d1>h3").bind("mouseover mouseout",function(){16 if($(".d2").is(":hidden")){17 $(".d2").show(1000);18 }else{19 $(".d2").hide(1000);20 }21 });22 /*23 * unbind() - 解绑事件24 */25 $(".d1").unbind();//解绑所有事件26 //解绑指定事件27 $(".d1>h3").unbind("mouseover mouseout"); 3.事件对象(event)
* 事件对象被封装在事件对应的处理函数的参数 ele.onclick = function(event){ event } * 常用用法 * pageX/clientX/offsetX/x - 当前x轴 * pageY/clientY/offsetY/y - 当前y轴 * target - 当前绑定事件的源对象(元素) * returnValue - 返回值,Boolean类型 * return false - 阻止页面的默认行为 * which/keyCode/charCode - 键盘对应值4.事件冒泡 * 捕获 * 冒泡5.模拟事件(了解) * trigger() 1 $("button").click(function(event,a,b){2 console.log(event.target);3 console.log("a : "+a);4 console.log("b : "+b);5 }).trigger("click",['this is a.','this is b.']);//trigger自动触发同名事件 6.事件切换
* hover(over,out)方法 * over - onmouseover事件的处理函数 * out - onmouseout事件的处理函数7.DOM事件回顾 * 原生DOM绑定事件三种 * 在HTML页面元素中指定事件名称 * 在javascript代码中 * element.onclick = function(){} * element.addEventListener("click",function(){});