[JQuery 学习笔记] 给元素绑定事件 event() 和 bind()

最新推荐文章于 2022-11-17 10:11:25 发布

原创

最新推荐文章于 2022-11-17 10:11:25 发布 · 781 阅读

收录于

这篇博客详细介绍了在JQuery中如何使用event()和bind()方法为页面元素添加事件处理。分别阐述了event()针对已存在元素的事件添加，以及bind()适用于脚本动态创建元素的事件绑定。通过实例解析，帮助读者深入理解这两种事件绑定的区别和应用场景。

1. event() ：向页面中已经存在的元素添加事件

2. bind() ：用脚本创建的元素添加事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5-1 给元素绑定事件 </title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $(function(){
            a = $('img').attr('alt');  //取出img的alt属性
            $('h3').text(a);  //将img的alt属性内容添加到h3的内容中

            // 1. 向页面中已经存在的元素添加事件： event()
            // 点击图片，将图片替换成另一张，并同时修改h3 中的内容
            $('img').click(function(event){
                $(this).attr({'src': 'image/a.jpg', 'alt':'小狗'});  //修改图片
                $('h3').text($('img').attr('alt'));  //修改h3中的内容
            });

            // 2. 用脚本创建的元素添加事件： bind()
            // 点击按钮， 出现图片，点击图片，创建h3，并将图片的alt内容拷贝给h3
            $(