jQuery基础事件

学习要点：

• 绑定事件
• 简写事件
• 复合事件

一、绑定事件
bind(type, [data], fn) 的用法
type 表示绑定的事件名称 如click、mouseup等
data 可选，表示传递的额外数据，可以是字符串、数组、对象和数字
fn 事件处理函数

<div id="box">box</div>#box {    height: 100px;    width: 100px;    background: red;}

点击事件—绑定匿名函数

$("#box").bind("click", function() {    alert($(this).text());     // box});

将匿名函数提取出来—传递参数

$("#box").bind("click", "123", fn);function fn(event) {    alert(event.data);      // 123}

同时绑定多个事件

$("#box").bind("mouseover mouseout", function () {    $(this).html(function (index, value) {        return value + "1";         // 之前的值 + "1"    });})

也可以绑定对象

$("#box").bind({    "click" : function () {        console.log("单击");    },    "mouseover" : function () {        console.log("移入");    },    "mouseout" : function () {        console.log("移出");    }});

删除全部的事件

$("#box").unbind();

删除特定的事件—仅仅删除单击事件，对于over out事件依然保留

$("#box").unbind("click");

二、简写事件

第一组：mouseover、mouseout、mouseenter、mouseleave

over、out表示鼠标移入移出触发事件

enter、leave表示鼠标穿过触发事件

区别：enter、leave穿过子元素不会触发事件，而over、out在穿过子元素时会触发事件
当鼠标移入div，strong的innerHTML的值 + “1”;

<div style="width:200px;height:200px;background:green;">    <p style="width:100px;height:100px;background:red;"></p></div><strong></strong>

移入div和p都会触发事件

$("div").mouseover(function() {    $("strong").html(function (index, value) {        return value + "1";    });});

只有移入div才触发事件，移入P不会触发事件

$("div").mouseenter(function () {    $("strong").html(function (index, value) {        return value + "1";    })});

移出div和p都会触发事件

$("div").mouseout(function() {    $("strong").html(function (index, value) {        return value + "1";    });});

只有移出div才触发事件，移出P不会触发事件

$("div").mouseleave(function () {    $("strong").html(function (index, value) {        return value + "1";    })});

第二组：.keydown()、.keyup()返回的是keyCode键码，而.keypress()返回的是charCode字符编码。

<input type="text"/>$("input").keydown(function (e) {    console.log(e.keyCode);});$("input").keypress(function (e) {    console.log(e.charCode);});

第三组：光标激活和丢失
.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。
.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

<div style="width:200px;height:200px;background:red;">    <input type="text" value="" /></div><strong></strong>$("input").focus(function () {     // 当前元素触发    $("strong").html("123");});$("div").focusin(function () {     // 子元素触发    $("strong").html("456");   });

三、复合事件

1.ready(fn) 当 DOM 加载完毕触发事件，不需要等待图片、视频等的加载

$().ready(function () {    alert("234");});

2.hover([fn1,]fn2) 当鼠标移入触发第一个 fn1，移出触发 fn2

<div style="width:200px;height:200px;background:green;">    <p style="width:100px;height:100px;background:red;"></p></div><strong></strong>$("div").hover(function () {    console.log("移入");}, function () {    console.log("移出");});

PS : hover内部封装的是mouseenter和mouseleave,并非mouseover和mouseout，也就是在子元素内移动无效