jQuery事件

开发工具与关键技术：Adobe Dreamweaver jQuery
作者：李哲定
撰写时间：2020年4月29日
一.jQuery基本事件
事件三要素：事件源、事件、事件驱动程序
1.事件源，也就是需要操作的对象，例如：var box = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box"); 2.事件，例如：…(this).css(“color”, “red”);
1.单击事件
$("#box").click(function(){…});
2.双击事件
$("#box").dblclick(function () {…});
3.焦点事件
$(“input”).focus(function () {
console.log(“获得焦点”);
});
$(“input”).blur(function () {
console.log(“失去焦点”);
});
4.改变事件
当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 input 或 textarea 时，该事件会在元素失去焦点时发生。
$(“select”).change(function () {…});
5.鼠标事件
| onmouseover | 鼠标进入元素 | | ----------- | ------------------ | | onmouseout | 鼠标离开元素 | | mousedown | 鼠标被按下 | | mouseup | 鼠标被松开 | | mousemove | 鼠标在元素上面移动 |
特殊：onmouseenter， onmouseleave 同样是进入和离开这两个不会触发冒泡！！！
$("#box").mouseenter(function () {
console.log(“鼠标进入”);
});
$("#box").mouseleave(function () {
console.log(“鼠标离开”)
});
二.jQuery新增事件
1.hover事件
当鼠标移动到一个匹配的元素上面时(mouseenter)，会触发指定的第一个函数。当鼠标移出这个元素时 (mouseleave)，会触发指定的第二个函数。
语法: hover([fnOver,] fnOut)
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box").hover(fun…(selector).on(types, childSelector, data, handlerFunction)
​ on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
 事件绑定原理：事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始出发。
实例：给ul上绑定一个click事件，当点击li元素的时候触发回调函数。

// 这样做效率低下，需要给每一个li标签都添加一个点击事件
KaTeX parse error: Expected '}', got 'EOF' at end of input: … alert((this).html());
});

    // 我们可以通过jQuery提供的on绑定来实现
    $("ul").on("click", "li", function () {
        alert($(this).html()); // 点击哪一行，就显示哪一行的内容
    });