正心全栈编程-文档站

Appearance

jQuery 事件注册 ​

mdn 界面上的事件：https://www.w3.org/TR/DOM-Level-3-Events

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

  • 优点: 操作简单，且不用担心事件覆盖等问题。
  • 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法

JavaScript
element.事件(function () {
})

$("div").click(function () {
    // 事件处理程序
})

其他事件和原生基本一致

比如 mouseover、mouseout、 blur、 focus、change、 keydown、 keyup、resize、scroll 等

演示代码

html

<div style="width: 200px;height: 200px;background-color: cyan;"></div>
javascript
$(function () {
    // 1. 单个事件注册
    $("div").click(function () {
        $(this).css("background", "purple");
    });
    $("div").mouseenter(function () {
        $(this).css("background", "skyblue");
    });
})

jQuery 事件处理

因为普通注册事件方法的不足，jQuery 又开发了多个处理方法，重点讲解如下：

  • on(): 用于事件绑定，目前最好用的事件绑定方法
  • off(): 事件解绑
  • trigger() / triggerHandler(): 事件触发

on() 绑定事件 ​

因为普通注册事件方法的不足，jQuery 又创建了多个新的事件绑定方法 bind() / live() / delegate() / on() 等，其中最好用的是: on()

绑定多个事件 ​

可以绑定多个事件，多个处理事件处理

javascript
$("div").on({
    mouseover: function () {
    },
    mouseout: function () {
    },
    click: function () {
    }
})
;

如果事件处理程序相同

javascript
  $("div").on("mouseover mouseout", function () {
    $(this).toggleClass("current");
});

事件委派 ​

可以事件委派操作。事件委派定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

javascript
$('ul').on("click", "li", function () {
    console.log('hello world!');
});

在此之前有 bind(), live(), delegate() 等方法来处理事件绑定或者事件委派，最新版本的请用 on 替代他们。

动态绑定事件

动态创建的元素，click() 没有办法绑定事件。on() 可以给动态生成的元素绑定事件

javascript
$("div").on("click", "p", function () {
    console.log("俺可以给动态生成的元素绑定事件")
});
javascript
$("div").append($("<p>我是动态创建的p</p>"));

演示代码

html

<ul>
    <li>橘子</li>
    <li>西瓜</li>
    <li>哈密瓜</li>
</ul>
javascript
$(function () {
    // (1) on可以绑定1个或者多个事件处理程序
    // $("div").on({
    //     mouseenter: function() {
    //         $(this).css("background", "skyblue");
    //     },
    //     click: function() {
    //         $(this).css("background", "purple");
    //     }
    // });
    $("div").on("mouseenter mouseleave", function () {
        $(this).toggleClass("current");
    });

    // (2) on 可以实现事件委托（委派）
    // click 是绑定在 ul 身上的，但是 触发的对象是 ul 里面的小 li
    // $("ul li").click();
    $("ul").on("click", "li", function () {
        console.log($(this).text(), '被点击了')
    });

    // (3) on 可以给未来动态创建的元素绑定事件
    $("ol").on("click", "li", function () {
        console.log($(this).text(), '被点击了')
    })
    var li = $("<li>我是后来创建的</li>");
    $("ol").append(li);
})

案例2：事件委派

html

<ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
</ul>
javascript

$(function () {
    /*****************事件委派*************************/
    $('ul li').click(function () {
        console.log('普通绑定:\t', $(this).text())
    })

    // (2) on可以实现事件委托（委派）
    $('ul').on('click', 'li', function () {
        console.log('事件委托:\t', $(this).text())
    })

    // 直接添加的元素，没有事件
    var li = $('<li>我是后来创建的</li>')
    $('ul').append(li)

    /********ol*********/
    // click 是绑定在 ul 身上的，但是 触发的对象是 ul 里面的小li
    // (3) on可以给未来动态创建的元素绑定事件
    $('ol li').click(function () {
        console.log('ol 普通绑定：\t', $(this).text())
    })

    var li = $('<li>我是后来创建的</li>')
    $('ol').append(li)

    // 事件委托之后才会打印
    $('ol').on('click', 'li', function () {
        console.log('ol 事件委托：\t', $(this).text())
    })
})

off() 解绑事件 ​

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;

语法

off() 方法可以移除通过 on() 方法添加的事件处理程序。

javascript
$("p").off() // 解绑 p 元素所有事件处理程序
$("p").off("click") // 解绑 p 元素上面的点击事件后面的 foo 是监听函数名
$("ul").off("click", "li"); // 解绑事件委托

如果有的事件只想触发一次，可以使用 one() 来绑定事件。

演示代码

html
<ul>
    <li>橘子</li>
    <li>西瓜</li>
    <li>哈密瓜</li>
</ul>
javascript
$(function () {
    // 事件绑定
    $("div").on({
        click: function () {
            console.log("我点击了");
        },
        mouseover: function () {
            console.log('我鼠标经过了');
        }
    });
    
    $("ul").on("click", "li", function () {
        alert(11);
    });

    // 1. 事件解绑 off 
    // $("div").off();  // 这个是解除了 div 身上的所有事件
    $("div").off("click"); // 这个是解除了 div 身上的点击事件
    $("ul").off("click", "li");

    // 2. one() 但是它只能触发事件一次
    $("p").one("click", function () {
        alert(11);
    })
})

jQuery 事件对象 ​

jQuery 对 DOM 中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法

javascript
element.on(events, [selector], function (event) {
})

阻止默认行为: event.preventDefault() 或者 return false

阻止冒泡: event.stopPropagation()

演示代码

html

<body>
<div style="width: 200px;height: 200px;background-color: cyan;"></div>
</body>
javascript
    $(function () {
        $(document).on("click", function () {
            console.log("点击了document");
        })
        $("div").on("click", function (event) {
            // console.log(event);
            console.log("点击了div");
            event.stopPropagation();
        })
    })

注意：jQuery 中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。