집 > 기사 > 웹 프론트엔드 > DOM을 사용하여 이벤트를 전달하는 방법

DOM을 사용하여 이벤트를 전달하는 방법

一个新手원래의: 2017-10-24 10:01:451875검색

One ,

onmouseover 및 onmouseout 이벤트

onmouseover 및 onmouseout 이벤트는 사용자의 마우스가 HTML 요소 위나 밖으로 움직일 때 기능을 트리거하는 데 사용할 수 있습니다.

작은 예: 마우스가 상단에 있기 전 상단으로 이동한 후

（1）关键代码
<body>
<p onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</p>
<script>="谢谢"="把鼠标移到上面"</script>
（2）关键代码  （两种方法均可实现）
<p onmouseover="innerHTML=&#39;谢谢&#39;" onmouseout="innerHTML=&#39;把鼠标移到上面&#39;"
 style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</p>

two,

onmousedown, onmouseup 및 onclick 이벤트

onmousedown, onmouseup and on 클릭은 구성 마우스 클릭 이벤트의 모든 부분. 먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 발생하고, 마우스 버튼을 놓으면 onmouseup 이벤트가 발생하며, 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 발생합니다.

예:

마우스를 클릭하기 전마우스를 클릭했을 때마우스를 놓은 후

（1）关键代码
<p onmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;color:#ffffff;
width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</p>

<script>="#1ec5e5"="请释放鼠标按钮"="green"="请按下鼠标按钮"</script>
（2）关键代码   （两种方法均可）
<p onmousedown="style.backgroundColor=&#39;#1ec5e5&#39;,innerHTML=&#39;请释放鼠标&#39;" 
onmouseup="style.backgroundColor=&#39;red&#39;,innerHTML=&#39;请按下鼠标&#39;" 
style="color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</p>

위 내용은 DOM을 사용하여 이벤트를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript의 v8 정렬 소스 코드 관련 문제다음 기사：JavaScript의 v8 정렬 소스 코드 관련 문제