클릭 및 onclick
6133 단어 클릭 및 onclick
1. javascript 코드에 이벤트 감청을 추가하는 것은 사실상 다음과 같은 JavaScript 논리를 실행하는 것이다.
document.body.onclick = fun;
함수 fun을 body 노드에 추가한 클릭 이벤트 감청은 body를 클릭한 후에야 fun 함수를 실행합니다.다음 형식으로 쓰면 함수 fun의 실행 결과를 클릭 이벤트 감청으로 추가합니다.
document.body.onclick = fun();
물론 위의 서술은 모두가 알고 있는데, 왜 쓴 것은 설명하기 위해서이다
javascript 코드에 이벤트 감청을 추가하는 것은 사실상 자바스크립트 논리라는 말을 실행한 것입니다.
두 번째 작법은 사실상 등호 오른쪽의 논리를 먼저 집행한 것이다.
2. 다음 중 이벤트 감청을 추가하는 상황을 토론한다.
onclick=”fun()”
이렇게 쓰면 클릭한 후에fun 함수를 실행하는 것을 알 수 있습니다.
document.body.onclick = fun();
실행 순서가 다르다. 즉, onclick = "fun ()"이 코드는 onclick에 감청을 추가할 때 fun 함수를 실행하지 않는다. 개인적으로는 다음과 같다.
줄에 감청을 추가할 때 등호 오른쪽의 코드를 해석하지 않고 클릭한 후에 해석합니다.다시 말하면 클릭하기 전에 브라우저는 등호 오른쪽의 코드가 함수인지 무의미한 문자열인지 모른다.
다음은 실험으로 위의 결론을 증명한다.
1. 코드 1의 실행 결과: 클릭 후 팝업 상자 "1"
<div style="width:500px;height:500px;background: red;" onclick="alert('1')")></div>
2. 코드 2의 실행 결과는 동일(Chrome): 클릭 후 팝업 상자 "1"
<div style="width:500px;height:500px;background: red;" onclick=eval("alert('1')")></div>
3. 코드 3의 운행 결과: 오류 없음
<div style="width:500px;height:500px;background: red;" onclick="1")></div>
코드 2에서 eval () 함수를 사용했는데 코드 2와 코드 1의 운행 결과가 같다는 것을 알 수 있습니다.
클릭하기 전에 등호 오른쪽의 코드를 해석하지 않습니다.코드 3에 오류 메시지가 표시되지 않음:
이벤트 감청을 추가하는 것은 반드시 함수가 아니라 등호 오른쪽의 코드를 원클릭 속성에 값을 부여하고 클릭한 후에 등호 오른쪽의 내용을 해석합니다. 함수라면 실행하고 함수가 아니면 결과가 없습니다.
두 번째:
네가 말한 그 두 개는 엄밀히 말하면 결코 등가가 아니다.
<tag onclick="func();">
사실
ele.onclick=function(){func();};
(여기에서 말한'등가'는 상부 변수의 작용역을 세밀하게 논의하지 않고 화호 아래에 이벤트의 첫 번째 참고를 가지고 있다)
그리고
ele.onclick=func;
이 쓰기 방식은 저버전 IE 브라우저에서는 지원되지 않습니다.
——
엘레까지.onclick=func();,이것은 정말 이미 작법의 차이가 아니다. 뜻은 이미 멀었다.이때의 ele.onclick은 무엇입니까? 완전히func가 실행할 때return의 결과에 달려 있습니다.
괄호 안의 말을 설명하는 불여우 이벤트
화성에서 이벤트는 윈도우가 아닙니다.이벤트가 function의 첫 번째 매개 변수입니다.이때,
<tag onclick="func();">
사실
ele.onclick=function(event){func();};
(사실 구체적인 사용은 아직 완전히 같은 가격이 아니다. 예를 들어 이 두 종류의 브라우저를 호환하기 위해 다음과 같이 쓸 수 있다.
<tag onclick="event.preventDefault();">
그러나 js 상하문에 넣으면 반드시 다음과 같다.
ele.onclick=function(event){
(event||window.event).preventDefault();
};
))
- 괄호 안의 말의 상부 변수 작용역을 설명한다.
<tag onclick="open(title);">
그중에 나타난 변수는 이 태그를 먼저 찾습니다.open、tag.title이 존재하는지,
그렇지 않으면 문서를 거슬러 올라갑니다.open、document.제목이 존재하는지 여부(일부 브라우저는 상위 부모 요소의 일부 특수 요소를 계속 거슬러 올라가서document로 거슬러 올라간다고 합니다.
그리고 나서야 윈도우로 거슬러 올라갔다.open、window.title이 존재하는지,
더 이상 존재하지 않으면 잘못을 보고한다.
with문법을 공부한 후에야 나는 이런 괴이한 거슬러 올라가는 것이 도대체 어떻게 된 일인지 알게 되었다.
한편, js 상하문에서function의 변수는 누가 function의 위치를 정의하는 위치 밖에 층층이 있는function 패키지를 결정하는지 거슬러 올라간다.예:
var top;
(function(){
var parent;
ele.onclick=function(){
var self;
};
})();