[Web 前端] 028 jQuery 事件

Posted 2022-12-02 yorkyu

关于事件

1. 事件绑定

1.1 基本绑定

// 单击与双击事件
$(element).click(function());
$(element).dblclick(function());

// 加载完毕事件
$(document).ready(function());
$(function());

1.2 方法绑定

$(element).bind('click', function()); // 绑定事件
$(element).unbind();                    // 解除事件绑定

1.3 动态绑定

• 注意：live 方法在高版本(>1.8.3)的 jQuery 中被移出了，使用时请注意版本

$(element).live('click', function());

2. 事件触发

2.1 触发的写法

• 当我们想要去触发某个元素的事件时，可以使用 trigger
• 注意：需指定元素的事件类型

$(element).trigger('click');            // 必须指定元素的事件类型，如此处的 click

2.2 常用的鼠标事件

事件	对应的名称
鼠标单击事件	click
鼠标双击事件	dbclick
鼠标移入事件	mouseover
鼠标移出事件	mouseout
鼠标按下事件	mousedown
鼠标抬起事件	mouseup
鼠标移动事件	mousemove

• 用法示例

$('div').mousedown(function()
            console.log("鼠标被按下了");
        );

3. 事件冒泡和默认行为

3.1 事件冒泡

• 当触发一个元素的事件时，其自动触发该元素的父级和先辈级的同类型事件，造成事件并发，导致页面混乱，我们称为之事件冒泡
• 此时我们可以在元素的事件处理函数中返回一个 false 来进行阻止
• 注意：这个方法仅限于在 jQuery 中使用

3.2 默认行为

• 在页面中，有些元素是具备默认行为的，例如
  • a 链接的单击
  • 表单的提交
• 以上元素都会进行跳转或提交，这些行为被称为“默认行为”
• 但是，在绑定上事件后，它会首先先执行事件，然后执行默认行为
• 若我们只想让其触发事件，但不执行默认行为，我们可以在该元素的事件中返回一个 false 来阻止默认行为

<a href="https://www.cnblogs.com">点我去博客园</a>

$('a').click(function()
    alert("单击事件被触发了");
    
    return false;                       // 阻止默认行为
);

4. 获得当前鼠标的位置和按下的按键

• 我们有鼠标和键盘按键的事件
• 在触发事件时，如果我们想要获取鼠标的位置或键盘按键信息
  • 首先，需要在当前的事件中传递一个事件对象 event

$(element).click(function(e)
    // e for enent，类似于在 Python 中写 Class 时要加 self
    // 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于浏览器窗口
    var x = e.clientX;
    var y = e.clientY;

    // 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于文档
    var _x = e.pageX;
    var _y = e.pageY;
);

$(element).keydown(function(e)
    // 可以打印 e 对象，或者直接使用该对象中的 keyCode 属性来获取按键信息
    var key = e.keyCode;
    console.log(key);
);