事件绑定

jQuery中有两种绑定事件的方式

1. 事件名称(fn)

• IDE有代码提示，不容易编写出错
• 部分事件jQuery没有实现，没有实现的事件不能添加

2. on(“事件名称”, fn)

• IDE没有代码提示，容易编写错误
• 所有js事件都可以添加

3. 注意点

• 同一元素的相同事件不会覆盖
• 同一元素可以添加不同事件

// 1. 事件名称(fn)
$("button").click(function () {
    alert("click1");
});
// 2. on(事件名称, fn)
$("button").on("click", function () {
   alert("click2"); 
});

事件解除

off(“事件名称”, fn)

1. off方法如果不传递参数，会移除所有事件
2. off方法如果传递一个参数，会移除所有指定类型的事件
3. off方法如果传递两个参数，会移除所有指定类型的带有指定函数的事件

function() clickFn1 () {
    alert("click1");
}
function() clickFn2 () {
    alert("click2");
}
$("button").click(clickFn1);
$("button").click(clickFn2);

$("button").off();
$("button").off("click");
$("button").off("click", clickFn1);

jQuery事件

// 当元素失去焦点时触发 blur 事件
blur()  
// 当元素或者其子元素失去焦点时触发 focusout 事件
focusout()  


// 当元素获得焦点时，触发 focus 事件
focus()  
// 当元素或者其子元素获得焦点时，触发 focusin 事件
focusin()  


//当元素的值发生改变，并失去焦点后，会触发 change 事件
change()  


// 单击元素(鼠标按键按下并松开为一次单击)，触发一次click事件
click()  
// 当双击元素时，会发生 dblclick 事件
dblclick()  
// 按下鼠标按键时，会发生 mousedown 事件。无需松开就触发
mousedown()  
// 当在元素上松开鼠标按钮时，会发生 mouseup 事件
mouseup()  



// 鼠标移入元素会触发。其子元素被移入不触发
mouseenter()  
// 鼠标移出元素会触发。其子元素被移出不触发
mouseleave()  
// 鼠标移入元素会触发。其子元素被移入也触发
mouseover()  
// 鼠标移出元素会触发。其子元素被移出也触发
mouseout()  
// 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});


// 当调整浏览器窗口的大小时，发生 resize 事件
resize()


// 当用户滚动指定的元素时，会发生 scroll 事件
// scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
$(window).scroll(function () {
    var scrollTop = $("html,body").scrollTop();
    console.log($("body").scrollTop() + $("html").scrollTop());
})


// 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
select()
// 当提交表单时，会发生 submit 事件
submit()
// 如果你要阻止表单提交
$("form").submit( function () {
  return false;
} );

键盘相关事件

// 如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生
$(window).keydown(function(event){
  switch(event.keyCode) {
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
  }
});

// keypress 事件与 keydown 事件类似
// 它发生在当前获得焦点的元素上
//与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件
// 如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
keypress()

// 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上
// 如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

其它事件

hover()

mouseenter和mouseleave的结合

// 两个参数
$(.father).hover(function () {
    console.log("father被移入");
}, function () {
    console.log("father被移出");
});
// 一个参数
$(.father).hover(function () {
    console.log("father被移入或移出");
});

mousewheel

body.addEventListener("mousewheel", function (e) {
            e.preventDefault();
            console.log(e);
        }, {passive:false});