자바스크립트의 이벤트 이벤트에 대한 간략한 분석
- 黄舟원래의
- 2016-12-13 16:09:541271검색
1. 포커스: 요소에 포커스가 있으면 사용자 입력을 받을 수 있습니다. (모든 요소가 포커스를 받을 수 있는 것은 아닙니다.)
요소에 포커스를 설정하는 방법:
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('on' + evname,function(){
fn.call(obj);
});
}
}Event unbound
● 첫 번째 유형
element.onclick = null;
● 두 번째 유형
IE:obj.detachEvent(이벤트 이름, 이벤트 함수);
document.detachEvent('onclick',fn1);
표준: obj.removeEventListener(이벤트 이름, 이벤트 함수, 캡처 여부)
document.removeEventListener('click',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('p1');
document.onmouseover = function(ev){
var ev = ev || event;
// 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDIv.style.top = ev.clientX + scrollTop + 'px';
oDIv.style.left = ev.clientY + 'px';
}
</script>입력 상자 텍스트 프롬프트:
<style></style>
<body>
<input type="text" id="text1" value="请输入内容"/>
<input type="button" id="btn" value="全选" />
</body>
<script>
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
oText.onfocus = function(){
if(this.value == '请输入内容'){
this.value = '';
}
}
oText.onblur = function(){
if(this.value == ''){
this.value = '请输入内容';
}
}
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('btn');
var oDiv = document.getElementById('p1');
oBtn.onclick = function(ev){
var ev = ev || event;
ev.cancelBubble = true;
oDiv.style.display = 'block';
}
document.onclick = function(){
oDiv.style.display = 'none';
}
}
</script>방명록 :
<style></style>
<body>
<input type="text" id="con"/>
<ul id="box"></ul>
</body>
<script>
var oUl = document.getElementById('box');
var oText = document.getElementById('con');
document.onkeyup = function(ev){
var ev = ev || even;
if(ev.keyCode != ''){
if(ev.keyCode == 13){
var oLi = document.createElement('li');
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('box');
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 = 'block';
oBox.style.top = scrollTop + ev.clientY + 'px';
oBox.style.left = scrollLeft + ev.clientX + 'px';
return false;
}
document.onclick = function(){
oBox.style.display = 'none';
}
</script>키보드 제어 p 모션:
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<body>
<p id="box"></p>
</body>
<script>
var oBox = document.getElementById('box');
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 + 'px';
}else if(oTop){
oBox.style.top = oBox.offsetTop - 10 + 'px';
}else if(oRight){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}else if(oBottom){
oBox.style.top = oBox.offsetTop + 10 + 'px';
}
// 防止溢出
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 + 'px';
}
// 控制下边
if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){
oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px';
}
}
</script>위 내용이 이 글의 전체 내용입니다. 이 기사가 모든 사람의 학습이나 업무에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!