Dom对象和jQuery

最新推荐文章于 2022-07-25 09:29:17 发布

还没头秃

最新推荐文章于 2022-07-25 09:29:17 发布

阅读量174

点赞数 1

分类专栏： js相关文章标签： jquery javascript dom

本文链接：https://blog.csdn.net/c2517945543/article/details/122364436

版权

js相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jquery地址

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

DOM 树, DOM 节点, DOM 对象是什么
利用 DOM 对象对 DOM 节点进行增删改查操作
事件绑定
事件常见类型
事件对象
事件冒泡和事件捕获

(一) Dom树相关知识

全称 Document Object Model, 中文名称文档对象模型, 主要用来操作页面上的元素, 对页面元素的内容, 属性和样式进行操作

DOM 树 (见图)
DOM 节点
DOM 对象
操作DOM的js库 jQuery.js, 使用jq可以让我们操作dom变得非常方便

(二) Dom节点操作

获取dom节点对象
获取和修改dom节点内容
获取和修改dom节点属性
获取和修改dom节点样式

1. 获取 DOM 节点对象

原生js指的是不使用任何框架或者js库, 只使用js原本提供的功能

使用原生js获取dom节点对象
使用jq获取dom节点对象
原生jsdom节点对象和jq对象互想转换
jquery对象的一些方法

01 获取节点

document.querySeletor(); // 略

document.querySeletorAll(); // 略

document.getElementById();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">appppppppppppp</div> 

    <script>
        var _app = document.getElementById('app');
        console.log('_app: ',_app);
    </script>
</body>
</html>

02 使用jq获取dom节点对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">appppppppppppp</div> 
    <div class="box">boxxxxxxxxx</div>

    <ul class="" id="list">
        <li class="item">1xxxx</li>
        <li class="item">2xxxx</li>
        <li class="item">3xxxx</li>
        <li class="item">4xxxx</li>
        <li class="item">5xxxx</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var $app = $('#app');
        console.log('$app',$app);
        var $box = $('.box');
        console.log('$box',$box);
        var $liList = $('#list>li');
        console.log('$liList',$liList);
    </script>
</body>
</html>

03 原生js dom节点对象和jquery节点对象互转

// 只有jquery对象才可以使用jquery提供的方法, 所以有些时候需要将原生js dom对象转成jquery dom对象

原生转jq: $(原生dom节点对象);
jq转原生 jq对象[0];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">appppppppppppp</div>  
    <div class="box">boxxxxxxxxxx</div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 原生js
        var _app = document.querySelector('#app');
        console.log('_app',_app);
        // 把_app转为jq节点对象
        var $app = $(_app);
        console.log('$app',$app); 

        console.log('------------------')

        // jq对象
        var $box = $('.box');
        console.log('$box',$box);
        // jq转原生
        var _box = $box[0];
        console.log('_box',_box); 
    </script>
</body>
</html>

04 jquery对象相关方法

获取元素的兄弟节点
获取元素的父节点
获取元素的在兄弟元素中的排列位置
查找元素的后代某个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
         var $first = $('ul>li:first-child');
         console.log('$first',$first);
         $first.text('我是第1个');

         // 第一个的兄弟节点们
         $first.siblings().text('我们是第一个li的兄弟们');
        // 获取父节点
        $first.parent().css('border','1px solid red');
        // 获取$first的下标
        var index = $first.index();
        $first.text('我是第1个li,我的下标是'+index); 

        // 获取第三个元素的下标
        var index2 = $('ul>li:nth-child(3)').index();
        console.log(index2); 
     </script>
</body>
</html>

通过find查找后代元素

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<body>
    <div class="box">
        <p>
            <span class="aa">aaa</span>
        </p>
        <div class="item">
            <i class="bb">bb</i>
        </div>
        <a href="#">百度</a>
    </div> 

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取jq对象
        var $box = $('.box');
        // 获取.aa元素
        var $aa = $box.find('.aa');
        console.log($aa);
        var $a = $box.find('a'); 
    </script>
</body> 
</html>

2. 获取和修改dom节点的内容

// 原生dom节点获取内容(略) // 修改内容(略)

// jQuery获取和修改内容

text()
html()
val()

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<body>
    <div class="box">
        <button>aaa</button>
    </div> 
    <input type="text" value="1380000000000">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取jq对象
        var $box = $('.box');
        // 获取文本
        var text = $box.text();
        console.log('text:',text);
        var html = $box.html();
        console.log('html:',html);
        var $input = $('input');
        var value = $input.val();
        console.log('value:',value);

        // 修改内容
        $box.find('button').text('ssssss');
        $box.html(`
        <li>111</li>
        <li>111</li>
        <li>111</li>
        `); 
        $input.val('我爱coding'); 
    </script>
</body> 
</html>

3. 获取和修改dom节点的属性

// 原生js获取和修改节点属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <a href="http://baidu.com">百度</a>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var _a = document.querySelector('a');
        // 获取属性方法1
        var href1 = _a.href;
        // 获取属性方法2
        var href2 = _a.getAttribute('href');
        console.log('href1', href1);
        console.log('href2', href2);

        // 修改
        _a.href = 'http://sina.com';
        _a.setAttribute('href','http://souhu.com')
    </script>
</body>

</html>

// jQuery获取和修改节点属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<body> 
    <a href="http://baidu.com">百度</a>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var  $a = $('a');
        // 获取属性
        var href = $a.attr('href');
        console.log('href',href);

        // 修改属性
        $a.attr('href','http://sina.com');
        $a.text('新浪');
    </script>
</body> 
</html>

4. 获取和修改dom节点样式

01 原生js获取节点样式(略)

// 注: 元素.style.样式名称操作行内样式,非行内样式需要使用window.getComputedStyle来操作 // 原生js修改节点样式(略)

02 jQuery获取和修改节点样式

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            color: red;
            font-size: 20px;
        }
    </style>
</head> 
<body>

    <div class="box">
        boxxxxxxxxxxxxxxxxxxx
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var $box = $('.box');
        // 获取样式
        var color = $box.css('color');
        var fontSize = $box.css('font-size');
        console.log('颜色:', color);
        console.log('字体:', fontSize);

        // 修改样式
        $box.css('background','rgba(0,0,0,.5)');
        // 链式调用
        $box.css('color','#fff').css('border','1px solid red');
    </script>
</body> 
</html>

03 jQuery操作样式的其它方法

show()和hide();
addClass();
removeClass();
toggleClass();

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {color: red;}
    </style>
</head>

<body>
    <div class="box">bbbbbbbbbb</div>

    <ul>
        <li>1.xx</li>
        <li>2.xx</li>
        <li>3.xx</li>
        <li>4.xx</li>
        <li>5.xx</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('.box').hide();
        $('.box').show();

        // $('ul>li:first-child').addClass('red');
        // $('ul>li:first-child').removeClass('red');
        //  $('ul>li:first-child').toggleClass('red');
        //  $('ul>li:first-child').toggleClass('red');
    </script>
</body> 
</html>

5. DOM节点增删

01 原生js添加和删除节点

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head> 
<body> 
     <ul>
         <li>1.xxx</li>
         <li>2.xxx</li>
         <li>3.xxx</li>
     </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 原生js添加节点
        // 1.创建节点
        var _li = document.createElement('li');
        // 2.给节点添加内容或样式
        _li.innerText = '4.xxxx';
        _li.style.color = 'red';
        // 3.插入到ul里
        var _ul = document.querySelector('ul')
        _ul.appendChild(_li);


        // 删除节点
        var _second = document.querySelector('ul>li:nth-child(2)');
        _second.remove();
    </script>
</body> 
</html>

给没有jQuery的网站添加jQuery.js

var el = document.createElement('script'); 
el.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js';
'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
document.body.appendChild(el);

02. jq添加,删除,移动,克隆节点

添加节点
1. append,prepend: 添加到子元素
2. before，after：作为兄弟元素添加
删除节点

$(选择器).remove();
移动节点
克隆节点

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head> 
<body> 
     <ul>
         <li>1.xxx</li>
         <li>2.xxx</li>
         <li>3.xxx</li>
     </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 添加子节点,append添加到父元素的底部
        $('ul').append('<li>4.插入到底部</li>');
        // 添加子节点,append添加到父元素的顶部
        $('ul').prepend('<li>0.插入到顶部</li>');

        // 添加兄弟节点
        $('ul').after('<div class="box">在后面添加兄弟节点</div>');
        $('ul').before('<div class="box">在前面添加兄弟节点</div>'); 


        // 删除元素
        $('ul>li:nth-child(2)').remove();
    </script>
</body> 
</html>

<!-- 移动和克隆节点 -->
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head> 
<body> 
     <ul>
         <li>1.xxx</li>
         <li>2.xxx</li>
         <li>3.xxx</li>
         <li>4.xxx</li>
     </ul>

     <div class="box">

     </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var $first = $('ul>li:first-child');
        // 移动节点
        $('.box').append($first);

        // 克隆
        var $last = $('ul>li:last-child').clone();
        $('.box').append($last);
    </script>
</body> 
</html>

(三)事件绑定

Dom事件分类

DOM0级事件
DOM1级问题 DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。
DOM2级事件
DOM3级事件

1. Dom0级事件及绑定

DOM0级事件绑定分为两种

行内事件:在标签中写事件
元素.on事件名=函数

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {color: red;}
    </style>
</head>

<body>
     <button onclick="alert(222)">btn1</button>
     <button>btn2</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var _button = document.querySelector('button:last-child');
        _button.onclick = function() {
            alert(333);
        }
    </script>
</body> 
</html>

jquery事件绑定(属于二级事件)

注: jquery事件提供了this, 它指向了绑定的元素(原生的dom节点对象)

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>

<body>
     <button id="btn1">btn1</button>
     <button id="btn2">btn2</button>

    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
         $('#btn1').on('click',function() {
             alert(111111);
         });

         $('#btn2').on('click',function() {
            console.log(this); 
         });

         $('ul>li').on('click',function() {
             console.log(this);
             var index = $(this).index();
             alert(index);
         })
    </script>
</body> 
</html>

2. Dom2级事件及绑定

监听方法，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。它们都有三个参数：
- 第一个参数是事件名（如click）；
- 第二个参数是事件处理程序函数；
- 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。
addEventListener() 添加事件

可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

注: 0级事件只能只能添加1个事件处理程序
removeEventListener() 移除事件

不能移除匿名添加的函数。

// Dom2级事件绑定
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>btn</button>

  <script>
    var _button = document.querySelector('button');
    _button.addEventListener('click',function() {
      console.log(11111);
    },false);

    _button.addEventListener('click',function() {
      console.log(222222);
    },false);
  </script>
</body>
</html>

3. Dom3级事件及绑定

html5新事件api, 拖拽，视频播放等
触摸事件 touchstart、touchmove和touchend
自定义事件

拖拽例子

对需要拖拽的元素添加属性 draggable="true"
对目标容器添加dragover事件, 目的是阻止默认事件
对目标容器添加drop事件, 执行元素的移动操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text {
      width: 200px;
      height: 50px;
      background-color: #f4f4f4;
      line-height: 50px;
      text-align: center;
    }
    .box {
      border: 1px solid;
      width: 300px;
      height: 200px;
      margin-top: 50px;
    }
  </style>
</head>
<body>
    <div class="text" draggable="true">
      我爱coding
    </div>

    <div class="box"> </div> 
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      // $('.text').on('dragstart',function() {
      //   console.log('开始拖动');
      // });

      $('.box').on('dragover',function(event) {
        // 阻止默认事件
        event.preventDefault()
      })
      $('.box').on('drop',function() { 
        var $text = $('.text');
        // 把$text放入.box内
        $(this).append($text); 
      })

    </script>
</body>
</html>

(四) 事件常见类型

事件名称	事件描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个 HTML 元素上移动鼠标
onmouseout	用户从一个 HTML 元素上移开鼠标
onkeydown	用户按下键盘按键
onkeyup	用户松开键盘按键
onkeypress	用户按下按键
onload	浏览器已完成页面的加载
oninput	键盘输入事件
touchStart	触摸开始
touchMove	滑动
touchEnd	触摸结束

更多事件类型

https://www.runoob.com/jsref/dom-obj-event.html

onkeypress事件

event.key可以获取按键的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head> 
<body>
    <input type="text">

    <script>
        $('input').on('keypress',function() {
            var value = $(this).val();
            console.log(event.key);
            if(event.key === 'Enter') {
                alert('你按下了回车键');
            } 
        })
    </script>
</body> 
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head> 
<body>
    <input type="checkbox"><span>未选择</span>

    <script>
        $('input').on('change',function() {
            // prop也是用来获取属性,attr获取不到属性时使用prop来获取
            // next()是用来获取元素的下一个兄弟元素
            var flag = $(this).prop('checked');
            if(flag) {
                console.log('已选择');
                $(this).next().text('已选择');
            } else {
                console.log('未选择');
                $(this).next().text('未选择');
            }  
        })
    </script>
</body> 
</html>

onload事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
    </style>

    <script>
        // 页面加载完成就会自动触发onload事件, 执行onload所绑定的函数
        window.onload = function () {
            console.log(document.querySelector('#box'));
            document.querySelector('#box').onclick = function () {
                alert(222);
            }
        }
    </script>
</head>

<body>
    <div id="box">
        阿斯顿发送到发送到发
    </div> 
</body> 
</html>


<!-- jQuery也有对应的方法 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#box').on('click',function() {
                alert('页面加载完成')
            })
        })
    </script>
</head>

<body>
    <div id="box">
        阿斯顿发送到发送到发
    </div> 
</body> 
</html>

(五) 事件对象

每个事件, js系统都会提供事件对象, 对象包含了很多内容

event.type 事件类型
event.key 触发事件的按键(针对input,keypress等键盘事件)
event.target 事件触发的目标元素
currentTarget 事件绑定的元素

1. event对象(事件对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">btn</button>
    <button id="btn2">btn2</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('#btn1').on('dblclick', function() {
            console.log(event);
        })
        $('#btn2').on('dblclick', function(ev) {
            console.log(ev);
        }) 
    </script>
</body>
</html>

2.target和currentTarget

event.target // 你点中的元素
event.currentTarget // 事件绑定的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
    </style>
</head> 
<body> 
    <div id="box">
        <button>btn</button>
        <span>span</span>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('#box').on('click', function(ev) {
            console.log('点击的元素: ',ev.target);
            console.log('事件绑定的元素: ',ev.currentTarget);
        })
    </script>
</body> 
</html>

(六) 事件冒泡和事件捕获

1. 事件流(事件传播方式)

事件捕获阶段
目标阶段
事件冒泡阶段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 200px;
            border: 1px solid;
            padding: 50px;
        }
        button {
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>

</head>

<body>
    <div id="box">
        <button>点我</button>
    </div> 
     
    <script>
        var box = document.querySelector('#box');
        box.addEventListener('click',function() {
            alert('box被点击了');
        },false);


         var button = document.querySelector('button');   
         button.addEventListener('click',function() {
            alert('button被点击了')
         },false)

    </script>
</body>

</html>

2. 事件冒泡应用: 事件委托

// 原生js事件托管

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {cursor: pointer;}
        ul {
            border: 1px solid;
        }
    </style>

</head>

<body>
    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>

    <script>
         var ul = document.querySelector('ul');
         ul.onclick = function() {
             console.log(event.target);
         }
    </script>
</body> 
</html>

// jquery事件托管

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {cursor: pointer;}
        ul {
            border: 1px solid;
        }
    </style>

</head>

<body>
    <ul>
        <li>1.xxx</li>
        <li>2.xxx</li>
        <li>3.xxx</li>
        <li>4.xxx</li>
        <li>5.xxx</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // jq事件委托写法
        $('ul').on('click','li', function() {
              console.log(this);  
        }) 
    </script>
</body> 
</html>

注: 元素js和jquery使用事件委托绑定事件的区别

原生js事件只要点击ul范围内的任意元素, 都会触发事件, 而jquery事件则只有点击li才触发事件, 会更方便

3. 阻止默认事件和阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head> 
  <title>Document</title>
</head>
<body>
  <div class="box">
    <a href="http://www.baidu.com">百度</a>
  </div>

  <script>
    document.querySelector('a').onclick = function() {
      // 阻止默认事件
      event.preventDefault();
      // 阻止事件冒泡
      event.stopPropagation();
      console.log(2222);
    } 

    document.querySelector('.box').onclick = function() {
      alert('我是父元素');
    }
  </script>
</body>
</html>