HTML_javascript 기술에서 setCapture 및 releaseCapture 사용 소개

또한, 또 다른 매우 중요한 점은 Win32에서는 마우스 이동 이벤트가 연속적이지 않다는 것입니다. 즉, 1px 마우스 포인터를 이동할 때마다 마우스 이동이 주기적으로 발생하지 않습니다. mousemove 이벤트를 생성합니다.
그래서 직경 5px의 점과 같은 작은 페이지 개체의 경우 setCapture 및 releaseCapture가 없으면 마우스를 누른 상태에서 마우스를 빠르게 움직이면 마우스는 멀리 이동하지만 다음 mousemove 이벤트가 더 이상 점 개체로 전송되지 않기 때문에 작은 점이 여전히 제자리에 있습니다.

웹 개발과 Windows 개발의 가장 큰 차이점은 Windows 개발은 상태 저장형인 반면 웹 개발은 상태 비저장형이라는 것입니다. Windows에서는 Ctrl Alt Del을 강제로 사용하지 않는 한 모든 작업을 프로그램으로 제어할 수 있습니다. 매우 중요한 작업이 수행되더라도 사용자가 브라우저 닫기 버튼을 클릭하면 이전 작업의 결과가 지워집니다. 하지만 사용자가 선택할 수 있도록 일부 코드를 onunload 이벤트에 추가할 수 있습니다. 종료할지 모르지만 근본적으로 문제를 해결할 수는 없습니다!

몇일 전에 인터넷에서 setCapture 메소드를 보고 대략적으로 이 메소드를 특정 영역에서 사용하면 이렇다는 것을 알게 되었습니다. IE 문서에서 Onclick 또는 onmouse*** 및 기타 관련 마우스 이벤트 메서드를 작성하면 해당 마우스 동작을 모니터링합니다. 마우스가 IE 밖으로 나가더라도 계속해서 캡처할 수 있습니다. 특정 div의 onclick 이벤트 이때 닫기 버튼을 클릭하면 경고 창도 나타납니다. releaseCapture는 setCapture 메서드와 반대되는 방식으로 마우스 모니터를 해제합니다. >이 기능을 사용하면 IE의 창 닫기 및 기타 파괴적인 작업을 지연시킬 수 있으며, 파괴적인 작업이 수행되기 전에 일부 중요한 작업을 처리할 수 있습니다.
안타깝게도 setCapture 및 releaseCapture는 키보드 이벤트만 지원하지 않습니다. , onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout 등 마우스 이벤트가 작동합니다.

다음은 div 요소 divMain의 콘텐츠를 보호하려는 경우의 간단한 예입니다.
1. divMain에서 setCapture 메서드를 실행합니다.
document.getElementById(" divMain").setCapture();
2. setCapture와 releaseCapture 사이를 전환하려면 버튼 btnChange를 추가하고 전역 변수를 정의합니다.
var isFreeze = true;
3. btnChange의 onclick 이벤트에 다음 코드를 추가합니다.

코드 복사 다음:

functionchange_capture(obj) {

isFreeze = !isFreeze;
if(isFreeze) {
obj.value = "releaseCapture"
document.getElementById ("divMain").setCapture();
} else {
obj.value = "setCapture"
alert('저장! '); //중요한 작업을 수행할 수 있습니다
document.getElementById("divMain").releaseCapture();
}
}


divMain의 onclick 이벤트에서 다음 코드를 추가하세요:

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

function click_func()

{
if(event.srcElement.id == "divMain")
{
alert("처리 중...") //일반 작업
document.getElementById("divMain ").setCapture( );
}
else
{
if(isFreeze && event.srcElement.id != "btnChange")
{
alert('releaseCapture가 아닙니다. 실행되고 클릭할 수 없습니다') ;
document.getElementById("divMain").setCapture();
}
}
}


body의 onkeydown 이벤트 다음 코드 추가:

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

함수 keydown_func()

{
if (event.keyCode==115 && event.altKey) //ALT F4
{
if(isFreeze)
{
alert('Save! '); //실행 가능 중요 작업
}
//window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px")
//return false ;
}
document.getElementById("divMain").setCapture();
}


전체 코드는 다음과 같습니다.

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

코드는 다음과 같습니다.

;


위 페이지를 실행해보시면 금방 이해되실 겁니다.
익명 함수를 호출하고 적용할 수 있습니다
클래스의 초기화 적용은 다음과 같습니다.




코드 복사

코드는 다음과 같습니다.


Person = function() {
this.Init.apply (this, 인수);

} ; Person.prototype = { first: null, last: null, Init: function(first, last) { this. first = first; this.last = last;

},

fullName: function() {
return this.first '' this.last;
fullNameReversed: function() {
return this.last ', ' this.first
}
var s = new Person2('creese', 'yang'); s.fullName());
Alert(s.fullNameReversed());


호출 및 적용 함수는 함수 내용을 할당할 수 있습니다(익명 매개변수 포함, 트리거되지 않음)
함수 바인딩 이벤트 적용은 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.


Function.prototype.BindForEvent = function() {

var __m = this, object = 인수[0], args = new Array()
for(var i = 1; i < 인수.길이; i ){
args.push(arguments[i]);
}

return function(event) { return __m.apply(object, [( event || window.event)].concat (args)); } } 함수 바인딩 매개변수에 대한 호출 및 적용 함수의 적용은 다음과 같습니다.

코드 복사


코드는 다음과 같습니다.

Function.prototype.Bind = function() {
var __m = this, object = 인수[0], args = new Array()
for(var i = 1; i < ; 인수.길이; i ){
args.push(arguments[i]);
}
return function() {
return __m.apply(object, args);
}

call과 apply의 함수는 동일합니다. 단지 매개변수 형식만 다릅니다. fun.call(obj, 인수); 단수형이다.