• 事件


    浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。

    举个例子,假设要在用户点击了超链接时弹出提示框,我们用jQuery这样绑定一个click事件

    /* HTML:
     *
     * <a id="test-link" href="#0">点我试试</a>
     *
     */
    var a = $('#test-link');
    a.click(function () {
        alert('Hello!');
    });

    jQuery能够绑定的事件主要包括:

    鼠标事件

    click: 鼠标单击时触发;

    dblclick:鼠标双击时触发;

    mouseenter:鼠标进入时触发;

    mouseleave:鼠标移出时触发;

    mousemove:鼠标在DOM内部移动时触发;

    hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。

    键盘事件

    键盘事件仅作用在当前焦点的DOM上,通常是<input><textarea>

    keydown:键盘按下时触发;

    keyup:键盘松开时触发;

    keypress:按一次键后触发。

    其他事件

    focus:当DOM获得焦点时触发;

    blur:当DOM失去焦点时触发;

    change:当<input><select><textarea>的内容改变时触发;

    submit:当<form>提交时触发;

    ready:当页面被载入并且DOM树完成初始化后触发。

    ready仅作用于document对象。由于ready事件在DOM完成初始化后触发,且只触发一次,所以非常适合用来写其他的初始化代码。

    我们自己的初始化代码必须放到document对象的ready事件中,保证DOM已完成初始化

    <html>
    <head>
        <script>
            $(document).on('ready', function () {
                $('#testForm).on('submit', function () {
                    alert('submit!');
                });
            });
        </script>
    </head>
    <body>
        <form id="testForm">
            ...
        </form>
    </body>
    

    这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。

    由于ready事件使用非常普遍,所以可以这样简化:

    $(document).ready(function () {
        // on('submit', function)也可以简化:
        $('#testForm).submit(function () {
            alert('submit!');
        });
    });
    

    甚至还可以再简化为:

    $(function () {
        // init...
    });
    

    上面的这种写法最为常见。如果你遇到$(function () {...})的形式,牢记这是document对象的ready事件处理函数。

    完全可以反复绑定事件处理函数,它们会依次执行:

    $(function () {
        console.log('init A...');
    });
    $(function () {
        console.log('init B...');
    });

    事件参数

    有些事件,如mousemovekeypress,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数,可以从Event对象上获取到更多的信息:

    $(function () {
        $('#testMouseMoveDiv').mousemove(function (e) {
            $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
        });
    });

    取消绑定

    一个已被绑定的事件可以解除绑定,通过off('click', function)实现:

    function hello() {
        alert('hello!');
    }
    
    a.click(hello); // 绑定事件
    
    // 10秒钟后解除绑定:
    setTimeout(function () {
        a.off('click', hello);
    }, 10000);
     
  • 相关阅读:
    DataTable.Compute方法使用实例
    asp.net GridView实现多表头类 多行表头实现方法
    VS2010保存时控件验证(用onclientclick事件) js脚本
    asp.net网页中添加年月日时分秒星期。
    Hbase写入hdfs源码分析
    Hbase的WAL在RegionServer基本调用过程
    Redis设计思路学习与总结
    腾讯云TDSQL审计原理揭秘
    Hbase WAL线程模型源码分析
    在腾讯云上创建您的SQL Cluster(4)
  • 原文地址:https://www.cnblogs.com/EganZhang/p/6559159.html
Copyright © 2020-2023  润新知