jQuery添加事件

2019-02-12 10:55:18

利用jQuery为页面添加事件处理程序很简单，以下提供了方法及实例。

一、在页面加载后执行任务

(1)事件注册
通过JavaScript注册事件处理程序的传统机制是，把一个函数指定给DOM元素的对应属性。
例如，假设我们已经定义了如下函数：

function doSomething() {
//执行某种任务……
}

那么，我们既可以在HTML标记中指定该函数：
<body onload="doStuff();">
也可以在JavaScript代码中指定该函数：
window.onload = doStuff;
这两种方式都会在页面加载完成后执行这个函数，但第2种更清晰。

注意：这里在将函数指定为处理程序时，省略了后面的圆括号，只使用了函数名。如果带着圆括号，函数会被立即调用；没有圆括号，函数名就只是函数的标识符或函数引用，可以用于在将来再调用函数。

(2)向.ready()回调函数中传入参数
$(document).ready()结构实际上是在基于document这个DOM元素构建而成的jQuery对象上调用了.ready()方法。 $()函数为我们提供了一种简写方式。当给它传递一个函数作为参数时，jQuery会隐式调用.ready()。
对于：

$(document).ready(function() {
//这里是代码……
});
可以简写成：
$(function() {
//这里是代码……
});

虽然这种语法更短一些，但作者推荐使用较长的形式，因为较长的形式能够更清楚地表明代码在做什么。

有时，可能需要在同一个页面中使用多个JavaScript库。由于很多库都使用$标识符（因为它简短方便），因此就需要一种方式来避免名称冲突。为解决这个问题， jQuery提供了一个jQuery.noConflict()方法，调用该方法可以把对$标识符的控制权让渡还给其他库。

使用jQuery.noConflict()方法的一般模式如下：
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
</script>
<script src="myscript.js"></script>
首先，包含jQuery之外的库（这里是Prototype）。
然后，包含jQuery库，取得对$的使用权。
接着，调用.noConflict()方法让出$，以便将控制权交还给最先包含的库（Prototype）。
这样就可以在自定义脚本中使用两个库了，但是，在需要使用jQuery方法时，必须记住要用jQuery而不是$来调用。

在这种情况下，还有一个在.ready()方法中使用$的技巧。我们传递给它的回调函数可以接收一个参数——jQuery对象本身。利用这个参数，可以重新命名jQuery为$，而不必担心造成冲突。
如下面的代码所示：

jQuery(document).ready(function($) {
//在这里，可以正常使用!
});
或者：
jQuery(function($) {
//使用$的代码
})

二、处理简单的事件

这里我们需要引入.on()方法。通过这个方法，可以指定任何DOM事件，并为该事件添加一种行为。
.ready()方法的优点在此也同样适用。多次调用.on()也没有任何问题，即可以按需为同一个事件追加更多的行为。
示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Font Size Switcher</title>
    <style>
        .switcher {
            float: right;
            background-color: #ddd;
            border: 1px solid #000;
            margin: 10px;
            padding: 10px;
            font-size: .9em;
        }

            .switcher h3 {
                margin: .5em 0;
            }


        .small {
            font-size: .5em;
        }

        .normal {
            font-size: 1em;
        }

        .large {
            font-size: 1.5em;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#switcher-normal').attr("disabled", true).on('click', function () {
                $('#container').removeClass('small');
                $('#container').removeClass('large');
                $('#container').addClass('normal');
                $('#switcher-small').attr("disabled", false);
                $('#switcher-normal').attr("disabled", true);
                $('#switcher-large').attr("disabled", false);
            });
            $('#switcher-small').on('click', function () {
                $('#container').removeClass('normal').removeClass('large').addClass('small');
                $('#switcher-small').attr("disabled", true);
                $('#switcher-normal').attr("disabled", false);
                $('#switcher-large').attr("disabled", false);
            });
            $('#switcher-large').on('click', function () {
                $('#container').removeClass('small').removeClass('normal').addClass('large');
                $('#switcher-small').attr("disabled", false);
                $('#switcher-normal').attr("disabled", false);
                $('#switcher-large').attr("disabled", true);
            });
        });
    </script>

</head>
<body>
    <div id="switcher" class="switcher">
        <h3>Font Size</h3>
        <button id="switcher-normal">
            Normal
        </button>
        <button id="switcher-small">
            Small
        </button>
        <button id="switcher-large">
            Large
        </button>
    </div>
    <div id="container">
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
    </div>
</body>
</html>

三、精简代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Font Size Switcher</title>
    <style>
        .switcher {
            float: right;
            background-color: #ddd;
            border: 1px solid #000;
            margin: 10px;
            padding: 10px;
            font-size: .9em;
        }

            .switcher h3 {
                margin: .5em 0;
            }


        .small {
            font-size: .5em;
        }

        .normal {
            font-size: 1em;
        }

        .large {
            font-size: 1.5em;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#switcher button#switcher-normal').attr("disabled", true);
            $('#switcher button').on('click', function () {
                switch ($(this).attr("id"))
                {
                    case 'switcher-small': $('#container').removeClass('normal').removeClass('large').addClass('small');
                        $('#switcher button').attr("disabled", false);
                        break;
                    case 'switcher-large': $('#container').removeClass('normal').removeClass('small').addClass('large');
                        $('#switcher button').attr("disabled", false);
                        break;
                    default: $('#container').removeClass('small').removeClass('large').addClass('normal');
                        $('#switcher button').attr("disabled", false);
                        break;
                }
                $(this).attr("disabled", true);
            });
        });
    </script>

</head>
<body>
    <div id="switcher" class="switcher">
        <h3>Font Size</h3>
        <button id="switcher-normal">
            Normal
        </button>
        <button id="switcher-small">
            Small
        </button>
        <button id="switcher-large">
            Large
        </button>
    </div>
    <div id="container">
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
    </div>
</body>
</html>