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){
    
})