1、基本事件

一、鼠标事件：
1、mousedown([[data],fn]) 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
例子：
$("button").mousedown(function(){
$("p").slideToggle();
});
2、mouseenter([[data],fn]) 当鼠标指针穿过元素时，会发生 mouseenter 事件。
例子:
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
3、mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件。
例子：
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
4、mousemove([[data],fn]) 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
例子：
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
5、mouseout([[data],fn]) 当鼠标指针从元素上移开时，发生 mouseout 事件。
例子：
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
6、mouseover([[data],fn]) 当鼠标指针位于元素上方时，会发生 mouseover 事件。
例子：
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
7、mouseup([[data],fn]) 当在元素上放松鼠标按钮时，会发生 mouseup 事件。
例子：
$("button").mouseup(function(){
$("p").slideToggle();
});

 

 

二、 键盘事件
1、keydown([[data],fn]) 当键盘或按钮被按下时，发生 keydown 事件。
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// 常用keyCode： 空格 32 Enter 13 ESC 27
}
});

2、keypress([[data],fn])
当键盘或按钮被按下时，发生 keypress 事件。
keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

3、keyup([[data],fn])当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生

$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});

三、
1、事件切换： 两种写法
// $(".child").mouseover(function () {
// $(this).css("background-color","red");
// }).mouseout(function () {
// $(this).css("background-color","bisque");
// })

第二种常用
// $(".child").hover(function () {
// $(this).css("background-color","red");
// },function () {
// $(this).css("background-color","bisque");
// })

四、事件冒泡
$(".child").click(function () {
console.log(".child");
})
$(".parent").click(function () {
console.log(".parent");
})
五、阻止事件冒泡
写到function不用每次都写 下面直接调用 return stopPropagation();
function stopPropagation(e) {
e.stopPropagation();//阻止事件冒泡
e.preventDefault();//组织默认行为 比如:reset submit a[href]
return false;
}

 $(".child").click(function (e) {
                console.log(".child");
                // e.stopPropagation();//阻止事件冒泡
                // e.preventDefault();//组织默认行为  比如:reset submit a[href]
                // return false;
                return stopPropagation(e);
            })
            $(".parent").click(function () {
                console.log(".parent");
            })

 

1.event.stopPropagation()方法

2.event.preventDefault()方法

3.return false ；