// 警告框
alert("這是一個(gè)警告消息");

// 確認(rèn)框
const isConfirmed = confirm("確定要?jiǎng)h除嗎？");
if (isConfirmed) {
  console.log("用戶確認(rèn)刪除");
} else {
  console.log("用戶取消操作");
}

// 輸入框
const userName = prompt("請(qǐng)輸入您的姓名：", "默認(rèn)值");
console.log(`用戶輸入：${userName}`);

<div id="customModal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <h2>自定義彈出框</h2>
    <p>這是彈出框的內(nèi)容...</p>
    <button id="modalBtn">確認(rèn)</button>
  </div>
</div>

<button id="openModal">打開(kāi)彈出框</button>

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

// 獲取DOM元素
const modal = document.getElementById('customModal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.querySelector('.close');
const confirmBtn = document.getElementById('modalBtn');

// 打開(kāi)彈出框
openBtn.addEventListener('click', () => {
  modal.style.display = 'block';
});

// 關(guān)閉彈出框
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// 點(diǎn)擊確認(rèn)按鈕
confirmBtn.addEventListener('click', () => {
  console.log('用戶點(diǎn)擊了確認(rèn)按鈕');
  modal.style.display = 'none';
});

// 點(diǎn)擊模態(tài)框外部關(guān)閉
window.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

<button οnclick="handleClick()">點(diǎn)擊我</button>
<script>
  function handleClick() {
    console.log('按鈕被點(diǎn)擊了');
  }
</script>

<button id="btn">點(diǎn)擊我</button>
<script>
  const btn = document.getElementById('btn');
  btn.onclick = function() {
    console.log('按鈕被點(diǎn)擊了');
  };
</script>

<button id="btn">點(diǎn)擊我</button>
<script>
  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    console.log('按鈕被點(diǎn)擊了');
  });
</script>

document.getElementById('myDiv').addEventListener('click', (e) => {
  // 事件對(duì)象屬性
  console.log(e.target);      // 觸發(fā)事件的元素
  console.log(e.currentTarget); // 當(dāng)前綁定事件的元素
  console.log(e.type);        // 事件類型
  console.log(e.clientX, e.clientY); // 鼠標(biāo)坐標(biāo)
  e.preventDefault();         // 阻止默認(rèn)行為
  e.stopPropagation();        // 阻止事件冒泡
});

<ul id="list">
  <li>項(xiàng)目1</li>
  <li>項(xiàng)目2</li>
  <li>項(xiàng)目3</li>
</ul>

<script>
  const list = document.getElementById('list');
  
  list.addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
      console.log(`點(diǎn)擊了項(xiàng)目: ${e.target.textContent}`);
    }
  });
</script>

document.getElementById('submitForm').addEventListener('click', (e) => {
  e.preventDefault();
  
  if (confirm('確定要提交表單嗎？')) {
    document.getElementById('myForm').submit();
  }
});

function createButton() {
  const btn = document.createElement('button');
  btn.textContent = '動(dòng)態(tài)按鈕';
  
  // 使用事件委托綁定事件
  document.body.appendChild(btn);
}

// 使用事件委托處理動(dòng)態(tài)元素
document.body.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    console.log('動(dòng)態(tài)按鈕被點(diǎn)擊了');
  }
});

function showConfirmModal(message, callback) {
  const modal = document.getElementById('confirmModal');
  document.getElementById('modalMessage').textContent = message;
  
  modal.style.display = 'block';
  
  // 確認(rèn)按鈕事件
  document.getElementById('confirmYes').onclick = () => {
    callback(true);
    modal.style.display = 'none';
  };
  
  // 取消按鈕事件
  document.getElementById('confirmNo').onclick = () => {
    callback(false);
    modal.style.display = 'none';
  };
}

// 使用示例
showConfirmModal('確定要?jiǎng)h除此項(xiàng)目嗎？', (isConfirmed) => {
  if (isConfirmed) {
    deleteItem();
  }
});