zoukankan      html  css  js  c++  java
  • 13-jQuery事件绑定和常用鼠标事件

    # 关于事件

    ## 事件绑定

    1.**基本绑定**

    > $(element).click(function(){})
    >
    > $(element).dblclick(function(){})
    >
    > 。。。
    >
    > 加载完毕事件
    >
    > $(document).ready(function(){})
    >
    > $(function(){})

    2.**方法绑定**

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

    3.**动态绑定**

    > $(element).live('click', function(){})
    >
    > 需注意,live方法在高版本的jquery中移出了,在使用时请注意版本

    ## 事件触发

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

    ```
    $(element).trigger('click')
    ```

    ### 常用的鼠标事件

    ```
    鼠标单击事件 click
    鼠标双击事件 dbclick
    鼠标移入事件 mouseover
    鼠标移出事件 mouseout
    鼠标按下事件 mousedown
    鼠标抬起事件 mouseup
    鼠标移动事件 mousemove
    ```







    ## 事件冒泡和默认行为

    **事件冒泡**

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

    **默认行为**

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

    ```
    <a href="http://www.baidu.com">百度</a>


    $('a').click(function(){

    //阻止默认行为
    return false;
    })
    ```

    **获得当前鼠标的位置和按键**

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

    ```
    $(element).click(function(e){
    //能够获取鼠标的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);
    })
    ```
  • 相关阅读:
    微服务-分解应用程序从而实现更好的部署特性及可伸缩性
    <HTML5和CSS3响应式WEB设计指南>译者序
    使用亚马逊的Route53服务
    Java中测试异常的多种方式
    跑在路上的程序员随想
    使用ruby过程中遇到安装gem失败的一些通用解决方案
    Spring-Context之九:在bean定义中使用继承
    Spring-Context之八:一些依赖注入的小技巧
    配置ngnix
    PHP程序员进阶学习书籍参考指南
  • 原文地址:https://www.cnblogs.com/zifeng001/p/10828619.html
Copyright © 2011-2022 走看看