1. # 关于事件
  2.  
  3. ## 事件绑定
  4.  
  5. 1.**基本绑定**
  6.  
  7. > $(element).click(function(){})
    >
    > $(element).dblclick(function(){})
    >
    > 。。。
    >
    > 加载完毕事件
    >
    > $(document).ready(function(){})
    >
    > $(function(){})
  8.  
  9. 2.**方法绑定**
  10.  
  11. > $(element).bind('click', function(){})//绑定事件
    >
    > $(element).unbind();//解除事件绑定
  12.  
  13. 3.**动态绑定**
  14.  
  15. > $(element).live('click', function(){})
    >
    > 需注意,live方法在高版本的jquery中移出了,在使用时请注意版本
  16.  
  17. ## 事件触发
  18.  
  19. > 当我们想要去触发某个元素的事件时可以使用 trigger,注意需指定元素的事件类型
  20.  
  21. ```
    $(element).trigger('click')
    ```
  22.  
  23. ### 常用的鼠标事件
  24.  
  25. ```
    鼠标单击事件 click
    鼠标双击事件 dbclick
    鼠标移入事件 mouseover
    鼠标移出事件 mouseout
    鼠标按下事件 mousedown
    鼠标抬起事件 mouseup
    鼠标移动事件 mousemove
    ```
  26.  
  27. ## 事件冒泡和默认行为
  28.  
  29. **事件冒泡**
  30.  
  31. > 当触发一个元素的事件时,会**自动触发该元素的父级和先辈级的同类型事件**,**造成事件并发**,导致页面混乱,我们称为事件冒泡
    >
    > 此时我们可以在元素的事件处理函数中 返回一个false 来进行阻止,注意这个方法仅限于在jquery中使用
  32.  
  33. **默认行为**
  34.  
  35. > 在页面中有些元素是具备默认行为的,例如a链接的单击,表单的提交,都会进行跳转或提交,这些我们成为默认行为
    >
    > 但是在绑定上事件后,**它首先会先执行事件,再去执行默认行为**,而有时我们只想让其触发事件,但不执行默认行为时,
    >
    > **我们可以在该元素的事件中 返回一个false来进行阻止默认行为**
  36.  
  37. ```
    <a href="http://www.baidu.com">百度</a>
  38.  
  39. $('a').click(function(){
  40.  
  41. //阻止默认行为
    return false;
    })
    ```
  42.  
  43. **获得当前鼠标的位置和按键**
  44.  
  45. > 我们有鼠标和键盘按键的事件,在触发事件时如果我们**想要获取鼠标的位置或键盘按键信息时**,
    >
    > 首先需要在当前的事件中**传递一个 事件对象 e**vent
  46.  
  47. ```
    $(element).click(function(e){
    //能够获取鼠标的x轴和y轴坐标,坐标位置相对于浏览器窗口
    var x = e.clientX;
    var y = e.clientY;
  48.  
  49. //能够获取鼠标的x轴和y轴坐标,坐标位置相对于文档
    var _x = e.pageX;
    var _y = e.pageY;
    })
  50.  
  51. $(element).keydown(function(e){
    //可以打印e对象,或者直接使用该对象中的keyCode属性来获取按键信息
    var key = e.keyCode;
    console.log(key);
    })
    ```

13-jQuery事件绑定和常用鼠标事件的更多相关文章

  1. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  2. jquery table的隔行变色 鼠标事件

    一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...

  3. js Dom为页面中的元素绑定键盘或鼠标事件

    html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...

  4. 事件绑定on与hover事件

    今天项目中UI设计了一个鼠标划入和划出的效果,本来这个小效果是非常简单的!可是在实际的生产环境中就出现了一点点问题!因为在实际的环境中,数据全部是用ajax异步加载进去的,这样就造成了hover方法不 ...

  5. ES之事件绑定,解除绑定以及事件冒泡、事件捕获

    绑定事件的处理方法任何元素都有事件属性,而绑定事件就是将这个事件与一个函数相连接. ①句柄事件dom.onXXX = function () {代码块} 以on开头的事件属于句柄事件兼容性非常好,但是 ...

  6. 事件监听机制——鼠标事件MouseEvent

    鼠标事件 鼠标事件包括鼠标的双击.左击.右击.中间键等等,本文进行事件加载进行简单介绍,具体可以参考键盘事件. import java.awt.*; import java.awt.event.*; ...

  7. jQuery事件绑定与常用事件

    jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click.mousedown.keypress事件.jQuery绑定事件有2种方法,下面用最基本的例子做演示. ①直接绑 ...

  8. 【swift】长按事件绑定,平移滑动事件+坐标获取

    为何把这两个事件归类在一起? 我后来才明白,iOS有一个手势事件(UiGestureRecognizer) 事件里有7个功能,不过我只试过前两个,也就是标题的这两个(长按.平移滑动) UILongPr ...

  9. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

随机推荐

  1. 对Moment.js的研究

    创建npm install moment --save-dev 日期格式化 moment().format('MMMM Do YYYY, h:mm:ss a'); // 六月 4日 2019, 6:2 ...

  2. F5设备部署

    旁挂组网(组网模式一) 所谓旁挂组网模式,就是指在BIG-IP LTM上只配置一个Vlan,使用一个端口(或者Trunk端口)连接在网络中,所有的处理均在这一个Vlan中运行.通常有三种常见配置模式. ...

  3. dede后台系统基本参数空白怎么办?

    dede后台系统基本参数空白怎么办? 如图:   解决办法:还原dede_sysconfig表即可 后台 系统-SQL命令行工具,执行如下sql delete table dede_sysconfig ...

  4. Element ui 中的表格数据格式转换

  5. 进阶3: zookeeper-3.4.9.tar.gz和hbase-1.2.4-bin.tar.gz 环境搭建(hbase 伪分布式)

    前提条件: 成功安装了  jdk1.8,  hadoop2.7.3 注意条件: zookeeper,hbase 版本必须要和hadoop 安装版本相互兼容,否则容易出问题: 本次:安装包 zookee ...

  6. loadrunner性能测试巧匠训练营-controller

    1.设置集合点 现在脚本添加集合点的函数,集合点不能添加到事务里面,负责统计事务的时候会把时间计算进去 2.IP欺骗 前言 https://www.cnblogs.com/danbing/p/7459 ...

  7. 图论之点双&边双

    说人话: 边双联通: a到b的路径上无必经边 点双联通: a到b的路径上除了a,b没有必经点 tarjan求点双联通: 代码(补图) 割点: 桥: 求点双:强制dfs时不越过割点,即可求出一个块 求边 ...

  8. Ffmpeg AAC 编码错误 Input contains (near) NaN/+-Inf

    Ffmpeg AAC编码 如果传入参Frame的Sample Format 为 AV_SAMPLE_FMT_S16,会出现 错误提示 Input contains (near) NaN/+-Inf,需 ...

  9. HTML-空格字符实体

      不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累加的(只 ...

  10. X509格式的证书校验(基于GMSSL2019-06-15版本)

    实现X509格式证书的链式校验 // cert_public.cpp : Defines the exported functions for the DLL application. // #inc ...