文档数据模型2 父子关系事件点击弹出框

最新推荐文章于 2024-11-16 14:11:26 发布

长沙xtt

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量148

点赞数

分类专栏： JS 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_40746230/article/details/124957533

版权

JS 专栏收录该内容

14 篇文章 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>08-父子兄弟</title>
  </head>
  <body>
    <h1>DOM</h1>
    <article>
      <div>前面兄弟</div>
      <h2>Javascript</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit,
        repudiandae!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit,
        repudiandae!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit,
        repudiandae!
      </p>
      <div>zt</div>
    </article>
    <script src="sandbox.js"></script>
  </body>
</html>

const artice=document.querySelector('article');
console.log(artice.children); //sandbox.js:2 HTMLCollection(6) [div, h2, p, p, p, div]
console.log(Array.from(artice.children)); //[div, h2, p, p, p, div]
//Array.from //得到一个新数组 不更改原始信息
Array.from(artice.children).forEach(
  child=>{
    child.classList.add('article-element');
  }
);

const title=document.querySelector('h2');
//查找父级  title.parentElement   //查找兄弟下一个元素 title.nextElementSibling
console.log(title.parentElement);
console.log(title.nextElementSibling)
console.log(title.previousElementSibling) //查找上一个兄弟元素


console.log(title.nextElementSibling.parentElement.children)

事件

document.addEventListener() 方法用于向文档添加事件句柄

// //给元素添加事件
// const button =document.querySelector('button');
// //document.addEventListener() 方法用于向文档添加事件句柄
// button.addEventListener('click',()=>{
//   console.log('已经点击')
// })
const items=document.querySelectorAll('li');

//在触发的事件的函数里面我们会接收到一个event对象 
//就可以通过event的属性target来获取到

items.forEach(
  item=>{
    item.addEventListener('click',(e)=>{
      console.log(e.target);
      e.target.style.textDecoration='line-through';
    })
  }
)

添加移除元素


const items=document.querySelectorAll('li');
const button= document.querySelector('button');
const  ul= document.querySelector('ul');
button.addEventListener('click',()=>{
  //  ul.innerHTML+='<li>新任务</li>';  //后面追加元素
   const li=document.createElement('li');
   li.textContent='新任务';
   ul.append(li); //尾部追加
   ul.prepend(li);//头部追加

});



items.forEach(
  item=>{
    item.addEventListener('click',(e)=>{
      console.log(e.target);
      // e.target.remove(); //删除元素
      e.target.style.textDecoration='line-through';
    })
  }
)

事件代理事件冒泡


const items=document.querySelectorAll('li');
const button= document.querySelector('button');
const  ul= document.querySelector('ul');
button.addEventListener('click',()=>{
  //  ul.innerHTML+='<li>新任务</li>';  //后面追加元素
   const li=document.createElement('li');
   li.textContent='新任务';
  // ul.append(li); //尾部追加
   ul.prepend(li);//头部追加

});

const items=document.querySelectorAll('li');
const button= document.querySelector('button');
const  ul= document.querySelector('ul');
button.addEventListener('click',()=>{
  //  ul.innerHTML+='<li>新任务</li>';  //后面追加元素
   const li=document.createElement('li');
   li.textContent='新任务';
   ul.append(li); //尾部追加
   ul.prepend(li);//头部追加

});

// e.stopPropagation(); //阻止事件冒泡 父元素添加事件 阻止父元素的执行
//e.target.remove()
items.forEach(
  item=>{
    item.addEventListener('click',(e)=>{
      // console.log(e.target);

    //  e.stopPropagation(); 
      // e.target.style.textDecoration='line-through';        
          // e.target.remove(); 
    })
  }
)


//点击li父级 事件也被触发 事件冒泡 父级不绑定事件 也依然存在
事件代理 ：为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上。
//这种简单而优雅的事件注册方式是基于事件传播过程中，逐层冒泡总能被祖先节点捕获


ul.addEventListener('click',(e)=>{
   console.log(e.target); //点击每个子集会得到每个 子集元素
   console.log(e.target.tagName);//LI  
   if(e.target.tagName === 'LI'){
    e.target.remove(); 
   }
})


// e.stopPropagation(); //阻止事件冒泡
//e.target.remove()
items.forEach(
  item=>{
    item.addEventListener('click',(e)=>{
      // console.log(e.target);

    //  e.stopPropagation(); 
      // e.target.style.textDecoration='line-through';        
          // e.target.remove(); 
    })
  }
)


//点击li父级 事件也被触发 事件冒泡 父级不绑定事件 也依然存在
事件代理 ：为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上。
//这种简单而优雅的事件注册方式是基于事件传播过程中，逐层冒泡总能被祖先节点捕获


ul.addEventListener('click',(e)=>{
   console.log(e.target); //点击每个子集会得到每个 子集元素
   console.log(e.target.tagName);//LI  
   if(e.target.tagName === 'LI'){
    e.target.remove(); 
   }
})

常见事件 mousemove copy wheel

const copy=document.querySelector('.copy');

copy.addEventListener('copy',()=>{
   console.log('您正在执行复制的操作!')
});


const box =document.querySelector('.box');

box.addEventListener('mousemove',(e)=>{
  //常用的offsetX offsetY 当前光标距离你容器的位置
//  console.log(e.offsetX,e.offsetY);
box.textContent=`x坐标-${e.offsetX} y坐标-${e.offsetY}`;
});

document.addEventListener('wheel',(e)=>{
   console.log(e.pageX,e.pageY); //鼠标指针针对于文档的一个位置

})

弹出框

<!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" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>弹窗</title>
  </head>
  <body>
    <button>点击</button>

    <div class="popup-wrapper">
      <div class="popup">
        <div class="popup-close">x</div>
        <div class="popup-content">
          <h2>Hello world</h2>
          <p>Lorem ipsum dolor sit amet.</p>
          <a href="#">查看详情</a>
        </div>
      </div>
    </div>
    <script src="sandbox.js"></script>
  </body>
</html>

CSS

button {
    display: block;
    margin: 20px auto;
    background-color: red;
    color: white;
    border: 0;
    padding: 6px 10px;
  }
  
  .popup-wrapper {
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  
  .popup {
    text-align: center;
    width: 100%;
    max-width: 300px;
    margin: 10% auto;
    padding: 20px;
    background-color: white;
    position: relative;
  }
  
  .popup a {
    background-color: red;
    color: white;
    text-decoration: none;
    padding: 6px 10px;
  }
  
  .popup-close {
    position: absolute;
    top: 5px;
    right: 8px;
    cursor: pointer;
  }

//弹出框
const button=document.querySelector('button');
const popup=document.querySelector('.popup-wrapper');
const popupClose=document.querySelector('.popup-close');

button.addEventListener('click',()=>{
  popup.style.display='block';
});

popupClose.addEventListener('click',()=>{
  popup.style.display='none';
});

popup.addEventListener('click',()=>{
  popup.style.display='none';
});