#自定义事件实例
```
<style>
#div1, #div2, #div3, #div4{
width: 100px;
height: 100px;
position: absolute;
}
#div1{
background: #c40000;
}
#div2{
background: green;
left: 100px;
}
#div3{
background: brown;
left: 200px;
}
#div4{
background: blue;
left: 300px;
}
</style>
<script>
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 (e) {
var e = e || window.event;
_this.fnDown(e);
fireEvent(_this, 'toDown');
document.onmousemove = function (e) {
var e = e || window.event;
_this.fnMove(e);
};
document.onmouseup = function () {
_this.fnUp();
fireEvent(_this, 'toUp');
};
return false;
};
};
Drag.prototype.fnDown = function (e) {
this.disX = e.clientX - this.obj.offsetLeft;
this.disY = e.clientY - this.obj.offsetTop;
};
Drag.prototype.fnMove = function (e) {
this.obj.style.left = e.clientX - this.disX + 'px';
this.obj.style.top = e.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function () {
document.onmousemove = null;
document.onmouseup = null;
};
function bindEvent(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];
}
}
</script>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
```
- 01 JS面向对象及组件开发
- 02 传统的过程式编写选项卡
- 03 用面向对象封装通用选项卡
- 04 控制多个选项卡自动播放
- 05 用面向对象编写拖拽
- 06 JS面向对象及组件开发
- 07 hasOwnProperty和constructor的使用
- 08 instanceof运算符的使用
- 09 利用toString做类型判断
- 10 什么是面向对象的继承
- 11 面向对象之拷贝继承
- 12 编写继承的拖拽
- 13 继承的其他形式之类式继承
- 14 继承的其他形式之原型继承
- 15 组件开发是什么
- 16 给拖拽组件配置不同参数
- 17 封装弹框组件
- 18 使用对象标记已弹出弹框
- 19 复杂组件开发之自定义事件
- 20 原生JS实现自定义事件
- 21 自定义事件实例
- 22 基于JQ的选项卡组件开发