jquery笔记之事件

默认的js代码是window.onload()
jq代码是$(document).ready()

js的onload是等待所有元素文件和相关联的文件加载完成，而jq是等待dom加载完成即可。

1. $(document).ready(function(){codes..})
2. $(function({codes..})
3. $().ready(function(){codes..})

1.事件绑定
方法：bind(type[,data],fn)
type:指事件类型
data：指可选参数
fn：指绑定的处理函数

2.合成事件
1)hover(enter,leave)
模拟光标悬停事件，第一个参数是移动到元素上触发第一个函数，第二个参数是移出元素触发第二个函数
2)toggle()
模拟鼠标连续点击的事件

3.事件冒泡
包裹的元素会从内侧元素向外侧元素冒泡。
停止冒泡事件：evernt.stopPropagation()
阻止默认行为：event.preventDefault()

4.事件捕获
与事件冒泡相反
jq不支持

5.事件对象的属性
1)event.type 获取事件的类型
2)event.preventDefault() 阻止事件的默认行为
3)event.stopPropagation() 阻止事件的冒泡方法
4)event.target获取触发事件的元素
5)event.relatedTarget 发生事件的相关元素
6)event.pageX和event.pageY获取光标相对于页面的x坐标或者y坐标
7)event.which 获得鼠标单击中的左中右键
8)event.metaKey 为键盘获取Ctrl按键

6.移除事件
1)移除按钮元素以前注册的事件
方法：unbind([type],[data])
type:事件类型
data:要移除的函数

2)一次触发事件one(type,[data],fn)

7.常用模拟
1.触发点击操作：$("#btn").trigger("click") 简写：$("#btn").click()

2.触发自定义事件：元素需要先绑定一个事件

$("#btn").bind("myClick",function(){
    $('#test').append("<p>xxx</p>")
})
$("#btn").trigger("myClick")

3.传递数据：trigger(type,[data])
type: 事件类型
data：传递给函数的参数

4.执行默认操作
trigger()方法如果触发事件，会执行浏览器的默认操作。
例如：$("input").trigger("focus")
这个代码布局会触发input的focus操作，而且input本身也会得到焦点
如果只触发绑定的focus事件，$("input").triggerHandler("focus")

bind技巧：
1.绑定多个事件类型

$(function(){
    $("div").bind("mouseover mouseout",function(){
        $(this).toggleClass("over");
    })
})

2.添加事件的命名空间，便于管理

$(function(){
    $("div").bind("click.plugin",function(){
        $("body").append("<p>code</p>");
    })
})

3.相同事件名称，不同命名空间的执行方法

$(function(){
    $("div").bind("click.plugin",function(){
        $("body").append("<p>code1</p>");
    });
    $("div").bind("click",function(){
        $("body").append("<p>code2</p>");
    })
    $("button").click(function(){
        $("div").trigger("click!");//匹配所有不包含在命名空间中的方法
    })
})