click事件

/* HTML:
 *
 * <a id="test-link" href="#0">点我试试</a>
 *
 */

// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
    alert('Hello!');
});

a.click(function () {
    alert('Hello!');
});

鼠标事件

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树完成初始化后触发。

JavaScript在此执行的时候，<form>尚未载入浏览器

<html>
<head>
    <script>
        // 代码有误:
        $('#testForm).on('submit', function () {
            alert('submit!');
        });
    </script>
</head>
<body>
    <form id="testForm">
        ...
    </form>
</body>

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

ready事件

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

简化为

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

事件参数

$(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);

下面是无效的

// 绑定事件:
a.click(function () {
    alert('hello!');
});

// 解除绑定:
a.off('click', function () {
    alert('hello!');
});

事件触发条件

var input = $('#test-input');
input.change(function () {
    console.log('changed...');
});

var input = $('#test-input');
input.val('change it!'); // 无法触发change事件

var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件

浏览器安全限制

有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数

$(document).ready(function () {
            var button1 = $('#testPopupButton1');
            var button2 = $('#testPopupButton2');

            function popupTestWindow() {
                window.open('/');
            }

            button1.click(function () {
                popupTestWindow();
            });

            button2.click(function () {
                // 不立刻执行popupTestWindow()，100毫秒后执行:
                setTimeout(popupTestWindow, 100);
            });
        });

练习

<html>

    <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script>
            'use strict';
            $(function() {

                var
                    form = $('#test-form'),
                    langs = form.find('[name=lang]'),
                    selectAll = form.find('label.selectAll :checkbox'),
                    selectAllLabel = form.find('label.selectAll span.selectAll'),
                    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
                    invertSelect = form.find('a.invertSelect');

                // 重置初始化状态:
                form.find('*').show().off();
                form.find(':checkbox').prop('checked', false).off();
                deselectAllLabel.hide();
                // 拦截form提交事件:
                form.off().submit(function(e) {
                    e.preventDefault();
                    alert(form.serialize());
                });

                function updateLabel() {
                    let allChecked = langs.filter(':checked').length === langs.length

                    selectAll.prop('checked', allChecked)
                    if(allChecked) {
                        selectAllLabel.hide()
                        deselectAllLabel.show()
                    } else {
                        selectAllLabel.show()
                        deselectAllLabel.hide()
                    }
                }

                selectAll.change(function(e) {
                    langs.prop('checked', $(this).is(':checked'))
                    updateLabel()
                })

                invertSelect.click(function(e) {
                    langs.click()
                })

                langs.change(() => updateLabel())

                // 测试:
                alert('请测试功能是否正常。');
            });
        </script>
    </head>

    <body>

        <form id="test-form" action="test">
            <legend>请选择想要学习的编程语言：</legend>
            <fieldset>
                <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label>
                    <a href="#0" class="invertSelect">反选</a>
                </p>
                <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
                <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
                <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
                <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
                <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
                <p><button type="submit">Submit</button></p>
            </fieldset>
        </form>

    </body>

</html>

[JavaScript基础]学习④④--事件