jQuery总结3（事件）

爱被打了一巴掌 2022-06-16 06:52 183阅读 0赞

jQuery学习3（事件）  
一、jQuery中的事件简介  
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。  
实例：在元素上移动鼠标、选取单选按钮、点击元素等。  
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。  
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：

在上面的例子中，当按钮的点击事件被触发时会调用一个函数：  
$("button").click(function() \{..some code... \} )  
该方法隐藏所有 <p> 元素：  
$("p").hide()。  
如果网站包含许多页面，并且希望jQuery 函数易于维护，那么可以把 jQuery 函数放到独立的 .js 文件中，通过 src 属性来引用这个文件：

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当遵循以下原则时，代码会更恰当且更易维护：  
把所有 jQuery 代码置于事件处理函数中  
把所有事件处理函数置于文档就绪事件处理器中  
把 jQuery 代码置于单独的 .js 文件中  
如果存在名称冲突，则重命名 jQuery 库  
  
  
二、常用事件  
1、click()  
click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。  
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：  
实例

$("p").click(function(){
      $(this).hide();
    });

2、dblclick()  
当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：  
实例

$("p").dblclick(function(){
      $(this).hide();
    });

3、focus()  
当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：  
实例

$("input").focus(function(){
      $(this).css("background-color","#cccccc");
    });

4、mouseenter()  
当鼠标指针穿过元素时，会发生 mouseenter 事件。  
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：  
实例

$("#p1").mouseenter(function(){
        alert('您的鼠标移到了 id="p1" 的元素上!');
    });

5、mouseleave()  
当鼠标指针离开元素时，会发生 mouseleave 事件。  
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：  
实例

$("#p1").mouseleave(function(){
        alert("再见，您的鼠标离开了该段落。");
    });

6、mousedown()  
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。  
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

实例

$("#p1").mousedown(function(){
        alert("鼠标在该段落上按下！");
    });

7、mouseup()  
当在元素上松开鼠标按钮时，会发生 mouseup 事件。  
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：  
实例

$("#p1").mouseup(function(){
        alert("鼠标在段落上松开。");
    });

8、hover()  
hover()方法用于模拟光标悬停事件。  
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。  
实例

$("#p1").hover(
        function(){
            alert("你进入了 p1!");
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");
        }
    );

9、blur()  
当元素失去焦点时，发生 blur 事件。  
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：  
实例

$("input").blur(function(){
      $(this).css("background-color","#ffffff");
    });

10、$(document).ready()和window.onload事件  
$(document).ready()注册是事件处理程序会在DOM完全就绪并可以使用时调用.这意味着所有元素对脚本而言都是可以访问的,但是并不意味着所有关联的文件都已经下载完毕. 即当HTML下载完成并解析成DOM树后,代码就可以运行。  
而window.onload意味着文档完全下载到浏览器中了。  
一般来说,使用$(document).ready()要优于onload. 但是因为支持文件可能还没有加载完成,所以类似图像的高度和宽度这样的属性不一定有效. 如果需要访问这些属性, 可能需要选择实现一个onload事件处理程序, 使这两种机制能够和平共存.

(document).ready()可简写为(); 即:
        $(function(){
            //code here
        });

三、事件的使用  
1、绑定事件  
on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。

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

另一种更简化的写法是直接调用click()方法：

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完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。  
假设我们想给一个<form>表单绑定submit事件，下面的代码没有预期的效果：

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

因为JavaScript在此执行的时候，<form>尚未载入浏览器，所以$('\#testForm)返回\[\]，并没有绑定事件到任何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...
        $('#testForm).submit(function () {
            alert('submit!');
    });

如果你遇到$(function () \{...\})的形式，牢记这是document对象的ready事件处理函数。  
我们还可以反复绑定事件处理函数，它们会依次执行：

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

2、合成事件  
我们知道，鼠标移入和鼠标移出这2个事件往往都是同时使用的，因此我们必须分别对“鼠标移入”和“鼠标移出”这2个事件分别定义。但是在jQuery中，我们可以使用hover()方法一次性地定义这2个事件，这就是所谓的合成事件。  
$().hover(fn1,fn2)  
参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。  
示例：

常用格式：

$("#wrapper").hover(function () { 
        //第1个function的内容
    }, function () {
        //第2个function的内容
    })

还有一个合成事件是toggle()。  
toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个。  
toggle() 的另一个作用: 切换元素的可见状态。  
  
  
3、事件参数  
有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息：

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

4、取消绑定  
一个已被绑定的事件可以解除绑定，通过off('click', function)实现：

function hello() {
        alert('hello!');
    }

a.click(hello); // 为hello函数绑定点击事件

// 10秒钟后解除绑定:
    setTimeout(function () {
        a.off('click', hello);//解除hello函数的绑定事件
    }, 10000);
    需要特别注意

的是，下面这种写法是无效的：

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

这是因为两个匿名函数虽然长得一模一样，但是它们是两个不同的函数对象，off('click', function () \{...\})无法移除已绑定的第一个匿名函数。  
为了实现移除效果，可以使用off('click')一次性移除已绑定的click事件的所有处理函数。  
同理，无参数调用off()一次性移除已绑定的所有类型的事件处理函数。  
  
  
5、事件触发条件  
事件的触发总是由用户操作引发的。例如，我们监控文本框的内容改动：

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

当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change事件：

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

有些时候，我们希望用代码触发change事件，可以直接调用无参数的change()方法来触发该事件：

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

input.change()相当于input.trigger('change')，它是trigger()方法的简写。  
  
  
6、一次性事件  
在jQuery中，我们可以使用one()方法为所选元素绑定一个“只触发一次”的处理函数。  
  
  
语法：  
$().one(type , fn)  
说明：type表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。这里的type是一个字符串。fn表示事件的处理函数。

这里我们使用one()方法为按钮绑定了一个“只触发一次”的click事件。当我们第一次点击按钮之后会弹出对话框，但是第二次点击按钮就不会有任何反应。这就是one()方法的特点。