jQuery事件绑定

1. 两种方式

在 jQuery 中，事件绑定通过两种方式：

jQuery对象.事件名(参数)

jQuery对象.on(事件名，其它参数)

在 jQuery 1.7 之后，统一使用 on 方法提供绑定事件处理程序所需的所有功能。旧的 jQuery 事件绑定方法如 .bind(), .delegate(), 和 .live() 等不再推荐使用。

常见的事件如：click、dblclick、keydown、mouseover、change等都可以使用第一种方式绑定事件，但也有特殊的如输入框的 input 事件等不支持第一种方式。具体的支持事件列表请参见 jQuery 官方文档。

1.1 事件对象

jQuery 事件中的事件对象通过事件处理函数的形参获取，事件中的 event 是 window 上的属性，与原生事件中的事件对象一致。

jQuery 事件对象常用属性也与之前学过的 DOM 事件对象几乎一致，多了一个 data 属性用于获取事件绑定时传入的参数。

1.2 事件中的 this

jQuery 事件中的 this 指向绑定事件的 jQuery 对象代表的 DOM 对象，如果使用 on 方式添加的事件委托，委托事件处理函数中的 this 指向委托元素的 DOM 对象。

1.3 事件特点

jQuery 允许给同一个 jQ 对象的同一个事件绑定多个不同的事件处理函数

2. 方式一: 直接绑定事件

2.1 语法

$ele.事件名([data], fn)

2.2 参数

data：供函数使用的参数对象, 可选
fn：事件处理函数

2.3 示例

<button>点我文字颜色变蓝</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var $btn = $("button");

    $btn.click(function(){
        $btn.css("color", "#00f");
    })

    // 绑定第二个相同事件
    $btn.click({ data: "这是传入的参数" }, function(e){
        console.log(e.data); // { data: "这是传入的参数" }
        console.log(e); // 这是 jQ 的事件对象
        console.log(event); // 这是 window 的事件对象，即我们之前讲过的
    })
</script>

方式二: on 方式绑定事件

2.1 语法

$ele.on(type, [selector], [data], fn)

2.2 参数

type：事件名，可以是一个或者多个。
selector：一个选择器字符串，委托事件的元素选择器，可选。
data：事件参数，可选。
fn：该事件被触发时执行的函数。

2.3 示例

<style>
    button.act {
        padding: 10px 20px;
    }
</style>

<body>
    <ul>
        <li><p>li_1</p></li>
        <li><p>li_2</p></li>
        <li><p>li_3</p></li>
        <li><p>li_4</p></li>
        <li><p>li_5</p></li>
        <li><p>li_6</p></li>
    </ul>

    <button>添加li</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var $ul = $("ul");
        var $btn = $("button");

        // 点击按钮添加li
        $btn.on("click", function (){
            $ul.append(`<li>li_${ $ul.children().length + 1 }</li>`);
        }); 

        // 绑定具名函数
        $btn.on("click", clickHandle);
        function clickHandle(){
            console.log("声明函数作为点击事件处理函数");
        }

        // on方式允许同时绑定多个不同类型的事件
        $btn.on("mouseenter mouseleave", function (){
            $(this).toggleClass("act");
        })

        // 使用事件委托，点击li让颜色变红
        $ul.on("click", "li", function (){
            this.style.color = "#f00";
        })
    </script>
</body>

off 解绑事件

jQ 使用 $ele.off() 方法移除给当前对象绑定的事件处理函数

示例：

// 在上例的JS中添加内容

// 取消 button 上绑定的所有事件
$btn.off();

// 取消一类特定的事件
$btn.off("click");

// 取消特定事件的具名处理函数
$btn.off("click", clickHandle);

// 取消事件委托
$ul.off("click", "li");

标签