event

转载

mob604756fc844f 2013-11-20 16:18:00

文章标签 html 事件处理 safari 加载事件流 文章分类 MySQL 数据库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Index</title>
</head>
<body>
<div id="d-0-0">
<div id="d-1-1">
<div id="d-1-1-1"></div>
<div id="d-1-1-2"></div>
</div>
<div id="d-1-2"></div>
<div id="d-1-3"></div>
</div>
<script type="text/javascript">

=========================================================

冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡

事件流描述的是从页面中接收事件的顺序。
IE事件流是事件冒泡流，而Netscape的事件流是事件捕获流。
冒泡：div-body-html-document
捕获：document - html - body - div

DOM事件流：document-html-body-div-body-html-document

=======================*DOM0级事件处理程序*=================
btn.onclick = function(){
alert(1)
}
//btn.onclick = null;

=======================*DOM2级事件处理程序*=================
addEventListener()
removeEventListener()
所有DOM节点都包含这两个方法,接受3个参数
如果是true,表示捕获
如果是false,表示冒泡

----------------------------------------------------------

通过addEventListener添加事件处理程序只能使用removeEventListener来移除
移除时传入的参数与添加处理程序时使用的参数相同。
addEventListener添加的匿名函数将无法移除。

var btn = document.getElementById('mybtn');
btn.addEventListener('click',function(){alert(1)},false)
btn.removeEventListener('click',function(){alert(1)},false) //移除不了

this = btn
***************this的作用域是元素的作用域****************

btn.addEventListener('click',handler1,false)
btn.removeEventListener('click',handler2,false) //移除有效

***************执行顺序***********************
先执行handler1 在执行handler2

=======================*IE事件处理程序*=================
执行顺序与DOM不同
this指针不同

IE只支持冒泡
attachEvent()
detachEvent()
var btn = document.getElementById('mybtn');
btn.attachEvent('onclick',function(){alert(1)})
btn.attachEvent('onclick',function(){alert(2)})
***************执行顺序***********************
先执行2 在执行1

注意attachevent的第一个参数是"onclick"，而非DOM的addEventListener中的click;

attachEvent方法中 this=window
***************this的作用域是window****************

getEvent:function(event){
return event?event:window.event; //DOM0事件 window.event = IE
},

//Get Target
getTarget:function(event){
return event.target||event.srcElement; // srcElement = IE
},

//Prevent DefaultEvent
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
} else{
event.returnValue = false; //IE
}
},

//stopPropagation
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble=true; //IE
}
},

getCharCode:function(){
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
}

}

========================== DOM 事件对象 Event ================================
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。
function s(event){
alert(event.type) //DOM获取event方法 ie不支持
}

1、currentTarget 相当于对象 this //IE不支持

2、target 相当于包含事件的实际目标（事件的目标节点） //IE不支持
2、srcElement //仅IE支持

cancelable + preventDefault 一起使用 //DOM
returnValue //IE

3、cancelable 返回布尔值，如果为true才能使用 preventDefault //IE不支持默认为true
如果flase不能使用 preventDefault //IE无此属性

4、preventDefault 取消浏览器默认行为 //IE不支持
4、returnValue //仅IE支持

5、cancelBubble //IE支持
5、stopPropagation 取消进一步的时间捕获或冒泡 //IE不支持

6、eventPhase 返回结果 1.如果捕获阶段调用
2.如果事件处理程序处于目标对象上
3.冒泡阶段事件处理阶段

//DOM 事件标准定义的属性
type 返回当前 Event 对象表示的事件的名称。
------------------------------------------------------------------------

//IE 不支持这些方法
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。
------------------------------------------------------------------------
bubbles 返回布尔值，指示事件是否是起泡事件类型。
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素（事件的目标节点）。
timeStamp 返回事件生成的日期和时间。

//IE 支持的属性
cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。
对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。

offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。

srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

========================== ******IE 事件对象 Event********* ===============================
要访问IE中的event对象有几种不同方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加处理程序时，
event对象作为window对象的一个属性存在。

5、cancelBubble 阻止必须把该属性设为 true。
IE不支持捕获只能用来阻止冒泡 //IE支持
5、stopPropagation 取消进一步的时间捕获或冒泡 //IE不支持

4、preventDefault 取消浏览器默认行为 //IE不支持
4、returnValue false就可以取消事件的默认行为 //仅IE支持

--------------------------------------------------------------------------------

cancelable + preventDefault 一起使用 //DOM
returnValue //IE
3、cancelable 返回布尔值，如果为true才能使用 preventDefault //IE不支持
如果flase不能使用 preventDefault //IE无此属性

---------------------------------------------------------------------------------

2、target 相当于包含事件的实际目标（事件的目标节点） //IE不支持
2、srcElement //仅IE支持

btn.onclick = function(){
var event = window.event; //DOM0 IE获取event方法
event.srcElement == this;
btn = this;
}

btn.attachEvent ("onclick",function(event){ //****IE attachEvent加事件可以不加参数event****
//alert(event.type) //事件处理程序使用attachevent添加的传入参数
event.srcElement
window = this
})

===============================鼠标事件================================
click
dblclick
mousedown //按下
mouseout //鼠标从某元素移开。
onmouseover //鼠标移到某元素之上。
mouseup //鼠标按键被松开。
mousemove //鼠标被移动。

事件的触发顺序

mousedown //按下
mouseup //鼠标按键被松开。
click
mousedown //按下
mouseup //鼠标按键被松开。
dblclick

====================================================================

clientX //客户区坐标位置相对浏览器左上角
clientY //客户区坐标位置

screenX //屏幕坐标位置相对显示器屏幕左上角
screenY //屏幕坐标位置

----------------------------------------------------------

这些属性包含的都是布尔值，如果相应的键被按下，则值为true,否则值为false
altKey //返回当事件被触发时，"ALT" 是否被按下。
shiftKey //返回当事件被触发时，"SHIFT" 键是否被按下。
ctrlKey //返回当事件被触发时，"CTRL" 键是否被按下。
metaKey //返回当事件被触发时，"meta" 键是否被按下。 IE不支持

=========================================================================

不支持IE
relatedTarget
对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
用户：event.relatedTarget.tagName

支持IE
fromElement 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
toElement

========================button 事件属性==================================
//DOM参数描述
0 规定鼠标左键。
1 规定鼠标中键。
2 规定鼠标右键。

//IE参数
参数描述
1 规定鼠标左键。
4 规定鼠标中键。
2 规定鼠标右键。

0 没按下按钮
1 规定鼠标左键
2 规定鼠标右键
3 同时按下主次键。
4 规定鼠标中键。
5 同时按下左中键。
6 同时按下右中键。
7 同时按下3个键

document.implementation //正在运行的程序
hasFeature() //方法确定 DOM 的实现是否支持某个特性。

document.implementation.hasFeature('omuseEvents','2.0')
//检查 DOM implementation 是否可执行指定的特性和版本。
http://www.w3school.com.cn/xmldom/met_domimplementation_hasfeature.asp

IE属性用处不大
altLeft
ctrlLeft
offsetX
offsetY
shiftLeft

===============================================================

onkeydown //‘任意键’按下触发
onkeypress //‘字符键’按下触发
onkeyup //松开键盘触发

keyCode表
//在Firefox和Opera中，按分号键时keyCode值为59，也就是ASII中分号的编码；但IE和Safari返回186，即键盘中按钮的键码。
//在Safari3之前的版本中，上、下、左、右箭头和上、下翻页键返回大于63000的值。在Opera9.5之前的版本中，会将非数字字母键的keyCde设置为等于相应字符的ASCII编码，因此小于键返回44而不是188。
//在Safari3之前的版本中，不会因为按下了制表、上档、控制或替代键而触发keydown和keyup事件。
---------------------------------------------------------------------------------------------------
event.charCode //firefox chrome safari 这属性只有在发生keypress事件时才包含值
event.keycode //IE和opera 则是在中保存ASCII编码
跨浏览器方式取得字符编码，首先检测charCode属性是否可用。

String.fromCharCode() //转换成实际的字符

textInput 事件 //DOM3 safari3 chrome 调用event.data

==============================================================================================

HTML事件：
load：当页面完全加载后在window上面触发，
当所有框架都加载完毕时在框架上面触发，
当图像都加载完毕时在<img> 元素上面触发，
或者当嵌入的内容加载完毕时在<object>元素上面触发。

EventUtil.addHandler(window,'load',function(event){
alert('loaded!')
})

unload：当页面完全卸载后在window上面触发，
当所有框架都卸载后在框架集上面触发，
当嵌入的内容卸载完毕后在<object>元素上面触发。

abort：当用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发。

error：当发生JavaScript错误时在window上面触发，
当无法加载图像时在<img>元素上面触发，
当无法加载嵌入内容时在<object>元素上面触发，
当有一或多个框架无法加载时在框架集上面触发。

select：当用户选择文本框（<input>或<textarea>）中的一或多个字符时触发。

resize：当窗口或框架的大小变化时在window或框架上面触发。

scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。

focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。

blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。

http://www.w3school.com.cn/xmldom/met_domimplementation_hasfeature.asp
var isSupported = document.implementation.hasFeature('HTMLEvents','2.0');

--------------------------------------------------------------------------

DOM2级事件
应该在*document*而非window上面触发load事件，
但是，所欲浏览器都在window上实现该事件，以确保向后兼容

--------------------------------------------------------------------------

*************************************************************************
新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载
*************************************************************************
EventUtil.addHandler(window,'load',function(){
var image = new Image();
console.log(image)
EventUtil.addHandler(image,'load',function(event){
alert('载入成功')

})
document.body.appendChild(image) //先加入到DOM
image.src = 'http://img2.fengniao.com/product/43/487/ce5QnYkiyYVlQ.jpg' //在加地址只要设置了src属性就会开始下载

})

//在不属于DOM文档的图像（包括未添加到文档的<img>元素和Image()对象）上触发load事件时，IE不会生成event对象。

---------------------------------------------------------------------------

*************************************************************************
<script> <style>元素的src属性并将该元素添加到文档后，才会开始下载JavaScript文件。
*************************************************************************

resize：当窗口或框架的大小变化时在window或框架上面触发。
与其他发生在window上的事件类似，在兼容DOM的浏览器中，传入事件处理程序中的event对象有一个targer属性，值为document；而IE则未提供任何属性关于何时会触发resize事件，不同浏览器有不同的机制。
IE、Safari、Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件，然后随着变化不断重复触发。
Firefox则只会在用户停止调整窗口大小时才会触发resize事件。由于存在这个差别，应该注意不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行，从而导致浏览器反映明显变慢。
浏览器窗口最大化时也会触发resize事件。

============================================================================
scroll 滚动事件

EventUtil.addHandler(window, "scroll", function () {
if (document.compatMode == "CSS1Compat") {
alert(document.documentElement.scrollTop); //标准模式 'CSS1Compat' strict mode
} else {
alert(document.body.scrollTop); //混杂模式 'BackCompat' quirks mode
}
})

虽然scroll事件在window对象上发生的，但它实际表示的则是页面中相应元素的变化。
在混杂模式下，可以通过body元素的scrollLeft和scrollTop来监控到这一变化；
而在标准模式下，除Safari之外的所有浏览器都会通过html元素来反映这一变化（Sfari仍然基于body跟踪滚动位置），如下面例子所示：
以上代码指定的事件处理程序会输出页面的垂直滚动位置——根据呈现模式不同使用了不同的元素。
由于Safari 3.1之前的版本不支持document.compatMode，因此就版本的浏览器就会满足第二个条件。
与resize事件类似，scroll事件也会在文档被滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单。

================================================================================

变动事件 IE不支持

DOM2级定义了如下变动事件
（1）DOMSubtreeModified：在DOM结构中发生的任何变化时触发。这个事件在其他任何事件触发后都会触发。
（2）DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
（3）DOMNodeRemoved：在节点从其父节点中被移除时触发。 //这个事件的目标(event.target)是被移除的节点

（4）DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入到文档之后触发。这个事件在DOMNodeInserted之后触发。
（5）DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发。
（6）DOMAttrModified：在特性被修改之后触发。
（7）DOMCharacterDataModified:在文本节点的值发生变化时触发。

var isSupported = document.implementation.hasFeature('MutationEvents','2.0');

========================================================================================

contextmenu 事件

EventUtil.addHandler(div, "contextmenu", function (event) {
event = Event.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById('myMenu')
menu.style.left = event.clientX + 'px'
menu.style.top = event.clientY + 'px'
})

EventUtil.addHandler(document, "click", function (event) {
...style.visibilty='hidden'
})

</script>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。