Dojo 학습 노트(5): Dojo의 이벤트 메커니즘
11412 단어 dojo
Dojo의 주요 DOM 이벤트 처리 메커니즘은 Dojo/on입니다.Dojo는 사용자에게 통일된 DOM 이벤트 메커니즘을 제공했다. Dojo의 Dojo/on을 사용하면 사용자는 각종 DOM API의 불일치를 피할 수 있고 DOJO도 메모리 유출 문제를 예방할 수 있다.
페이지 on.html 코드는 다음과 같습니다.
효과: 단추를 눌렀을 때div는 파란색으로, 한 마우스가div를 지나갈 때div는 빨간색으로, 마우스가 떠난 후div는 흰색으로 변한다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#myButton {
margin-bottom:1em;
}
#myDiv {
border: 1px solid black;
background-color: white;
width: 100px;
height: 100px;
}
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require(["dojo/on", "dojo/dom", "dojo/dom-style", "dojo/mouse", "dojo/domReady!"],
function(on, dom, domStyle, mouse) {
var myButton = dom.byId("myButton"),
myDiv = dom.byId("myDiv");
on(myButton, "click", function(evt){
domStyle.set(myDiv, "backgroundColor", "blue");
});
on(myDiv, mouse.enter, function(evt){
domStyle.set(myDiv, "backgroundColor", "red");
});
on(myDiv, mouse.leave, function(evt){
domStyle.set(myDiv, "backgroundColor", "");
});
});
</script>
</head>
<body>
<button id="myButton">Click me!</button>
<div id="myDiv" style="background-color: red; ">Hover over me!</div>
</body>
</html>주의: Dojo/mouse는 필수입니다. 모든 브라우저가mouseenter와mouseleave 이벤트를 지원하는 것은 아닙니다. Dojo/mouse는 이러한 지원을 추가했습니다.
(element, 이벤트 name,handler), 이 모델은 모든 window,document,node,form,mouse,keyboard 이벤트에 적용됩니다.
on 메서드는 API 등록 이벤트뿐만 아니라 이벤트 처리 프로세스가 어떻게 작동하는지 규범화합니다.
(1) 이벤트 프로세서는 등록된 순서에 따라 호출된다.
(2) 이벤트 프로세서가 호출될 때 첫 번째 파라미터는 항상 이벤트 대상이다.
(3) 이벤트 대상은 target 속성,stopPropagation 방법,preventDefault 방법이 있습니다.
DOM API와 마찬가지로 Dojo는 이벤트 프로세서를 삭제하는 방법:handle.remove.on 방법의 반환값은remove 방법을 가진 간단한 대상입니다. 이 방법을 사용하면 이벤트 감청을 삭제합니다.예를 들어 한 번만 실행하는 방법을 원한다면 다음과 같이 할 수 있다.
var handle = on(myButton, "click", function(evt){
// Remove this event using the handle
handle.remove();
// Do other stuff here that you only want to happen one time
alert("This alert will only happen one time.");
});dojo/on은 일회성 이벤트를 처리하는 편리한 방법을 포함하고 있습니다.once, 그는 on과 같은 매개 변수를 받아들인다.
on 방법의 첫 번째 매개 변수는 이벤트 처리 프로그램의 상하문입니다. 하나의 예외는 on이 위임 이벤트를 사용할 때입니다.lang.hitch (dojo/base/lang 모듈에서) 를 사용하여 프로세서의 상하문을 지정할 수 있습니다.
require(["dojo/on", "dojo/dom", "dojo/_base/lang", "dojo/domReady!"],
function(on, dom, lang) {
var myScopedButton1 = dom.byId("myScopedButton1"),
myScopedButton2 = dom.byId("myScopedButton2"),
myObject = {
id: "myObject",
onClick: function(evt){
alert("The scope of this handler is " + this.id);
}
};
// This will alert "myScopedButton1"
on(myScopedButton1, "click", myObject.onClick);
// This will alert "myObject" rather than "myScopedButton2"
on(myScopedButton2, "click", lang.hitch(myObject, "onClick"));
});2. NodeList 이벤트
dojo.NodeList는 여러 노드에 이벤트를 등록하는 데 사용되는 on 방법을 제공합니다. NodeList.n 방법은 Dojo/on 방법과 유사합니다. Dojo/on 방법의 첫 번째 인자가 없습니다. NodeList에서 당신이 연결하고 있는 노드가 대상이기 때문입니다.Dojo/query에는 NodeList가 포함되어 있습니다.on 방법, 그래서 당신은 Dojo/on을 인용할 필요가 없습니다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#myButton {
margin-bottom: 1em;
}
#myDiv {
border: 1px solid black;
background-color: white;
width: 100px;
height: 100px;
}
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require(["dojo/query", "dojo/_base/lang", "dojo/domReady!"], function(query, lang) {
var myObject = {
id: "myObject",
onClick: function(evt){
alert("The scope of this handler is " + this.id);
}
};
query(".clickMe").on("click", myObject.onClick);
query(".clickMeAlso").on("click", lang.hitch(myObject, "onClick"));
});
</script>
</head>
<body>
<button id="button1" class="clickMe">clickMe</button>
<button id="button2" class="clickMeAlso">clickMeAlso</button>
<button id="button3" class="clickMe">clickMe</button>
<button id="button4" class="clickMeAlso">clickMeAlso</button>
</body>
</html>참고: NodeList.connect 방법이 Dojo를 되돌려줍니다.NodeList 객체는 체인 호출에 사용되고 NodeList.on 이벤트 프로세서를 저장하는 그룹을 되돌려줍니다. 이 그룹은remove 방법을 포함합니다.
3. 사건 의뢰
이벤트 위임 형식: on (parent element, "selector: event name",handler)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#myButton {
margin-bottom: 1em;
}
#myDiv {
border: 1px solid black;
background-color: white;
width: 100px;
height: 100px;
}
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require(["dojo/on", "dojo/dom", "dojo/query", "dojo/domReady!"],
function(on, dom){
var myObject = {
id: "myObject",
onClick: function(evt){
alert("The scope of this handler is " + this.id);
}
};
var div = dom.byId("parentDiv");
on(div, ".clickMe:click", myObject.onClick);
});
</script>
</head>
<body>
<div id="parentDiv">
<button id="button1" class="clickMe">Click me</button>
<button id="button2" class="clickMe">Click me also</button>
<button id="button3" class="clickMe">Click me too</button>
<button id="button4" class="clickMe">Please click me</button>
</div>
</body>
</html>주의: Dojo/query를 직접 사용하지 않지만, 이 모듈은 여전히 필요합니다.이벤트 의뢰에 사용할 선택기와 일치하도록 Dojo/query 노출 선택기 엔진이 필요하기 때문입니다.
4.Publish/Subscribe(게시/구독)
그 전에, 상기 모든 예는 이미 존재하는 대상을 이벤트의 발생기로 사용한다. (당신이 등록한 대기 이벤트의 발생)노드의 인용이 없거나 대상이 만들어졌는지 알 수 없습니다.이것이 바로 Dojo의 게시/구독 프레임워크가 도입된 이유입니다.Dojo/topic 모듈을 통해 Pub/sub는 테마를 위한 프로세서를 등록할 수 있습니다. (테마는 이벤트의 별명입니다. 이 이벤트는 다원적이며 문자열로 설명됩니다.) 테마가 발표될 때 테마가 호출됩니다.우리가 개발한 응용 프로그램에서 동작을 팝업하는 사용자가 필요합니다. 팝업을 한꺼번에 끝내려고 합니다. 포장 대상을 만들고 싶지 않습니다. 이 작은 프로그램에 가입하기 위해 단추를 누르면 Pub/sub가 이 장면에 적용될 수 있습니다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#myButton {
margin-bottom: 1em;
}
#myDiv {
border: 1px solid black;
background-color: white;
width: 100px;
height: 100px;
}
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require(["dojo/on", "dojo/topic", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"],
function(on, topic, domConstruct, dom) {
var alertButton = dom.byId("alertButton"),
createAlert = dom.byId("createAlert");
on(alertButton, "click", function() {
// When this button is clicked,
// publish to the "alertUser" topic
topic.publish("alertUser", "I am alerting you.");
});
on(createAlert, "click", function(evt){
// Create another button
var anotherButton = domConstruct.create("button", {
innerHTML: "Another alert button"
}, createAlert, "after");
// When the other button is clicked,
// publish to the "alertUser" topic
on(anotherButton, "click", function(evt){
topic.publish("alertUser", "I am also alerting you.");
});
});
// Register the alerting routine with the "alertUser" topic.
topic.subscribe("alertUser", function(text){
alert(text);
});
});
</script>
</head>
<body>
<button id="alertButton">Alert the user</button>
<button id="createAlert">Create another alert button</button>
</body>
</html>구독/발표 모드는 테마에 의해 이벤트와 이벤트 처리 함수를 연결합니다.테마 수신을 멈추고 싶으면, topic.subscribe 방법은 대상을 되돌려줍니다. 이 대상은remove 방법을 가지고 있어 해당하는 처리 프로그램을 삭제할 수 있습니다.
dojo.subscribe = function(/*String*/topic,/*Object|null*/context,/*String|Function*/method)
subscribe 함수는 특정한 테마를 구독하는 데 사용됩니다.매개 변수 topic는 테마 이름을 표시하고 문자열입니다.context는 테마를 받은 후 호출된 이벤트 처리 함수가 있는 대상이고function은 이벤트 처리 함수 이름입니다.
dojo.publish = function(/*String*/topic,/*Array*/args)
어떤 주제를 발표하기;매개 변수 topic는 주제의 이름으로args는 주제 처리 함수에 전달할 매개 변수를 나타낸다. 이것은 하나의 수조로 여러 개의 매개 변수를 이벤트 처리 함수에 전달할 수 있다.
참고 문헌: 1.http://dojotoolkit.org/documentation/tutorials/1.9/events/
2.http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro3/
이 문서는 "IT 기술 학습 및 커뮤니케이션"블로그에 게재되었으므로 전재를 사절합니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Dojo 학습지 (4): NodeList 확장dojo/query는 검색 결과와 일치하는 모든 노드로 구성된 그룹을 되돌려줍니다.이 수조는 실제적으로 특수한 수조 대상이라고dojo/NodeList라고 하는데, 이 수조 대상에는 그 중의 노드를 편리하게 조작할 수...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
