event

时间 2019-11-12

标签 event 繁體版

原文原文链接

<!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">javascript

=========================================================html

冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡java

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

DOM事件流：document-html-body-div-body-html-document浏览器

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

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

----------------------------------------------------------dom

经过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不支持
}

一、currentTarget 至关于对象 this //IE不支持

二、target 至关于包含事件的实际目标（事件的目标节点） //IE不支持
二、srcElement //仅IE支持

cancelable + preventDefault 一块儿使用 //DOM
returnValue //IE

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

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

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

六、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对象的一个属性存在。

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

四、preventDefault 取消浏览器默认行为 //IE不支持
四、returnValue false就能够取消事件的默认行为 //仅IE支持

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

cancelable + preventDefault 一块儿使用 //DOM
returnValue //IE
三、cancelable 返回布尔值，若是为true才能使用 preventDefault //IE不支持
若是flase不能使用 preventDefault //IE无此属性

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

二、target 至关于包含事件的实际目标（事件的目标节点） //IE不支持
二、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>