我的事件系统的例子
最普通的mousemove支持：
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>我的事件系统 by 司徒正美</title>
<%= javascript_include_tag "dom.1.0.1.js" %>
<script type="text/javascript">
dom.ready(function(){
dom("#outer").mousemove(function(e) {
dom(this).html(e.pageX+" "+e.pageY)
});
dom("h1").click(function(e) {
alert(e.type+e.target.innerHTML)
});
});
/*
说到anti pattern，我最喜欢这几条：
* 引擎室里的船长（Captain in the engine room）：团队带头人把时间和精力全花在技术问题上，没有人开船
* 死亡征途（Death march）：除了CEO，每个人都知道这个项目会完蛋。但是真相却被隐瞒下来，直到大限来临
* 海鸥管理（Seagull management）：飞进来，弄得鸡飞狗跳、一片儿狼藉，然后就拍拍屁股走人
* 大泥球（Big ball of mud）：系统的结构不清晰
一头宅熊、开源支持者、P2P拥护者；
Google粉，FF粉，桂林米粉；FQ运动爱好者，以及アナキズム；马勒戈壁驻华事处干事；最近添加眼镜属性（据说原因是很萌）。
“做成一件事里面有偶然的因素也有必然的因素，我们所要做的就是提取这些必然的因素，增加我们以后成功的概率。 ”
var ns = { xhtml: "http://www.w3.org/1999/xhtml" },
prefix = (document.documentElement.namespaceURI === ns.xhtml)? "xhtml:" : ""
*/
</script>
<style title="text/css">
#outer {
width:150px;
height:150px;
background:red;
padding:20px;
}
#inner {
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<h1>司徒正美:mousemove事件 </h1>
<div id="outer">
<div id="inner"></div>
</div>
</html>
实现在标准浏览器下fire mouseenter
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>我的事件系统 by 司徒正美</title>
<%= javascript_include_tag "dom.1.0.1.js" %>
<script type="text/javascript">
dom.ready(function(){
dom("#inner").mouseenter(function(e){
alert(e.type+"这是mouseenter")
});
dom("#inner").mouseover(function(e){
alert(e.type+"这是mouseover")
});
dom("#inner").fire("mouseenter");
});
</script>
<style title="text/css">
#outer {
width:150px;
height:150px;
background:red;
padding:20px;
}
#inner {
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<h1>司徒正美:实现在标准浏览器下fire mouseenter </h1>
<div id="outer">
<div id="inner"></div>
</div>
</html>
实现在标准浏览器下unbind mouseenter
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>我的事件系统 by 司徒正美</title>
<%= javascript_include_tag "dom.1.0.1.js" %>
<script type="text/javascript">
dom.ready(function(){
dom("#inner").mouseenter(function(e){
alert(e.type+"这是mouseenter")
});
dom("#inner").mouseover(function(e){
alert(e.type+"这是mouseover")
});
dom("#inner").unbind("mouseenter");
});
</script>
<style title="text/css">
#outer {
width:150px;
height:150px;
background:red;
padding:20px;
}
#inner {
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<h1>司徒正美:实现在标准浏览器下unbind mouseenter</h1>
<div id="outer">
<div id="inner"></div>
</div>
</html>
主要处理代码：
//选取可用的处理体（安装器，卸载器，包装器）
special = dom.events.special[ type ] || {};
//选取可用的事件类型，如mouseenter在标准浏览器下就不能用，需要用mouseover冒充
origType = type;
type = special.mirror || type;
if ( !events[ type ] ) continue//如果不为数组跳过
//如果没有指定handler，则移除所有的，直接赋为[]
//如果没有指定handler并且使用冒充事件，则通过origType !== handleObj.type排除
//如果指定handler,则通过handler.uuid !== handleObj.uuid排除
events[type] = handler ? events[type].filter(function(h) {
return handler.uuid !== h.uuid
}) : (origType !== type) ? events[type].filter(function(h) {
return origType !== h.type
}) : [];
实现fire unbind 自定义事件，并在文档树中冒泡或阻止冒泡。
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>我的事件系统 by 司徒正美</title>
<%= javascript_include_tag "dom.1.0.1.js" %>
<script type="text/javascript">
dom.ready(function(){
dom("#inner").bind("myEvent.a",function(e,message1,message2) {
// e.stopPropagation();
alert(message1 + ' inner1 ' + message2);
});
dom("#inner").bind("myEvent.a",function(e,message1,message2) {
alert(message1 + ' inner2 ' + message2);
});
dom("#outer").bind("myEvent.a",function(e,message1,message2) {
alert(message1 + ' outer ' + message2);
});
// dom("#inner").unbind("myEvent.a");
dom("#inner").fire("myEvent.a","hello","world");
// dom("#outer").fire("myEvent.a","hello","world");
});
</script>
<style title="text/css">
#outer {
width:150px;
height:150px;
background:red;
padding:20px;
}
#inner {
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<h1>司徒正美:实现fire unbind 自定义事件，并在文档树中冒泡或阻止冒泡 </h1>
<div id="outer">
<div id="inner"></div>
</div>
</html>
主要处理代码：
if ( type.indexOf(".") !== -1 ) {
type = type.split(".").shift();
}
event = dom.Event(type);
args = [event].concat(args);
//判定对应的回调函数列队是否存在
if(!(dom.store(obj, "events") || {})[ event.type ]) return
while(!event.isPropagationStopped() && obj){
dom.events.handle.apply( obj,args);
obj = obj.parentNode || (obj != window) && window
}
实现fire unbind mousewheel。
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>mousewheel的事件分派 by 司徒正美</title>
<%= javascript_include_tag "dom.1.0.1.js" %>
<script type="text/javascript">
dom.ready(function(){
var counterDelta = 0;
dom(document).mousewheel(function(e){
counterDelta += e.wheelDelta
dom("#wheelDelta").html(counterDelta+ (e.wheelDelta > 0? " up":" down"))
});
// dom(document).unbind("mousewheel")
// dom(document).fire("mousewheel")
});
</script>
<style title="text/css">
</style>
</head>
<body>
<h1>司徒正美:mousewheel事件 </h1>
<div id="wheelDelta">滚轮事件</div>
</body>
</html>
主要处理代码：
if(!eventSupported("mousewheel")){
dom.events.special.mousewheel = {
mirror:"DOMMouseScroll"
}
}
实现事件代理与反代理。
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>实现事件代理与反代理 by 司徒正美</title>
<%= javascript_include_tag "dom.1.0.1.js" %>
<script type="text/javascript">
dom.ready(function(){
var a = function(e){
e.stopImmediatePropagation();
alert("111"+e.target+e.type)
}
dom("input,select,textarea").delegate("change",a);
dom("input,select,textarea").delegate("change",function(e){
alert("222"+e.type)
});
// dom("input,select,textarea").undelegate("change",a);
});
</script>
</head>
<body>
<h1>司徒正美:实现事件代理与反代理</h1>
<form action="">
<fieldset><legend>实验2</legend>
<select name="sweets" multiple="multiple" id="bbb" >
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select><br>
<input type="file"/><br/>
<input type="radio" name="r" >
<input type="radio" name="r" >
<input type="radio" name="r" ><br>
<input type="checkbox" name="ddd" >
<input type="checkbox" name="ddd" ><br>
<input value="文本域" id="eee" ><br>
<textarea>文本区</textarea>
</fieldset>
</form>
</body>
</html>
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>mousewheel的事件分派 by 司徒正美</title>
<%= javascript_include_tag "dom.1.0.1.js" %>
<%= javascript_include_tag "jQuery1.42.js" %>
<script type="text/javascript">
dom.ready(function(){
dom("h1").delegate("click",function(e){
alert(e.currentTarget)
alert(e.target)
});
dom("h2").click(function(e){
alert(e.currentTarget)
alert(e.target)
});
dom("#outer").delegate("mousemove",function(e) {
dom(this).html(e.pageX+" "+e.pageY)
});
dom("#focus").delegate("focus",function(e) {
alert(e.target.innerHTML)
});
// dom("#focus").undelegate("focus")
// dom("#outer").undelegate("mousemove")
// $(document).delegate("#outer", "mousemove", function(e){
// $(this).html(e.pageX+" "+e.pageY)
// });
});
</script>
<style type="text/css">
#outer {
width:150px;
height:150px;
background:red;
padding:20px;
}
#inner {
width:100px;
height:100px;
background:green;
}
#focus {
width:400px;
height:50px;
background:pink;
}
</style>
</head>
<body>
<h1>司徒正美:事件代理 </h1>
<h2>司徒正美:事件绑定 </h2>
<div id="outer">
<div id="inner"></div>
</div>
<div id="focus">获得焦点</div>
</body>
</html>
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
浙公网安备 33010602011771号