js 구성 요소 화 팀 개발 의 사용자 정의 이벤트 demo
// : ， ( )
window.onload = function () {
var d1 = new Drag();
d1.init({ //
id: 'div1'
});
var d2 = new Drag();
d2.init({ //
id: 'div2'
});
bindEvent(d2, 'toDown', function () {
document.title = 'hello';
});
bindEvent(d2, 'toDown', function () {
document.body.style.background = 'black';
});
var d3 = new Drag();
d3.init({ //
id: 'div3'
});
bindEvent(d3, 'toDown', function () {
document.title = ' ';
});
bindEvent(d3, 'toUp', function () {
document.title = ' ';
});
var d4 = new Drag();
d4.init({ //
id: 'div4'
});
bindEvent(d4, 'toUp', function () {
document.title = 'byebye';
});
};
function Drag() {
this.obj = null;
this.disX = 0;
this.disY = 0;
this.settings = { //
};
}
Drag.prototype.init = function (opt) {
var This = this;
this.obj = document.getElementById(opt.id);
extend(this.settings, opt);
this.obj.onmousedown = function (ev) {
var ev = ev || window.event;
This.fnDown(ev);
fireEvent(This, 'toDown');
document.onmousemove = function (ev) {
var ev = ev || window.event;
This.fnMove(ev);
};
document.onmouseup = function () {
This.fnUp();
fireEvent(This, 'toUp');
};
return false;
};
};
Drag.prototype.fnDown = function (ev) {
this.disX = ev.clientX - this.obj.offsetLeft;
this.disY = ev.clientY - this.obj.offsetTop;
};
Drag.prototype.fnMove = function (ev) {
this.obj.style.left = ev.clientX - this.disX + 'px';
this.obj.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function () {
document.onmousemove = null;
document.onmouseup = null;
};
function bindEvent(obj, events, fn) {
//obj :
//events :
//fn :
obj.listeners = obj.listeners || {};
obj.listeners[events] = obj.listeners[events] || [];
obj.listeners[events].push(fn);
if (obj.nodeType) {
if (obj.addEventListener) {
obj.addEventListener(events, fn, false);
}
else {
obj.attachEvent('on' + events, fn);
}
}
}
function fireEvent(obj, events) { //
if (obj.listeners && obj.listeners[events]) {
for (var i = 0; i < obj.listeners[events].length; i++) {
obj.listeners[events][i]();
}
}
}
function extend(obj1, obj2) {
for (var attr in obj2) {
obj1[attr] = obj2[attr];
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
