jQuery——事件操作

事件绑定

1、简单事件绑定

$("button").click(function () {})//可重复绑定，不会被层叠

2、bind()：不推荐使用

$("button").bind("click mouseenter",function () {})//可通过绑定多个事件，但是事件源必须存在文档中

3、delegate()

$(".parentBox").delegate("p", "click", function(){}) //父元素下绑定子元素事件
$("button").delegate("click",function () {})//支持动态创建元素

4、on()

$(.parentBox).on( "click",“span”, function() {}) //父元素下绑定子元素事件
$(selector).on(events，[selector]，[data],handler) //data是传递给函数的数据，event.data可调用
$("button").on("click",function () {})//支持动态创建元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("div").on("click", "button:eq(0)", function () {
                alert("11");
            });
            $("button:eq(1)").on("click", function () {
                alert(22);
            });
        });
    </script>
</head>
<body>
<div>
    <button>点击1</button>
    <button>点击2</button>
</div>
</body>
</html>

事件解绑

1、unbind()

$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件

2、undelegate()

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

3、off()

$(selector).off();// 解绑匹配元素的所有事件
$(selector).off(“click”);// 解绑匹配元素的所有click事件
$(selector).off( “click”, “**” ); // 解绑所有代理的click事件，元素本身的事件不会被解绑

事件触发

1、简单事件触发

$(selector).click(); //触发 click事件

2、trigger()：触发浏览器行为

$(selector).trigger(“click”);

3、triggerHandler()：不触发浏览器行为

$(selector).triggerHandler(“focus”);//不会触发默认行为，只会执行函数体的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //input注册的focus事件虽然被处罚，但是光标并没有进入标签内
        $(function () {
            $("input").focus(function () {
                alert("input注册的focus被触发")
            });
            $("button").click(function () {
                $("input").triggerHandler("focus");
            });
        });
    </script>
</head>
<body>
<button>手动触发事件</button>
<input type="text">
</body>
</html>

事件对象

event.data                    //传递给事件处理程序的额外数据
event.currentTarget           //等同于this，当前DOM对象
event.pageX                   //鼠标相对于文档左部边缘的位置
event.target                  //触发事件源，不一定===this
event.stopPropagation()；      //阻止事件冒泡
event.preventDefault();       //阻止默认行为
event.type                    //事件类型：click，dbclick…
event.which                   //鼠标的按键类型：左1 中2 右3
event.keyCode                 //键盘按键代码