Web前端基础（17）jQuery中的事件

发表于 | 更新于 | 分类于 ，

事件绑定

1
bind(type[, data], fn);

第一个参数是绑定的事件类型，第二个参数可选是额外数据对象，第三个参数是处理函数。

在文档装载完成后，可以使用bind()方法来对元素绑定特定的事件，可以绑定的事件有：

事件 说明
blur 元素失去焦点
focus 元素获得焦点
load 一张页面或一幅图像完成加载。
resize 重置按钮被点击
scroll 滚动事件
unload 用户退出页面
click 点击事件
dblclick 双击事件
mousedown 鼠标按键按下
mouseup 鼠标按键抬起
mousemove 鼠标被移动
mouseover 鼠标移到某个元素上
mouseout 鼠标从某个元素上移开
mouseenter 鼠标进入某个元素
mouseleave 鼠标离开某个元素
change 域的内容被改变
select 文本被选中
submit 确认按钮被点击
keydown 键盘按下
keypress 某个键盘按键被按下并松开。
keyup 某个键盘按键被松开
error 在加载文档或图像时发生错误。

合成事件

jQuery有两个合成事件hover()和toggle(), hover()方法用于模拟鼠标悬停事件，toggle()方法用于模拟连续点击事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
    $("#pannel").hover(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();
    });
});

$(function(){
    $("pannel").toggle(function(){
        $(this).next().show();
    }, function(){
        $(this).next().hide();
    })
})

事件冒泡

假如在body中有个div在这个div中有个input,而且body,div,input都绑定了click事件。

当我们点击input时，三个click事件会依次向上响应，就像水泡一样。

有时候我们只需要这个input响应这个点击事件，所以就需要限制点击事件的范围。在jQuery中针对不同浏览器对象兼容问题进行了扩展和封装，使用事件对象也非常简单，最需要添加一个event参数。

1
2
3
4
5
$("element").bind("click", function(event){
    //TODO some thing...
    
    event.stopPropagation();
})

在jQuery中只需要调用stopPropagation()方法就可以停止事件冒泡。

阻止默认行为

网页中的元素有自己的默认行为，例如单击超链接会跳转，单击“提交”按钮后会提交，有的时候我们需要阻止这些默认行为。在jQuery中使用preventDefault()方法来阻止。

1
2
3
4
5
6
7
<body>
    <form action="test.html">
        用户名：<input type="text" id="username">
        <input type="submit" id="sub" value="提交">
    </form>
    <div id="msg"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
<script>
    $(function{
        $("#sub").bind("click", function(event){
            var username = $("#username").val();
            if(username===""){
                $("#msg").html("<p>文本框的值不能为空</p>");
                event.preventDefault();
            }
        });
    })
</script>

有一种简写方式就是事件函数return false, return false就相当于调用了event.stopPropagation();和event.preventDefault();

事件捕获

如上图所示事件捕获和事件冒泡刚好是相反的过程，遗憾的是，并非所有主流浏览器都支持事件捕获，这个缺陷无法通过JavaScript修复，所以jQuery不支持事件捕获。

事件对象的属性

event.type

该方法是获取事件的类型

1
2
3
4
$("a").click(function(event){
    alert(event.type); //获取事件类型
    return false;  //阻止事件冒泡和默认事件
})

event.target

获取触发事件的元素

1
2
3
4
5
$("a[href='http://dp2px.com']").click(fuction(event){
    var tag = event.target;
    alert(tag.href);
    return false;	
});

event.pageX和event.pageY

该方法是获取光标相对于页面的x坐标和y坐标。

1
2
3
4
$("a").click(function(event){
    alert("current mouse position : " + event.pageX + ", " + event.pageY);
    return false;
})

event.which

在鼠标点击事件中获取鼠标的左、中、右键事件，在键盘事件中获取键盘按键。

1
2
3
$("a").mousedown(function(e){
    alert(e.which);  //1 鼠标左键  2 鼠标中键  3 鼠标右键
})

event.metaKey

监听键盘的ctrl键

移除事件

1
2
3
4
$("#delall").click(function(){
    $("#btn").unbind("click");
});
//unbind()可以不传事件类型，这样就是移除所有事件

如果想移除某一个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
    $("#btn").bind("click", myFun1 = function(){
        $("#test").append("<p>我的绑定函数1</p>")
    }).bind("click", myFun2 = function(){
        $("#test").append("<p>我的绑定函数2</p>")
    }).bind("click", myFun3 = function(){
        $("#test").append("<p>我的绑定函数3</p>")
    })
    
    $("#deltwo").click(function(){
        $("#btn").unbind("click", myFun2);
    })
})

另外对于只需要触发一次，随后就解绑的情况jQuery提供了一种简单写法one()方法

1
2
3
4
5
$(function(){
    $("#btn").one("click", function(){
        
    })
})

模拟操作

有的时候我们需要模拟用户的主动操作，比如模拟点击事件。在jQuery中可以使用trigger()方法来实现。

1
2
3
$("#btn").trigger("click");
//也可以简写为
$("#btn").click();

除了上面的事件外，我们可以自定义事件，来通过trigger()触发我们的自定义事件。

1
2
3
4
$("#btn").bind("myClick", function(){
    
})
$("#btn").trigger("myClick");

trigger()方法第一个参数是事件类型，第二个参数是一个数组用于传递参数。

1
2
3
$("#btn").bind("myClick", function(event, msg1, msg2){
    
})