Renren.com에서 고위 프런트 엔드 인터뷰에 대한 필기 시험 문제를 보았습니다.
손으로 쓴 코드가 필요하며, 질문 중 하나는 그림 디스플레이를 만드는 것입니다.
Baidu 사진 하단에 작은 축소판이 있는 표시 표시줄과 유사
그런 다음 마우스 휠을 스크롤하여 더 크게 또는 더 작게 만들 수 있어야 합니다.
어떻게 해야 할지 잘 모르겠어서 인터넷에서 정보를 찾아봤습니다.
onmousewheel을 캡처할 수 있는 이벤트를 찾았습니다.
그런 다음 event.wheelDelta의 양수 또는 음수 값을 기준으로 롤포워드 또는 백워드를 결정합니다.
아무렇지도 않게 작은 예제를 작성하고 키보드 키를 캡쳐했습니다. 별로 아름답지도 않고 줄바꿈도 없습니다.
textNode로 제작되었기 때문에 html 코드를 추가할 수 없습니다.
그런데 이 방법을 사용하면 xss 주입을 방지할 수 있나요?
다음과 같이 코드 코드를 복사합니다.
<body onkeydown="showKey()" onmousewheel="showKey()">
다음과 같이 코드 코드를 복사합니다.
함수 쇼키(){
if(event.wheelDelta){
다음과 같이 코드 코드를 복사합니다.
// 양수 120은 앞으로 굴림을 의미하고, 음수 120은 뒤로 굴림을 의미합니다.
var textNode = document.createTextNode(event.wheelDelta+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
if(event.keyCode)
{
var textNode = document.createTextNode(event.keyCode+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
}
그 중 오늘 방금 살펴본 고급 디자인의 textNode 요소 중 하나를 사용했을 뿐입니다.
여러 textNode를 병합하는 방법
다음과 같이 코드 코드를 복사합니다.
정규화();