우리는 JavaScript와 HTML 사이의 상호작용이 이벤트를 통해 이루어진다는 것을 알고 있습니다. 이벤트는 클릭, 마우스 오버, 로드 등 사용자나 브라우저 자체에 의해 수행되는 특정 동작이며, 이벤트에 응답하는 함수가 호출됩니다. 이벤트 처리 함수(또는 이벤트 리스너). <title>이벤트 유틸리티 테스트</title> <input type="button" value="click me" id="btn"> <a href="http://www.baidu.com"> </a>바이두 [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 var eventUtil = { addListener: function(element, type, hander) { if (element.addEventListener) { element.addEventListener(type, hander, false); } else if (element.attachEvent) { element.attachEvent('on' + type, hander); } else { element['on' + type] = hander; } }, getEvent: function(event) { return event || window.event; //return event ? event : window.event; }, getTarget: function(event) { return event.target || event.srcElement; }, preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, removeListener: function(element, type, hander) { if (element.removeEventListener) { element.removeEventListener(type, hander, false); } else if (element.deattachEvent) { element.detachEvent(type, hander); } else { element['on' + type] = null; } }, stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }; ] (function() { var btn = document.getElementById("btn"); var link = document.getElementsByTagName("a")[0]; eventUtil.addListener(link, "click", function(event) { alert("prevent default event"); var event = eventUtil.getEvent(event); eventUtil.preventDefault(event); }); eventUtil.addListener(btn, "click", function(event) { var event = eventUtil.getEvent(event); var target = eventUtil.getTarget(event); alert(event.type); alert(target); eventUtil.stopPropagation(event); }); eventUtil.addListener(document.body, "click", function() { alert("click body"); }); })();
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
