> 웹 프론트엔드 > JS 튜토리얼 > js에 의해 동적으로 추가된 DIV의 onclick 이벤트에 대한 간단한 예

js에 의해 동적으로 추가된 DIV의 onclick 이벤트에 대한 간단한 예

高洛峰
풀어 주다: 2016-12-24 15:20:13
원래의
1988명이 탐색했습니다.

가장 간단한 방법은 다음과 같습니다.

<input type="button" onclick="alert(this.value)" value="我是 button" />
로그인 후 복사

onclick 이벤트를 동적으로 추가합니다.

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick(){alert(this.value)};
</script>
로그인 후 복사

익명 함수 function(){}을 사용하면 다음과 같습니다.

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick=function(){alert(this.value)};
</script>
로그인 후 복사

위의 방법은 실제로는 같습니다. 원칙적으로 모두 onclick 속성의 값을 정의합니다. obj.onclick이 여러 번 정의된 경우(예: obj.onclick=method2; obj.onclick=method3) obj.onclick=method3의 마지막 정의만 적용됩니다. 처음 두 정의가 마지막 정의로 덮어쓰기되었습니다.

IE에서 AttachEvent를 살펴보세요.

<input type="button" value="我是拉登" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.attachEvent("onclick",method1);
bObj.attachEvent("onclick",method2);
bObj.attachEvent("onclick",method3);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>
로그인 후 복사

실행 순서는 method3 > method2 > out이고 스택의 변수는 유사합니다. AttachEvent의 첫 번째 매개변수는 on으로 시작하며 onclick/onmouseover/onfocus 등이 될 수 있다는 점에 유의해야 합니다.

IE에서 AttachEvent를 사용한 후 (확인 없이) 사용하는 것이 가장 좋다고 합니다. 메모리

Firefox에서 addEventListener를 살펴보세요.

<input type="button" value="我是布什" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.addEventListener("click",method1,false);
bObj.addEventListener("click",method2,false);
bObj.addEventListener("click",method3,false);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>
로그인 후 복사

ff의 실행 순서가 method1임을 알 수 있습니다. > ; method2 > method3 은 IE와 정반대입니다. addEventListener에는 세 개의 매개변수가 있다는 점에 유의해야 합니다. 첫 번째 매개변수는 클릭/마우스오버/포커스 등과 같이 "on"이 없는 이벤트 이름입니다.

js에 의해 동적으로 추가된 DIV의 onclick 이벤트에 대한 위의 간단한 예는 편집자가 공유한 모든 내용을 참고할 수 있기를 바라며, PHP 중국어 웹사이트를 지원해 주시길 바랍니다.


js에 의해 동적으로 추가된 DIV의 onclick 이벤트에 대한 더 간단한 예를 보려면 PHP 중국어 웹사이트의 관련 기사에 주목하세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿