JavaScript events_javascript 팁에 대한 몇 가지 중요한 지침

1. 자바스크립트 비동기 콜백

코드 복사 코드는 다음과 같습니다.

<스크립트 언어 ="javascript ">
//처리 함수 window.onload에 로드된 콜백 함수 등록
window.onload = 로드됨
//window.alert 메소드 주소를 show 함수에 전달
var show = window .alert;
function added(){
show("성공")

2, 이벤트 object
　 아래 js 구현에서는 텍스트 영역 텍스트 상자에 Enter를 입력할 때 줄 바꿈이 발생하지 않습니다. 즉, Enter 키를 비활성화합니다.

코드 복사 코드는 다음과 같습니다.

< textarea >< /textarea>



3, 이 키워드

브라우저는 이 키워드를 함수(이 키워드를 포함하는 함수)를 참조하는 현재 요소와 동일시합니다.

코드 복사 코드는 다음과 같습니다.

• 
  홈 >
• 
  mappath
  

<스크립트 언어 = " javascript">
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i )
{
li[ i]. onclick = handeClick;
}
function handeClick()
{
this.style.BackgroundColor = "blue";
this.style.color = "red"
} 🎜>


4. 이벤트 버블링 취소
일반적으로 버블링 원칙에 따라 하위 요소의 스타일을 수정하거나 이벤트를 트리거할 때 해당 요소는 이런 일이 발생하지 않도록 하려면 이벤트 버블링도 취소해야 합니다.
다음 예에서는 마우스가 가리키고 있는 현재 요소에 빨간색 테두리를 추가하는 것을 보여줍니다. 이벤트 버블링을 방지하지 않으면 마우스를 요소 위로 이동할 때마다 해당 요소와 해당 상위 요소에 빨간색 테두리가 표시되는데, 이는 우리가 보고 싶지 않은 것입니다.

코드 복사

코드는 다음과 같습니다. div id = "body">

• /a> ;/li>

mappath

a href = "../">parentpath


5. 브라우저의 기본 동작 다시 로드
모든 브라우저에는 이러한 기본 동작이 있습니다. 즉, 태그를 클릭하면 때때로 href 속성의 주소로 연결됩니다. 이런 일이 발생하는 것을 원하지 않지만 경고 상자 팝업과 같은 자체 효과를 구현하고 싶습니다. 예는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

브라우저의 기본 동작 다시 로드



일 수도 있습니다.

웹사이트를 더욱 친숙하게 만들기 위해서는 다음 코드와 같이 요소에 마우스를 놓거나 키보드 탭 키를 통해 액세스할 때 스타일이 일관되어야 합니다.

코드 복사 코드는 다음과 같습니다.

id = "body">

• 
  /a> /li>
  
• 
  mappath
  
href = "../">parentpath< ;/a>

;script 언어="javascript">
var a = document.getElementsByTagName("a")
for (var i = 0; i < a.length; i )
{
//마우스 호버 및 포커스 이벤트 바인딩 요소에 대한 함수 처리
//사용자가 링크 위에 마우스를 올리거나 링크에 초점을 맞추면(키보드 사용) 배경색이 변경됩니다. 를 파란색으로
a[i].onmouseover = a[i].onfocus = function()
{
this.style.BackgroundColor = "blue"
}
// 요소에 대한 흐림 이벤트 핸들러 기능을 바인딩합니다.
//사용자가 링크에서 멀어지면 의 배경색이 흰색으로 변경됩니다.
a [i].onmouseout = a[i ].onblur = function()
{
this.style.BackgroundColor = "white"
}
}
🎜>

7 , 바인드 이벤트 리스너




코드 복사


코드는 다음과 같습니다.

//addEventt() 이벤트 추가

//Scott Andrew의 원래 addEvent() 함수 //elm element, document.getElementId('btn1') //evType 이벤트 이름을 입력하세요. "onclick"은 "click"으로 변경되어야 하고, "onblur"는 "blur"로 변경되어야 합니다. 즉, Click ///fn과 같이 이벤트 이름에 "on"이 포함되어서는 안 됩니다. 바인딩된 함수 뒤에는 이벤트의 응답 순서를 나타내는 showalert / /useCapture 부울 값과 같은 괄호를 사용하지 마세요. userCapture가 true이면 브라우저는 Capture를 사용하고, false이면 버블링 메서드를 사용합니다. false 함수 addEvent(elm, evType, fn, useCapture) {

if (elm.addEventListener)

{//firefox, 네비게이션 등을 사용하는 것이 좋습니다.
elm.addEventListener(evType, fn, useCapture);
}
else if (elm.attachEvent)
{//IE
var r = elm.attachEvent('on' evType,fn );
}
else
{
elm['on' evType] = fn;
}
}
//removeEvent() 로그아웃 이벤트
// 매개변수 이름은 addEvent() 함수와 동일합니다.
function RemoveEvent(elm, evTye, useCapture)
{
if (elm.detachEvent)
{
elm.detachEvent('on' evType );
}
else if (elm.removeEventListener)
{
elm.removeEventListener(evType , userCapture)
}
}