收藏
PHPz批改状态：合格
老师批语：
<button onclick="setBg(this)">按钮2</button><script>function setBg(ele){document.body.style.backgroundColor='wheat';ele.style.backgroundColor="yellow";ele.textContent="保存成功";}</script>
event.type
event.currentTarget
event.target
event.stopPropagation();
event.preventDefault();
//案例function show(){console.log(1);}btn2.addEventListener("click",show,false);
先添加一个事件let i = 0;btn3.addEventListener("click",()=>{console.log(i);i += 1;},false);const myclick = new Event('click');//派发是事件(调用一次btn3的myclick)btn3.dispatchEvent(myclick);
//案例<button data-index="1" data-work-unit="php" onclick="getIndex(this)">btn1</button>function getIndex(btn){//获取自定义属性值console.log(btn.dataset.index);console.log(btn.dataset.workUnit);}
//案例const items = document.querySelectorAll("ul > li");for(let i = 0;i<items.length;i++){items[i].style.color = "red";}
<form id="login" ><input type="text" name="email" ></form>//login是form.id//email是input name值//获取email input 元素document.forms.login.email
四个插入位置afterBegin :结束标签之前beforeBegin :开始标签之前afterEnd :结束标签之后beforeEnd :接收标签之前
//留言板案例<!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><input type="text" placeholder="留言内容" autofocus onkeydown="addMsg(this)" ><ul class="list" ></ul><script>function addMsg(ele){if (event.keuy === 'Enter') {//1.获取留言列表的容器const ul = document.querySelector('.list');//2.判断留言是否为空if(ele.value.length === 0){alert('留言内容不能为空');ele.focus();return false;}//3.添加一条新留言const li = document.createElement('li')li.textContent = ele.value;//添加删除留言功能li.textHTML = ele.value + "<button onclick='del()' >删除</button>"//插入// ul.append(li);ul.insertAdjacentElement('afterBegin',li);//4.清空留言的输入框,为下一次做准备ele.value = null;//5.重置焦点到留言框中,方便用户更次输入ele.focus();}}function del(ele){//删除前确认if(confirm("是否删除?")){//方案1ele.remove();//方案2// ele.outerHTML = null;}}</script></body></html>
setTimeout(()=>{},2000);
setInterval(()=>{},2000);
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
