码迷,mamicode.com
首页 > Web开发 > 详细

[Web 前端] 028 jQuery 事件

时间:2019-09-25 21:05:45      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:move   logs   不执行   函数   return   属性   表单   class   jquer   

关于事件

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);
});

[Web 前端] 028 jQuery 事件

标签:move   logs   不执行   函数   return   属性   表单   class   jquer   

原文地址:https://www.cnblogs.com/yorkyu/p/11587370.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!