事件操作

一、事件流
1.含义：事件流描述的是从页面中接收事件的顺序
2.事件冒泡：是有ie提出的，即事件开始时是由具体的元素接受，然后逐步向上传播到不具体的元素
3.事件捕获：是有NC提出的，即事件开始是有不具体的元素接受，然后逐步向下传播到具体的元素上
4.DOM事件流：“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

二、事件处理程序
1.HTML事件处理程序
a.在标签中直接定义
<script type="text/javascript">
    function showMessage(){
        alert("Hello world!");
    }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
b.缺陷
①存在一定的时差
②这种事件的作用链在不同的浏览器中会造成不同的结果
2.DOM0级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
};
3.跨浏览器
var EventUtil = {
// 添加事件监听
addEvent : function (element, type, handler) {
if (element.addEventListener)
{
element.addEventListener(type, handler, false);
} else if (element.attachEvent)
{
element.attachEvent("on" + type, handler);
}
},
// 解除事件监听
delEvent : function (element, type, handler) {
if (element.removeEventListener)
{
element.removeEventListener(type, handler, false);
} else if (element.detachEvent)
{
element.detachEvent("on" + type, handler);
}
}
}

三、事件对象
var EventUtil = {
// 获取event对象
getEvent : function (event) {
return event ? event : window.event;
},
// 获取事件源
getTarget : function (event) {
return  event.target || event.srcElement;
},、
// 阻止默认行为
stopDefault : function (event) {
if (event.preventDefault)
{
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止冒泡
stopBubble : function (event) {
if (event.stopPropagation)
{
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}

四、事件类型
1.UI事件，是指那些不一定和用户操作有关的事件，如load  unload  DOMActivate  error等
①判断浏览器是否支持DOM2 HTML事件和DOM3UI事件
var isSupported = document.implementation.hasFeature("UIEvent", "3.0");
②load事件，当页面加载完成后（img js css）触发的事件
a.加载img
EventUtil.addHandler(window, "load", function(){
var image = document.createElement("img");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
b.加载JS
EventUtil.addHandler(window, "load", function(){
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
});
c.加载CSS
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
②Unload事件，当从一个页面切换到另一个页面，就会被调用，常常用于清除引用，避免内存泄露
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
③Resize事件，当窗口大小发生改变时触发的事件
EventUtil.addHandler(window, "resize", function(event){
alert("size changed");
});
④Scroll事件，表示页面元素的变化，会在文档被滚动的时候触发。
EventUtil.addHandler(window, "scroll", function(event){
if (document.compatMode == "CSS1Compat"){
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});
2.焦点事件，主要为Blur()和focus()方法
①判断浏览器是否支持焦点事件
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
②获焦与失焦
EventUtil.addHandler(txt, "focus", function(event){
alert("focus");
});
EventUtil.addHandler(txt, "blur", function(event){
alert("blur");
});
3.鼠标与滚轮事件
①判断浏览器是否支持鼠标事件
var isSupported = document.implementation.hasFeature("MouseEvents", "3.0");
②客户区坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Client coordinates: " + event.clientX + "," + event.clientY);
});
③页面坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var pageX = event.pageX,
pageY = event.pageY;
if (pageX === undefined){
pageX = event.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
if (pageY === undefined){
pageY = event.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
}
alert("Page coordinates: " + pageX + "," + pageY);
});
④屏幕坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
⑤修改键
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
if (event.metaKey){
keys.push("meta");
}
alert("Keys: " + keys.join(","));
});
⑥相关元素。例如，将鼠标的光标放在一个div上，那么当他触发事件mouseout时，它的主元素时div，而相关元素则是body；当他触发的事件为mouseover时，它的主目标是body，而相关元素时div。
var EventUtil = {
getRelatedTarget : function (event) {
if (event.relatedTarget)
{
return event.relatedTarget;
} else if (event.toElement)
{
return event.toElement;
} else if (event.fromElement)
{
return event.fromElement;
} else {
return null;
}
}
}
⑦鼠标按钮
var EventUtil = {
getButton : function (event) {
if (document.implementation.hasFeature("MouseEvents", "2.0"))
{
return event.button;
} else {
switch (event.button)
{
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
}
⑧滚轮事件
var EventUtil = {
getWheelDelta : function (event) {
if (event.wheelDelta)
{   // opera 9.5以下
return (client.engine.opera && client.engine.opera < 9.5) ?
- event.wheelDelta : event.wheelDelta;
} else {
// 火狐
return - event.detail * 40;
}
}
}
4.键盘与文本事件   keydown   keyup  keypress 和textInput事件
①键码，就是按键的码号。用keyCode表示
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keyup", function(event){
event = EventUtil.getEvent(event);
alert(event.keyCode);
});
②字符编码
var EventUtil = {
getCharCode : function (event) {
if (typeof event.charCode == "number")
{
return event.charCode;
} else {
return event.keyCode;
}
},
}
③DOM3中添加了一个textInput事件，它不同于keyPress中的textInput事件，它有一个data属性，用于专门识别字符。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "textInput", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
5.事件变动，在DOM结构树发生变化时，会触发一系列的事件
eg: <body>
<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</body>
①删除节点
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument", function(event){
alert(event.type);
alert(event.target);
});
list.parentNode.removeChild(list);
});
③插入节点
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
var item = document.createElement("li");
item.appendChild(document.createTextNode("Item 4"));
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeInserted", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
alert(event.type);
alert(event.target);
});
list.appendChild(item);
});
6.html5事件
①ContextMenu事件，用于何时应该显示上下文菜单，以供开发人员自定义菜单
<body>
<div id="myDiv">Right click or Ctrl+click me to get a custom context menu.
    Click anywhere else to get the default context menu.</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:
                silver">
    <li><a href="http://www.nczonline.net">Nicholas’site</a></li>
    <li><a href="http://www.wrox.com">Wrox site</a></li>
    <li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>
</body>
EventUtil.addHandler(window, "load", function(event){
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "contextmenu", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById("myMenu");
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.visibility = "visible";
});
EventUtil.addHandler(document, "click", function(event){
document.getElementById("myMenu").style.visibility = "hidden";
});
});
②Beforeunload事件，在页面卸载之前调用的事件，其中的event.returnValue表示请求留下的语句
EventUtil.addHandler(window, "beforeunload", function(event){
event = EventUtil.getEvent(event);
var message = "I'm really going to miss you if you go.";
event.returnValue = message;
return message;
});
③DOMContentLoaded事件表示DOM被加载完后触发
④Pageshow和pagehide事件
当页面再次load一个page时，页面会从缓存bfcache中调用内容中的数据、js文件等，这是会触发一个pageshow的事件。该事件的目标元素随时document，但是要添加到window中去。在单击浏览器的前进和后退的按钮时，可以被调用，此现象被称为往返缓存。
(function(){
var showCount = 0;
EventUtil.addHandler(window, "load", function(){
alert("Load fired");
});
EventUtil.addHandler(window, "pageshow", function(){
showCount++;
alert("Show has been fired " + showCount +
" times. Persisted? " + event.persisted);
});
})();

五、内存和性能
1.事件委托，只指定一个事件处理程序，就可以管理某一类型的所有事件
eg: <ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
</ul>
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});

2.移除事件处理程序   当某些特定的事件处理程序没有必要存在的时候，我们可以解除它的绑定事件函数。
<div id="myDiv">
    <input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        //先执行某些操作
        btn.onclick = null; //移除事件处理程序
        document.getElementById("myDiv").innerHTML = "Processing...";
    };
</script>

六、模拟事件，即通过javascript来触发事件，而不是通过用户点击操作浏览器触发
①步骤
a.document.createEvent(字符串),创建并返回一个event对象
b.在创建并返回event对象后，要为其函数进行初始操作
c.触发事件，用btn.dispatchEvent(event);
②模拟单击按钮事件
// DOM中
var btn = document.getElementById("myBtn");
//创建事件对象
var event = document.createEvent("MouseEvents");
//初始化事件对象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
//触发事件
btn.dispatchEvent(event);
// Less IE8中
ar btn = document.getElementById("myBtn");
//创建事件对象
var event = document.createEventObject();
//初始化事件对象
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
//触发事件
btn.fireEvent("onclick", event);
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,560评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,104评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,297评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,869评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,275评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,563评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,833评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,543评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,245评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,359评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,006评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2赞 273
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2赞 268

推荐阅读更多精彩内容

  • DOM操作&事件操作
    1.写一个函数，批量操作 css 2.如何获取 DOM 计算后的样式 window.getComputedStyl...
    leiuno阅读 382评论 0赞 1
  • 事件操作
    duJing阅读 231评论 0赞 0
  • JS事件操作
    DOM 1级方式设置(4种) 通过onclick指定JS函数名称 在onclick中直接写入过程代码 JS中节点....
    kangyiii阅读 394评论 0赞 2
  • JavaScript的DOM事件操作
    DOM0 事件和DOM2级在事件监听使用方式上有什么区别？ DOM0事件有两种写入事件 在标签内写onclick事...
    柏龙阅读 231评论 0赞 2
  • 癌症
    “前几天体检查出癌症来了。” “啊？你小时候没打过疫苗么？” “打过了。医生说可能抗癌基因比较少的缘故。” “那严...
    据一位不轻易吐槽的喔喔吐槽阅读 318评论 0赞 3