06jQuery-05-事件

时间：2021-11-26 09:14:05
不同的浏览器绑定事件的代码都不太一样，所以我们使用jQuery来写代码的话，可以屏蔽不同浏览器之间的差异。

在jQuery中，可以使用 on 来绑定一个事件，指定事件的名称和对应的处理函数：
// 获取超链接的jQuery对象:

var a = $('#test-link');

a.on('click', function () {

    alert('Hello!');

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

但是通常，我们不这样使用，因为我们可以直接使用封装好的事件方法，比如上面的 on click 我们可以直接写成：
a.click(function () {

    alert('Hello!');

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

1、常用事件

1.1 鼠标事件

click 鼠标单击时触发
dblclick 鼠标双击时触发
mouseenter 鼠标进入时触发
mouseleave 鼠标移出时触发
mousemove 鼠标在DOM内部移动时触发
hover 鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave

1.2 键盘事件

键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown 键盘按下时触发
keyup 键盘松开时触发
keypress 按一次键后触发

1.3 其他事件

focus 当DOM获得焦点时触发
blur 当DOM失去焦点时触发
change 当<input>、<select>或<textarea>的内容改变时触发
submit 当<form>提交时触发
ready 当页面被载入并且DOM树完成初始化后触发

注意：ready仅作用于document对象，我们的JS代码通常要等待DOM加载完成后再执行，否则经常会找不到DOM，所以我们自己初始化的代码需要放到ready事件中，保证DOM已经完成了初始化：
<html>

<head>

    <script>

        $(document).on('ready', function () {

            $('#testForm).on('submit', function () {

                alert('submit!');

            });

        });

    </script>

</head>

<body>

    <form id="testForm">

        ...

    </form>

</body>
15
 
1
<html>
2
<head>
3
    <script>
4
        $(document).on('ready', function () {
5
            $('#testForm).on('submit', function () {
6
                alert('submit!');
7
            });
8
        });
9
    </script>
10
</head>
11
<body>
12
    <form id="testForm">
13
        ...
14
    </form>
15
</body>

或者：
$(document).ready(function () {

    // on('submit', function)也可以简化:

    $('#testForm).submit(function () {

        alert('submit!');

    });

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

通常我们使用的是如下的方式，更简洁：
$(function () {

    // init...

});
3
 
1
$(function () {
2
    // init...
3
});

2、事件参数

有些事件比如mousemove和keypress，我们需要获得鼠标的位置和按键的值。所有事件都会传入 Event 对象作为参数，可以从该对象上获取更多的信息：
$(function () {

    $('#testMouseMoveDiv').mousemove(function (e) {

        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);

    });

});
5
 
1
$(function () {
2
    $('#testMouseMoveDiv').mousemove(function (e) {
3
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
4
    });
5
});
如下图所示，鼠标移动的话x，y坐标值会不断变化：
06jQuery-05-事件
 

3、取消绑定

一个已被绑定的事件可以解除绑定，通过off('xxx', function)实现，值得注意的是，off方式的取消绑定是无法取消直接的事件方法的，如下方式取消绑定是无效的：
// 绑定事件:

a.click(function () {

    alert('hello!');

});

// 解除绑定:

a.off('click', function () {

    alert('hello!');

});
x
 
1
// 绑定事件:
2
a.click(function () {
3
    alert('hello!');
4
});
5








6




// 解除绑定:








7




a.off('click', function () {








8




    alert('hello!');








9




});































这是两个不同的函数对象，所以off无法取消已经banding的第一个匿名函数。





可以使用 off('click') 移除所有已绑定的 click 事件的函数，或者 off() 移除已绑定的所有类型的事件处理函数。





4、事件触发条件


记住，事件的触发总是由用户操作引发的，即如果用JS代码去改变值，不会触发对应的事件！





如果一定要使用JS触发事件，可以直接调用无参的事件方法来触发，例如：





var input = $('#test-input');

input.val('change it!');

input.change(); // 触发change事件

// input.change()相当于input.trigger('change')，它是trigger()方法的简写
























 












1




var input = $('#test-input');








2




input.val('change it!');








3




input.change(); // 触发change事件








4




// input.change()相当于input.trigger('change')，它是trigger()方法的简写































另外，有些JS代码即使设定触发，也因为浏览器的安全设置无法实现，只能由用户触发。


























相关文章