자바스크립트의 이벤트 이벤트에 대한 간략한 분석-JS 튜토리얼-php.cn

자바스크립트의 이벤트 이벤트에 대한 간략한 분석

黄舟

풀어 주다： 2016-12-13 16:09:54

원래의

1232명이 탐색했습니다.

1. 포커스: 요소에 포커스가 있으면 사용자 입력을 받을 수 있습니다. (모든 요소가 포커스를 받을 수 있는 것은 아닙니다.)

요소에 포커스를 설정하는 방법:

2. 탭

3. js

2. (예: 입력 상자 프롬프트 텍스트)

onfocus: 요소가 포커스를 얻을 때 트리거됨:

element.onfocus = function(){};

로그인 후 복사

onblur: 요소가 포커스를 잃을 때 트리거됨:

element.onblur = function(){};

로그인 후 복사

obj.focus() 지정된 요소에 포커스를 설정합니다.

obj.blur()는 지정된 요소의 포커스를 취소합니다

obj.select()는 지정된 요소의 텍스트 내용을 선택합니다

3 , ( 예: 마우스로 사각형이 움직입니다.)

이벤트: 이벤트 객체입니다.

이벤트가 발생하면 현재 이 개체에서 발생하는 이벤트와 관련된 모든 정보가 지정된 장소, 즉 필요할 때 호출할 수 있는 이벤트 개체에 임시 저장됩니다. 비행기의 블랙박스와 같습니다.

이벤트 객체는 반드시 객체의 이벤트 호출 기능에 사용되어야 컨텐츠를 가지게 됩니다.

이벤트 함수: 이벤트에 의해 호출되는 함수입니다. 함수가 정의될 때가 아니라 호출될 때 결정됩니다.

4. 호환성

element.onclick = fn1;

로그인 후 복사

IE/Chrome 브라우저: 이벤트가 내장된 전역 개체입니다(직접 사용 가능)

function fn1(){ 　　
alert(event);  
}

로그인 후 복사

표준에서는 이벤트 개체가 첫 번째입니다. 이벤트 함수를 통해 전달된 매개변수 전달

function fn1(ev){ 　　　　
alert(ev);  
}

로그인 후 복사

호환 쓰기:

function fn1(ev){ 　　　　
var ev = ev || event;  
}

로그인 후 복사

clientX[Y]: 이벤트가 발생했을 때 마우스에서 보이는 영역까지의 거리 페이지

5. 이벤트 흐름(예: 모방 선택 제어)

　● 이벤트 버블링: 요소가 이벤트를 수신하면 상위 창까지 수신한 이벤트입니다.

● 이벤트 캡처: 요소가 이벤트를 수신하려는 경우 상위 요소가 먼저 이벤트를 수신한 다음 전달합니다.

참고: IE에서는 이벤트 캡처가 없습니다. 이벤트 바인딩에서 표준은

을 포함합니다. 6. 이벤트 바인딩

　● 첫 번째 유형:

element.onclick = fn1;

로그인 후 복사

참고 ：oDiv. onclick = fn1;

　oDiv.onclick = fn2;

　이 방법으로 fn2는 fn1을 덮습니다.

● 두 번째 유형:

IE: obj. attachmentEvent (이벤트명, 이벤트함수)

1. 캡쳐없음

2. 이벤트명 ON

3. 이벤트함수 실행순서 : 표준 > 전달순서 없음 -standard》역순

　4. 이는 창

element.attachEvent(onclick,fn1);

로그인 후 복사

을 가리킵니다. 표준: obj.addEventListener(이벤트 이름, 이벤트 함수, 캡처 여부)

　1. 캡처

2. 이벤트 이름에 on이 없습니다

3. 이벤트 실행 순서는 양의 순서입니다

4. 이벤트를 트리거한 개체를 가리킵니다.

element.addEventListener(click,fn1,false);

로그인 후 복사

bind 함수

function bind(obj,evname,fn){  
if(obj.addEventListener){  
obj.addEventListener(evname,fn,false);  
}else{   
obj.attachEvent(&#39;on&#39; + evname,function(){    
fn.call(obj);   
});  
} 
}

로그인 후 복사

Event unbound

● 첫 번째 유형

element.onclick = null;

로그인 후 복사

● 두 번째 유형

IE:obj.detachEvent(이벤트 이름, 이벤트 함수);

document.detachEvent(&#39;onclick&#39;,fn1);

로그인 후 복사

표준: obj.removeEventListener(이벤트 이름, 이벤트 함수, 캡처 여부)

document.removeEventListener(&#39;click&#39;,fn1,false);

로그인 후 복사

8 . 키보드 이벤트(예: 방명록)

● onkeydown: 키보드 키를 눌렀을 때 트리거됩니다.

● onkeyup: 키보드 키를 눌렀을 때 트리거됩니다.

● event.keyCode : 숫자형 키보드 키 값 키 값

ctrlKey, ShiftKey, altKey Boolean 값

이벤트 발생 시 Shift || Ctrl || 그렇지 않으면 true를 반환합니다.

9. 기본 이벤트(예: 사용자 정의 오른쪽 클릭 메뉴, 키보드 제어 p 이동)

　● 이벤트 기본 동작: 이벤트가 발생할 때 브라우저가 기본적으로 수행하는 작업 .

● 기본 이벤트 차단: false 반환;

oncontextmenu: 마우스 오른쪽 버튼 클릭 메뉴(컨텍스트 메뉴)가 표시될 때 트리거되는 마우스 오른쪽 버튼 클릭 메뉴 이벤트입니다.

사례:

사각형이 마우스와 함께 이동합니다.

onmouseover: 마우스가 요소 위로 이동할 때 트리거됩니다.

참고: 트리거 빈도는 다음과 같습니다. 픽셀이 아니라 간격입니다. 마우스가 얼마나 멀리 움직여도 간격 내에서 한 번만 트리거

<style>    
body{      
height: 2000px;     
}    
#p{      
width:100px;      
height: 100px;      
background:red;      
position: absolute;     
}    
</style>    
<body>     
<p id="p1"></p>    
</body>    
<script>     
var oDiv = document.getElementById(&#39;p1&#39;);     
document.onmouseover = function(ev){      
var ev = ev || event;      
// 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离      
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;      
oDIv.style.top = ev.clientX + scrollTop + &#39;px&#39;;      
oDIv.style.left = ev.clientY + &#39;px&#39;;     
}   
</script>

로그인 후 복사

입력 상자 텍스트 프롬프트:

<style></style>  
<body>   
<input type="text" id="text1" value="请输入内容"/>   
<input type="button" id="btn" value="全选" />  
</body>  
<script>   
var oText = document.getElementById(&#39;text1&#39;);   
var oBtn = document.getElementById(&#39;btn&#39;);   
oText.onfocus = function(){    
if(this.value == &#39;请输入内容&#39;){     
this.value = &#39;&#39;;    
}   
}   
oText.onblur = function(){    
if(this.value == &#39;&#39;){     
this.value = &#39;请输入内容&#39;;    
}   
}   
oBtn.onclick = function(){    
oText.select();   
}  
</script>

로그인 후 복사

모방 선택 컨트롤:

<style>   
#p1{     
width: 100px;     
height: 200px;     
border: 1px solid red;     
display: none;    
}   
</style>   
<body>    
<input type="button" value="按钮" id="btn" />    
<p id="p1"></p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>   
</body>   
<script>   
window.onload = function(){    
var oBtn = document.getElementById(&#39;btn&#39;);     
var oDiv = document.getElementById(&#39;p1&#39;);     
oBtn.onclick = function(ev){      
var ev = ev || event;      
ev.cancelBubble = true;      
oDiv.style.display = &#39;block&#39;;     
}     
document.onclick = function(){      
oDiv.style.display = &#39;none&#39;;     
}    
}   
</script>

로그인 후 복사

방명록 :

<style></style>  
<body>   
<input type="text" id="con"/>   
<ul id="box"></ul>  
</body>  
<script>   
var oUl = document.getElementById(&#39;box&#39;);   
var oText = document.getElementById(&#39;con&#39;);       
document.onkeyup = function(ev){    
var ev = ev || even;     
if(ev.keyCode != &#39;&#39;){     
if(ev.keyCode == 13){      
var oLi = document.createElement(&#39;li&#39;);       
oLi.innerHTML = oText.value;      
if(oUl.children[0]){       
oUl.insertBefore(oLi,oUl.children[0]);     
}else{       
oUl.appendChild(oLi);     
}     
}     
}   
} 
</script>

로그인 후 복사

사용자 정의 마우스 오른쪽 버튼 클릭 메뉴:

<style>   
body{  
height: 2000px;  
}  
#box{    
width: 100px;    
height: 200px;    
background: red;    
display: none;    
position: absolute;;   
}  
</style>  
<body>   
<p id="box"></p>  
</body>  
<script>   
var oBox = document.getElementById(&#39;box&#39;);   
document.oncontextmenu = function(ev){    
var ev = ev || event;    
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;    
oBox.style.display = &#39;block&#39;;    
oBox.style.top = scrollTop + ev.clientY + &#39;px&#39;;    
oBox.style.left = scrollLeft + ev.clientX + &#39;px&#39;;     
return false;   
}   
document.onclick = function(){    
oBox.style.display = &#39;none&#39;;   
}  
</script>

로그인 후 복사

키보드 제어 p 모션:

<style> 
#box{   
width: 100px;   
height: 100px;   
background: red;   
position: absolute;  
} 
</style> 
<body>  
<p id="box"></p> 
</body> 
<script>  
var oBox = document.getElementById(&#39;box&#39;);  
var timer = null;  
var oLeft = false;  
var oTop = false; 
var oRight = false;  
var oBottom = false;  // 运动一直就绪，等待按键操作  
timer = setInterval(function(){   
if(oLeft){   
oBox.style.left = oBox.offsetLeft - 10 + &#39;px&#39;;   
}else if(oTop){    
oBox.style.top = oBox.offsetTop - 10 + &#39;px&#39;;   
}else if(oRight){    
oBox.style.left = oBox.offsetLeft + 10 + &#39;px&#39;;   
}else if(oBottom){    
oBox.style.top = oBox.offsetTop + 10 + &#39;px&#39;;   
}   
// 防止溢出   
limit();  
},10);   
// 按键按下，开始运动  
document.onkeydown = function(ev){   
var ev = ev || even;   
switch (ev.keyCode){    
case 37:     
oLeft = true;     
break;    
case 38:     
oTop = true;     
break;    
case 39:     
oRight = true;     
break;    
case 40:     
oBottom = true;     
break;   
}  
}  
// 按键抬起，停止运动  
document.onkeyup = function(ev){   
var ev = ev || even;   
switch (ev.keyCode){    
case 37:     
oLeft = false;     
break;    
case 38:     
oTop = false;     
break;    
case 39:     
oRight = false;     
break;    
case 40:     
oBottom = false;     
break;   
}  
}  
function limit(){   
// 控制左边   
if(oBox.offsetLeft <= 0){    
oBox.style.left = 0;   
}   
// 控制上边   
if(oBox.offsetTop <= 0){    
oBox.style.top = 0;   
}   
// 控制右边   
if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){    
oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + &#39;px&#39;;   
}   
// 控制下边   
if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){    
oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + &#39;px&#39;;   
}  
} 
</script>

로그인 후 복사

위 내용이 이 글의 전체 내용입니다. 이 기사가 모든 사람의 학습이나 업무에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!