이 글에서는 참고하실 수 있도록 자바스크립트 이벤트 위임의 사용법과 장점을 간략하게 소개합니다.
이벤트 위임: 버블링 원리를 사용하여 부모에 이벤트를 추가하여 실행 효과를 트리거합니다.
이점: 성능이 향상되었으며 새로 추가된 요소에는 이전 이벤트도 포함됩니다.
이벤트 객체: 이벤트 소스, 어떤 이벤트에 있든 상관없이, 조작하는 요소가 이벤트 소스라면
이벤트 소스 가져오기:
IE:window.event.srcElement
표준 에서: event.target target.nodeName 태그를 결정하는
다음과 같이 코드가 적용됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
var iNow=5;
//事件源的方法依然保留父级事件！
oUl.onmouseover=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='red';
}
}
oUl.onmouseout=function(ev)
{
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='li')
{
target.style.background='';
}
}
oBtn.onclick=function()
{
iNow++;
var oLi=document.createElement('li');
oLi.innerHTML=111*iNow;
oUl.appendChild(oLi);
}
}
</script>
</head>
<body >
<input type="button" value="添加" id='btn1'>
<ul id='ul1'>
<li>11111</li>
<li>22222</li>
<li>3333333</li>
<li>44444444</li>
<li>66666666</li>
</ul>
</body>
</html>
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
