锋利的 jQuery (第二版) jQuery 中的事件

最新推荐文章于 2024-07-23 11:32:13 发布

weixin_34014277

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000008223980

版权

4.1 jQuery 中的事件

4.1.1 加载 DOM

1. 执行时机
$(document).ready(function(){}): DOM 完全就绪即执行。
window.onload = function(){} 等价于 $(window).load(function(){}): 所有关联文件加载完才执行。
2. 多次使用
3. 简写方式
$(function(){}) 或 $().ready(function(){})

4.1.2 事件绑定

bind(type [, data] , fn): 
type 为事件类型， 包括：blur、focus、load、resize、scroll、unload、click、dbclick、mouse[down, up, move, over, out, enter, leave]、change、select、submit、key[down, press, up]、error。
data 为可选参数， 作为 event.data 属性值传递给事件对象的额外数据对象。
fn 为绑定的处理函数。

3. 多次使用 bind 函数可绑定多个不同事件
4. 简写绑定事件


    $(选择器).mouseover(function(){
        // body...
    }).mouseout(function(){
        // body...
    });

4.1.3 合成事件

1. hover()方法
hover(enter, leave): 模拟光标悬停事件，光标移到元素上方时触发 enter 事件，光标离开时触发 leave 事件。
2. toggle()方法
toggle(fn1, fn2, ...fnN): 模拟鼠标连续点击事件，点击第1次触发第一个事件，点击第2次触发第二个事件。随后的点击会重复循环这 N 个事件。

4.1.4 事件冒泡

1. 冒泡的概念

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="../jquery-1.8.3.js"></script>
</head>

<body>body
    <div id="content">外层div
        <span>
            内部span
        </span>外层div
    </div>
    <div class="msg">
    </div>
</body>
<script>
$(function() {
    $("span").bind("click", function() {
        var text = $(".msg").html() + "<p>这是内部span</p>";
        $(".msg").html(text);
    });
    $("#content").bind("click", function() {
        var text = $(".msg").html() + "<p>这是外层div</p>";
        $(".msg").html(text);
    });
    $("body").bind("click", function() {
        var text = $(".msg").html() + "<p>body被点击</p>";
        $(".msg").html(text);
    });
});
</script>

</html>

单击内部 <span> 元素，触发 <span> 元素的 click 事件，接着触发 div 的 click 事件，最后触发 body 的 click 事件。
元素的 click 事件会按照如下顺序 “冒泡”：
（1） <span>
（2） <div>
（3） <body>
2. 事件冒泡引发的问题
事件对象

$(选择器).bind("click", function(event){ //event: 事件对象
     //...
});

停止事件冒泡

$(选择器).bind("click", function(event){ //event: 事件对象
     //...
     event.stopPropagation();   // 停止事件冒泡
});

阻止默认行为

$(选择器).bind("click", function(event){ //event: 事件对象
     //...
     event.preventDefault();   // 阻止默认行为
});

事件捕获
事件捕获是从最顶端往下开始触发。
由冒泡的例子，元素的 click 事件会按照以下顺序捕获。
（1） <body>
（2） <div>
（3） <span>
事件捕获需要用原生的 javascript 。

4.1.5 事件对象的属性

（1） event.type
作用：获取事件类型。
（2） event.preventDefault()
（3） event.stopPropagation()
（4） event.target
作用：获取到触发事件的元素。
（5） event.relatedTarget
标准 DOM 中， mouseover 和 mouseout 所发生的元素可以通过event.target 来访问，相关元素是通过 event.relatedTarget 来访问的。
（6） event.pageX 和 event.pageY
作用：获取光标相对于页面的 x 坐标和 y 坐标。
（7） event.which
作用：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取到键盘的按键。

$("a").mousedown(function(event){
    alert(event.which);
});
说明：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

（8）event.metaKey
作用：键盘事件中获取 <ctrl> 按键。

4.1.6 移除事件

unbind([type], [data]):
（1） 没有参数， 删除所有绑定事件；
（2） 只有事件类型作为参数， 删除该类型的绑定事件；
（3） 绑定时传递处理函数作为第二个参数， 则只有这个特定的事件处理函数会被删除。

one(type, [data], fn):
在每个对象上， 处理函数只会被触发一次， 语法与 bind 相同。

4.1.7 模拟操作

trigger(type, [data]):
第一个参数是要触发的事件类型， 可以是自定义的点击事件， 第二个参数为传递给处理函数的附加数据，以数组方式传递。

$(".content").bind("myClick", function(event, param1, param2){
   alert(param1 + param2);
});
$(".content").trigger("myClick", ["参数一", "参数二"]);

执行默认操作
trigger() 方法触发事件后，会执行浏览器默认操作。
解决办法
triggerHandler() 方法，不执行浏览器默认操作。

4.1.8 其他用法

1. 绑定多个事件类型
2. 添加事件命名空间，便于管理。

$(function() {
    $("div").bind("click.com", function() {
        var text = $(".msg").html() + "<p>这是内部div</p>";
        $(".msg").html(text);
    });
    $("div").bind("mouseover.com", function() {
        var text = $(".msg").html() + "<p>这是外层div</p>";
        $(".msg").html(text);
    });
    $("div").bind("dbclick", function() {
        var text = $(".msg").html() + "<p>body被点击</p>";
        $(".msg").html(text);
    });
    $("p").bind("click", function(){
        $("div").unbind('.com');
    });

});

com 命名空间被删除，不在 “com” 的命名空间的 “dbclick” 事件依然有效。
3. 相同事件名称，不同命名空间执行方法
trigger("click!"): 感叹号为匹配所有不在命名空间的 click 事件。