e.target 및 e.event 및 event.srcElement
5576 단어 element
1.
1 $(function(){
2 $("li:has(ul)").click(function(e){
3 if(this==e.target){
4 $(this).children().toggle();
5 $(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
6 }
7 return false; //
8 }).css("cursor","pointer").click(); //
9
10 // ,
11 $("li:not(:has(ul))").css({
12 "cursor":"default",
13 "list-style-image":"none"
14 });
15 });
구체적인 문제를 구체적으로 분석하다.현재 목표는 이벤트 이벤트에서 클릭 대상을 대표합니다.loader 이벤트:객체 로드;e는 매개 변수일 뿐, 임의로 값을 얻는다.대응하면 된다.
1 $(function(){
2 $(document).bind("click", function (e) {
3 $(e.target).closest("p").css("color","red");
4 })
5 });
e. target은 이벤트 원본입니다. 예를 들어 을 누르면 이 이벤트 원본이 이 button입니다. $(e.target) 이 뜻은 이벤트 원본을 전송하고 button이라는 대상을 얻는 것이다. 이것은document에 해당한다.getElementById () 와 같은 방법입니다.
2.
Flex와 유사하게 JavaScript의 이벤트도 마찬가지로 존재한다. 포획-촉발-거품 세 노드.비교적 흔히 볼 수 있는 상황은 하위 DIV가 사건을 촉발할 때 부모 DIV도 같은 사건을 감청하면 함께 촉발하고 거품이 생긴다는 것이다
jQuery 이벤트 감청 함수는 기본적으로 이벤트나 e로 지정됩니다. (필요하지 않아도 임의로 지정할 수 있습니다.)
e, 이벤트 매개 변수에서 다음 속성을 지원합니다. 이벤트.stopPropagation(); 이벤트 거품을 멈추는 방법 이벤트.preventDefault(); 기본 비헤이비어 구성 - 하이퍼링크 점프
더 간단한 방법:return false, 상기 두 가지 모두 같은 작용
event.type – click event와 같은 이벤트 유형target---이벤트의 html 요소 대상 이벤트.relatedTarget () - 예를 들어mouseover 이벤트가 터치될 때 관련 요소, 예를 들어 다른mouseout 요소 이벤트.pageX()/event.페이지 Y() - 페이지의 x, y 좌표 이벤트에 상대적입니다.which () - 이벤트와 관련된 키보드 또는 마우스의 키 값 이벤트를 가져옵니다.metaKey () - 이벤트에 ctrl 키 이벤트가 포함되어 있는지 판단합니다.originalEvent () - 원래 이벤트 객체를 가리킵니다.
3.event.srcElement은 이벤트와 같은 현재 이벤트 작용의 대상을 포착할 수 있습니다.srcElement.tagName은 활성 태그 이름을 캡처할 수 있습니다.
가져온 태그는 TD, TR, A와 같은 대문자로 표시됩니다.
<script type="text/javascript">
function tdclick(){
if(event.srcElement.tagName.toLowerCase()=='td')
alert(" :"+(event.srcElement.parentNode.rowIndex+1)+" :"+(event.srcElement.cellIndex+1));
}
</script>
IE에서 이벤트 대상은 srcElement 속성이 있지만 target 속성이 없습니다.Firefox에서 이벤트 대상은 target 속성이 있지만 srcElement 속성이 없습니다.그러나 그들의 역할은 상당하다. 해결 방법:obj(obj=event.srcElement?event.srcElement:event.target;)IE의 이벤트를 대신합니다.srcElement 또는 Firefox의 이벤트target.
event.srcElement.selectedIndex는 일반적으로 select 쌍에 사용됩니다.
<input type=button value=GO title="?page=1">
<script language="JavaScript">
function f()
{
alert('index.asp'+event.srcElement.title)
location.href='index.asp'+event.srcElement.title
}
</script>
<a title="a " >a </a>
<br>
<table border=1 width="200">
<tr title="tr " ><td>tr</td></tr>
</table>
<table border=1 width="200">
<tr><td title="td " >td</td></tr>
</table>
<select >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
event.srcElement의 하위 태그와 상위 태그: 첫 번째 하위 태그는 이벤트입니다.srcElement.퍼스트 차일드 마지막은 이벤트.srcElement.lastChild도 이벤트로 할 수 있죠.srcElement.children[i] event.srcElement.ChildNode[i]의 이벤트srcElement.parentElement은 마우스가 있는 대상의 이전 대상을 가리킨다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[CS] DOM Day-18DOM JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법 HTML문서의 구조와 관계를 객체(Object)로 표현한 모델입니다. id : practice class : highlight, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.