e.target.style.backgroundColor=rndCol;// 책에 강조해서 소개되지 않지만 꼭 알아둘 내용: Event 객체의 target 속성 ,
console.log(e);
//e.target은 내가 지금 버튼을 클릭했는데 이 이벤트가 뭔지, 어디서 발생하고 있는지 알려주는 부분. 중요!!!! 이것을 사용하면 function bgChange(e) {...} 이렇게 안쓰고 ES6 버전인 bgChange = (e) => {...}이렇게 쓸수 있다. 책에는 e.target이 this로 되어있다.
removeList(e)// forEach로 각각의 버튼에 이벤트를 다 등록해서 각각의 X버튼이 동작하도록 설정
showList()// 변경된 내용을 UI에 나타내기 위해
})
}
returnshowList
}
html`data-item=은 제거할 때 지울 목록의 아이템 이름을 버튼에 넣어주어 다른 버튼과 구별하기 쉽게하고 indexOf로 인덱스를 가져와서 삭제해줄 때 사용하는 것이다.`
ul=doc.querySelector("#listItem")
/*itemList.splice(index, 1) // index 위치의 1개만 삭제
ul
li li li
btn 물건1이름 btn 물건2이름 btn 물건3이름
*/
ul.children
// 셀렉터의 강력한 능력을 소환 - ul 안에 있는 모든 button을 선택
ul.querySelectorAll("button")
removeList=(e)=>{
// console.log("removeList")
// console.log(e)
constxbtn=e.target// 이벤트가 발생한 곳 (x버튼)
constindex=itemList.indexOf(xbtn.dataset.item)// 지울 물건의 index 얻기
// indexOf는 item이 배열의 몇번째 위치에 있는지 숫자로 나타내줌
if(index<0)return// 비정상적 상황 (이런 일은 일어나면 안됨)
itemList.splice(index,1)// index 위치의 1개만 삭제
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.