标签：
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(){});
标签：
原文地址：http://www.cnblogs.com/Medeor/p/4937889.html
