javascript权威指南第13章 事件示例代码
Posted 千面佛缘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript权威指南第13章 事件示例代码相关的知识，希望对你有一定的参考价值。
html 部分
<!DOCTYPE html>
<html>
<head>
<title>Event Bubling Example</title>
</head>
<body>
<!--事件冒泡 与事件捕捉 顺序相反-->
<!--事件冒泡
1 <div>
2 <body>
3 <html>
4 document
-->
<!--事件捕捉
1.document
2.html
3.body
4.div
-->
<div id="myDiv" onclick="showMessage();">Clike Me</div>
<input type="button" value="click me" onclick="alert(this.value);" />
<!--如果函数在函数未定义前单击不会抛出错误-->
<input type="button" value="click me" onclick="try{showMessage();} catch(ex){console.log(ex);}" />
<input type="button" value="myBtn" id="myBtn"/>
<input type="button" value="myBtn2" id="myBtn2" />
<input type="button" value="IEEevent" id="myBtn3" />
<input type="button" value="13.3.1 DOM中的事件对象" id="myBtn4" />
<a href="http://www.baidu.com" id=‘link‘> link </a>
<div id="myDiv2" >
Right click or Ctrl+click me to get a custom context menu.
<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>
</div>
<script type="text/javascript" src="event.js" ></script>
</body>
</html>
js 部分
function showMessage() {
alert("Hello world!");
}
//alert(this.value) 匿名函数thi.value翻译 from 是所属表单
// function(){
// with(document)
// {
// with(this.form)
// {
// with(this)
// {
// //元素属性值
// }
// }
// }
// }
//13.2.2
var btn = document.getElementById("myBtn");
btn.onclick = function () {
alert("Clicked");
alert(this.id);
btn.onclick = null; //事件删除
}
//13.2.3 DOM2级事件处理程序
btn.addEventListener(‘click‘, function () {
alert(this.id);
}, false);
btn.addEventListener(‘click‘, function () {
alert("Hello wolrd!");
}, false);
btn.removeEventListener(‘click‘, function () { alert(this.id); }, false); //此处无法删除事件，因为事件引用不同。
//btn.onclick =null; //此处也无用，因为事件监听是属于一个观察者模式，所以这里删除btn本身的事件无法达到删除监听设置的事件
//下属方式可以实现增加和删除事件
//实现事件监听和移除
var btn2 = document.getElementById("myBtn2");
var handler = function () { alert(this.id); };
btn2.addEventListener(‘click‘, handler, false);
//btn2.removeEventListener(‘click‘,handler,false); //有效
//13.2.4 IE事件处理程序
var btn3 = document.getElementById("myBtn3");
//下面代码在IE11中已经不支持，IE11支持 addEventListener
// btn3.attachEvent(‘onclick‘,function(){
// alert(‘clicked‘);
// });
// var handler2 = function(){alert(‘Clicked‘);};
// btn3.attachEvent(‘onclick‘,handler2);
// btn3.detachEvent(‘onclick‘,handler2);
//13.2.5 跨浏览器的事件处理程序
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent(‘on‘ + type, handler);
}
else {
element[‘on‘ + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent(‘on‘ + type, handler);
}
else {
element[‘on‘ + type] = null;
}
}
};
var handler = function () { alert(‘Clicked‘); };
EventUtil.addHandler(btn3, ‘click‘, handler);
//EventUtil.removeHandler(btn4,‘click‘,handler);
//13.3 事件对象
// 13.3.1 DOM中的事件对象
// 属性方法 类型 读写 说明
// bubbles Boolean 只读 表明事件是否冒泡
// cancelable Boolean 只读 表明是否可以取消事件的默认行为
// currentTarget Element 只读 其事件处理程序应当正在处理事件的那个元素
// defaultPrevented Boolean 只读 为true表示已经调用了preventDefault() DOM3级事件中新增
// detail Integer 只读 与事件相关的详细信息
// eventPhase Integer 只读 调用事件处理程序的阶段：1表示事件捕捉阶段，2表示 "处于目标" 3表示冒泡阶段
// preventDefault Function 只读 取消事件的默认行为,如果cancelable是true,则可以使用这个方法
// stopImmediatePropagetion Function 只读 取消事件的进一步捕获或者冒泡，同时阻止任何事件处理程序被调用 DOM3级事件中新增
// stopPropagation Function 只读 取消事件的进一步捕捉或冒泡。如果bubbles 为true 则可使用该方法
// target Element 只读 事件的目标
// trusted Boolean 只读 为true表示事件是浏览器生成的，为false表示事件是有开发人员通过avascript 创建的 DOM3 中新增
// type string 只读 触发事件的类型
// view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window 对象
//事件冒泡到body click
// document.body.onclick = function (event) {
// alert(event.currentTarget === document.body); //当前处理事件的元素是body
// alert(this === document.body);
// alert(event.target === document.getElementById("myBtn")); //事件目标，由谁触发
// }
var btn4 = document.getElementById("myBtn4");
var handler4 = function (event) {
switch (event.type) {
case "click":
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor = ‘red‘;
break;
case "mouseout":
event.target.style.backgroundColor = ‘‘;
break;
}
}
btn4.onclick = handler4;
btn4.onmouseover = handler4;
btn4.onmouseout = handler4;
var link = document.getElementById("link");
link.onclick = function (event) {
if (event.cancelable) {
event.preventDefault(); //取消事件默认行为
}
event.stopPropagation(); //取消事件向下冒泡
};
//13.3.2 IE中的事件对象 （IE11版本都已支持DOM2 DOM3 的特性即html5 等标准）
// 属性/方法 类型 读写 说明
// cancelBubble Boolean 读/写 默认为false ,但将其设置为true就可以取消事件冒泡
// 与 DOM 中的stopPropagation() 方法相同
// returnValue Boolean 读/写 默认值为true ,但将其设置为false 就可以取消事件的默认行为
// 与DOM中的preventDefault() 方法相同
// srcElement Element 只读 事件的目标（与DOM中的target属性相同）
// type string 只读 被触发的事件类型
// 13.3.3 跨浏览器的事件对象
var EventUtilExt = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent(‘on‘ + type, handler);
}
else {
element[‘on‘ + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent(‘on‘ + type, handler);
}
else {
element[‘on‘ + type] = null;
}
},
getEvent: function (event) {
return event ? event : window.event; //ie 低版本只支持window.event
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelable = true;
}
}
};
// btn4.onclick =function(event){
// event = EventUtilExt.getEvent(event);
// }
// 13.4 事件类型
// 13.4.1 UI事件
// load : 当页面完全加载后在window 上面触发
// unload: 当页面完全卸载后在window 上面触发
// abort: 当用户停止下载过程时，如果嵌入的内容没有加载完成，则在<object> 元素上面触发
// error: 当发生javascript错误时候在window 上面触发
// select: 当用户选择文本框（input 或 texterea) 中一或者多个字符时触发
// resize: 当窗口或者框架的大小发生变化时在window或者框架上触发。
// scroll: 当用户滚动带滚动条的元素的内容时候触发。在该元素上触发
// document.implementation.hasFeature("HTMLEvents","2.0") //确定浏览器是否支持DOM2级事件规定的HTML事件
// EventUtil.addHandler(window, ‘load‘, function (event) {
// alert(‘Loaded‘);
// });
//13.4.2 焦点事件
// blur 元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持它
// DOMFocusIn: 在元素或得焦点时候触发，这个事件与html事件focus 等价，但会冒泡，只有Opera 支持 DOM3级别已废除，选择focusin
// DOMFocusOut: 在元素失去焦点时候触发，DOM3已废除 支持focusout
// focus : 获得焦点 元素获得焦点时候触发，不会冒泡。所有浏览器支持
// focusin : focus等价，但会冒泡
// focusout : 失去焦点时触发与blur 等价
//13.4.3 鼠标与滚动轮事件
// click 单击
// dbclick 双击
// mousedown 按下鼠标任意键，不能通过键盘触发该事件
// mouseenter 鼠标首次移动到元素内触发，鼠标DOM2 不支持，DOM3 纳入标准，不冒泡
// mouseleave 鼠标离开元素时候触发
// mousemove 鼠标在元素内部移动时候触发。不能通过键盘触发
// mouseout 鼠标指针位于一个元素上方，然后用户将其以入到另外一个元素时候触发
// mouseover 鼠标在一个元素外部，然后用户首次以入一个元素边界之内时候触发
// mouseup 在用户释放鼠标按钮时候触发，不能通过键盘触发这个事件
document.implementation.hasFeature(‘MouseEvents‘, "2.0"); //检查DOM2 是否支持鼠标事件
document.implementation.hasFeature(‘MouseEvent‘, "3.0"); //检查DOM3 是否支持鼠标事件
//event.clientX event.ClientY 从可视口（可见区域的位置)基于 窗口左上角计算
//event.pageX event.pageY 基于页面计算的位置，当视图没有滚动条上海clientx =pagex;
//event.screenX event.screenY 基于屏幕的位置计算
//DOM通过对象的relateTarget属性提供相关元素信，这个属性只对于mouseover mouseout 事件才有效
EventUtilExt.getRelateTarget = function (event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
}
else if (element.fromElement) {
return event.fromElement;
} else {
return null;
}
}
//鼠标按钮
EventUtilExt.getButton = function (event) {
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button; //原生DOM 模式
} else {
//IE 模式下的button
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;
}
}
}
//鼠标滚动
//mousewheel
//键码 event.keyCode 参考键码表 event.charcode
//textInput 事件
//btn.addEventListener(‘textInput‘,function(event){},false);
//textInput 事件中包含 属性 inputMethod 表示文本输入文本框的方式
//复合事件
//compositionStart : 在IME的文本复合系统打开时触发，表示要输入了
//compositionupdate: 在向输入字段中插入新字符时候触发，
//compositioned : 在IME的文本复合系统关闭时触发，表示返回正常的键盘输入状态
//document.implementation.hasFeature("CompositionEvent","3.0"); 确定浏览器是否支持复合事件
//13.4.6 变动事件
document.implementation.hasFeature("MutationEvents","2.0"); //检查浏览器是否支持变动事件
// DOMSubtreeModified: 在DOM结构中发生任何变化时触发，这个事件在其他任何事件触发后都会触发
// DOMNodeInserted: 在一个节点作为一个子节点插入到另外一个节点时触发
// DOMNodeRemoved: 在节点从其父节点中被移除时触发
// DOMNodeInsertIntoDocument : 在一个节点被直接插入文档或者通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发
// DOMAttrModified : 在特性被修改之后触发
// DOMCharacterDataModified : 在文本节点的值发生变化时触发
//13.4.7 HTML5事件
//contextmenu 鼠标右键
EventUtilExt.addHandler(window,‘load‘,function(event){
var div = document.getElementById("myDiv2");
EventUtilExt.addHandler(div,‘contextmenu‘,function(event){
event =EventUtilExt.getEvent(event);
EventUtilExt.preventDefault(event);
var menu = document.getElementById("myMenu");
menu.style.left = event.clientX+"px";
menu.style.top = event.clientY+"px";
menu.style.visibility =‘visible‘
});
EventUtilExt.addHandler(document,‘click‘,function(){
document.getElementById("myMenu").style.visibility =‘hidden‘;
});
});
//beforeunload 设计目的是让开发人员有可能在页面卸载前阻止这一操作
//readystatechange 含（uninitialized loading loaded interactive(交互) complete)
//pageshow pagehide
//hashchange 事件 以便在URL的参数列表（及URL中#号后面的所有字符串发生变化时通知开发人员
//之所以新增这个事件，是因为在Ajax应用中，开发人员经常利用URL参数列来保存状态信息或导航
以上是关于javascript权威指南第13章 事件示例代码的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 权威指南第 13 章 定制 input 元素 学习笔记——input元素超详细解析