jQuery基础篇（三）事件

鼠标事件

鼠标事件的统计：

• click()，点击事件；
• dblclick()，双击事件；
• mousedown()，鼠标按下；
• mouseup()，鼠标抬起；
• mousemove()，鼠标移动；
• mouseover()，鼠标移入，即从外部区域移动到内部中；
• mouseout()，鼠标移出，即从内部移出；
• mouseenter()，同mouseover()；
• mouseleave()，同mouseout()；
• hover()，鼠标移入移出事件，像是mouseenter、mouseleave的合体，$(selector).hover(handlerIn, handlerOut)；
• focusin()，获取焦点；
• focusout()，失去焦点；

mouseover()、mouseenter()区别：我们拿mouseover()和mouseenter()来距离，比如<div><p></p></div>，两个元素都设置了mouseover()事件，当我们触发p的事件时，系统会将此事件一直往上层传递，div的mouseover()也触发了。但对于mouseenter()而言，p消费了事件之后该事件处理就结束了不会再传递，所以推荐用mouseenter()和mouseleave()事件；

//它们通用写法
<div id="test">点击触发<div>
$("#test").click(function() {
    //this指向 div元素
});

<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

---

表单事件

1. focus()、blur()

focus()是获取焦点，blur是失去焦点，那么它和focusin、focusout的区别呢？

<div>
    <input></input>
</div>

当input触发了focus事件时，div的focusin事件就会被触发，换言之，focus在元素本身上产生，focusin在包含元素的元素中产生；

2. change()

顾名思义，当表单内容改变上触发的事件；
input，监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发；
select，对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发；
textarea，多行文本输入框，当有改变时，失去焦点后触发change事件。

3. select()

选中文字事件，长按鼠标选中文本框中的文字，仅对textarea或者文本类型的input生效。

4. submit()

表单中有submit类型的input元素，点击此元素或者回车时触发该事件。

---

键盘事件

keydown()、keyup()、keypress()

---

事件的绑定与解绑

1. 绑定事件：基本用法

$("#myDiv").on("click", function(){
    alert("点击事件");
});

2. 绑定事件：多事件绑定同一函数

$("myDiv").on("focusin focusout", function(){
    alert("焦点变化");
});

3. 绑定事件：多事件绑定多函数

$("myDiv").on({
    mouseentry:function(){
        alert("鼠标移入");
    },
    mouseleave:function(){
        alert("鼠标移出");
    }
});

4. 绑定事件：数据的传递

$("myDIv").on("click", { 
    name: "qdl",
    age: 25
    }, showName);

function showName(e){
    alert("name" + e.data.name);
    alert("age" + e.data.age);
}

5. 绑定事件：委托机制

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>
$("div").on("click","p",fn)

6. 移除事件绑定

// 移除一个事件
$("#myDiv").off("click");   
// 移除多个事件
$("#myDiv").off("mouseentry mouseleave");
// 移除所有事件
$("#myDiv").off();

---

事件对象的使用

$("#myDiv").on("click", funtion(e){
    //此时的e就是事件对象
});

• event.target，直接接受事件的目标元素；
• event.type，接受事件的类型，比如”click”；
• event.pageX，离页面左上角的X轴距离；
• event.pageY，离页面左上角的Y轴距离；
• event.stopPropagation()，阻止事件冒泡；
• event.switch，获取在鼠标单击时，单击的是鼠标的哪个键，左键1、中间键2、右键3；
• event.currentTarget，在冒泡过程中当前元素，相当于this；

this和event.target的区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

---

自定义事件

等待更新…

---