Javascript 브라우저 events_javascript 기술 요약

事件本身相当直观，常用的有：

事件	描述
abort	图片被阻止而不能加载
blur,focus	失去焦点，获得焦点
change	适用于表单元素，当元素使其焦点的时候判断是否发生改变
click,dblclick	单击，双击
keydown,keyup,keypress	按下键，键离开，按下键的时候触发，注意keypress只对数字字母键有效
load	加载图片或者页面的时候
mousedown,mouseup	按下键，放开键
mouseover,mouseout	over是当鼠标进入的时候出发，out是离开的时候触发
mousemove	鼠标移动
reset,submit	重置和提交表单

위는 일반적으로 사용되는 이벤트 목록일 뿐입니다. 전체적이고 구체적인 목록을 보려면 관련 매뉴얼을 찾으세요.

1. 레벨 0 DOM의 이벤트 처리
레벨 0 DOM의 이벤트 처리 방법은 비교적 초기 단계이며 현재 IE4.0 클래스 방법부터 널리 사용됩니다. .

1.1 이벤트 등록
다음은 주로 응답 이벤트를 추가하는 방법, 즉 이벤트에 대한 핸들러를 추가하는 방법을 소개합니다.

(1) 인라인 등록

다음 예와 같이 이벤트 응답자를 html 태그의 속성으로 설정하는 것이 가장 간단하며, 이는 코드일 수도 있습니다. 종종 그것은 함수 호출입니다. 이벤트 핸들은 일반적으로 이벤트 이름에 접두사 on을 더한 것입니다.

<title>이벤트 샘플</title> <style type="text/css"> #adiv{ width:200px; height:200px; background-color:#00aa00; } </style> <div id="adiv" onmouseover="this.innerHTML ='OK'"> 에이 </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

이것은 메소드는 매우 간단합니다. 모든 브라우저가 지원하지만 단점은 Javascript 코드와 HTML 코드가 혼합되어 있으며 이벤트 응답자를 동적으로 추가할 수 없으며 여러 응답자를 추가할 수 없다는 것입니다.

(2) 기존 등록

이 모드는 이벤트를 개체의 속성으로 추가합니다. 예:

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]
1.2 이벤트 매개변수(이벤트 객체)

일부 이벤트 핸들러에는 클릭 이벤트가 발생한 위치 등 이벤트에 대한 추가 정보가 필요합니다. 이 정보는 이벤트 매개변수를 통해 이벤트 핸들러에 전달됩니다. IE 이벤트 모델과 W3C 이벤트 모델은 이를 다르게 구현합니다.

IE는 이벤트 객체를 윈도우 객체의 속성으로 사용하고, W3C는 이벤트 객체를 핸들러의 매개변수로 사용합니다. 클릭 이벤트를 예로 들어 IE용 프로그램과 W3C 표준을 지원하는 브라우저를 작성합니다.

<title> </title>이벤트 샘플<style type="text/css"> #adiv{ width:200px; height:200px; background-color:#00aa00; } </style> <div id="adiv" onclick="W3CClick(event)"> </div> <div id="result" style="font-size:small; font-family:Verdana">아 </div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

이 페이지 코드는 클릭 이벤트 개체의 모든 속성이 표시됩니다. 위의 예는 W3C 브라우저에서 사용하는 방법입니다. IE에서 사용하려면 onclick="IEClick()"으로 변경하면 됩니다. W3CClick의 매개변수 이름은 이벤트만 가능합니다. 많은 속성이 인쇄되어 있습니다. FF3.5, Chrome3 및 IE8(표준 모드 및 호환 모드)에서 실행했습니다. 실제로는 이러한 공통 속성만 의미가 있습니다.

altKey, ShiftKey, ctrlKey: Alt, Shift, Ctrl 키를 누를지 여부

clientX, clientY: 클라이언트 영역 좌표(브라우저 창), screenX, screenY: 화면 영역 좌표
type: 이벤트 유형

이벤트 매개변수는 약간 다른 방식으로 전달되지만 크로스 브라우저 코드를 작성할 때 큰 문제를 일으키지는 않습니다. 함수 시작 부분에서 판단해야 합니다. window.event가 정의되어 있는지 확인하면 됩니다. 코드 복사

코드는 다음과 같습니다.


function BothClick(args) {
var evnt = window.event ? window.event : args
alert(evnt.clientX)

}
注册句柄为:

a

如果采用第二种方式注册句柄，则不需要什么特别处理。

1.3 事件的浮升
页面上的对象通常是重叠的，比如一个div中可以包括若干div或者其他元素。当某一事件触发的时候，同时有多个元素受影响，并且它们都有相应的事件处理程序，那么这些事件处理程序执行哪些？以何种顺序执行？这就是本节要讨论的问题。通常情况下，一个事件被多个句柄捕获的情形并不多见。先看一个例子(CSS省略)：

<script type="text/javascript"> function body_click(){ var dis=document.getElementById("res"); dis.innerHTML+="Body Click "; } function out_click(){ var dis=document.getElementById("res"); dis.innerHTML+="Outer Click "; } function inner_click(){ var dis=document.getElementById("res"); dis.innerHTML+="Inner Click "; } </script> <div id="out" onclick="out_click()"> Outer Div <div id="innerdiv" onclick="inner_click()"> Inner Div </div> </div> <div id="res"> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在body，外层div和内层div都响应了click事件，结果如下：
 
可见，事件是由内向外层的元素依次触发的。（一般教材上的说法是向上浮升，bubbling,我觉得这个向上是有歧义的，我一开始就误认为内层的元素是上面的，因为它能覆盖外层的元素）用0级DOM注册的事件，它的浮升方法无论是IE还是W3C都是统一的。

1.4 浮升的取消
有时候我们需要在响应了一个事件之后，就不需要外层的元素再响应了，可以取消事件的浮升。取消的方法IE和W3C是不一致的。IE是通过设置事件对象的cancelBubble属性来实现，W3C则是调用事件对象的stopPropagation方法。

例如上面的例子改为：

复制代码 代码如下:

function inner_click(arg){
var evnt=window.event?window.event:arg;
var dis=document.getElementById("res");
dis.innerHTML+="Inner Click
";
if(evnt.stopPropagation){
evnt.stopPropagation();
}else{
evnt.cancelBubble=true;
}
}

其他不变，这样就只能看到一行输出。

1.5 事件处理函数中的this
这个this指向的是触发事件的对象。

下面介绍2级DOM的事件句柄。这种方式是比较新的方式，它不依赖于任何特定的事件句柄属性。W3C规定的方式是

object.addEventListener(‘event',function,boolean)

第一个参数是事件名，第二个是事件响应函数，第三个变量如果是true，则事件函数在事件冒泡阶段被触发，否则是在事件的捕获阶段被触发。W3C规定事件的发生有两个阶段，首先是捕获，即事件以此从最外层层的元素向内层传递，相应的事件处理函数被依次触发，然后是冒泡阶段，事件从最内层的元素向外层传递。 看一个例子：

<title>DOM 2 Event</title> <script type="text/javascript"> function setup(){ var div=document.getElementById('testDiv'); div.addEventListener('click',function(){alert('div true');},true); document.addEventListener('click',function(){alert('body true');},true); div.addEventListener('click',function(){alert('div false');},false); document.addEventListener('click',function(){alert('body false');},false); } window.onload=setup; </script> <div id="testDiv" style="width:100px;height:100px;background-color:gray"></div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

点击灰色框，会依次弹出body true,div true,div false,body false. 很遗憾，IE不支持这种方式,最新的IE8也不支持。不过IE也有类似的注册事件的方法，名字是attachEvent.不过这个方法没有第三个参数，它支持冒泡阶段的事件响应。attachEvent函数传递事件参数的时候是和W3C一致的，也是通过event参数传递，但是，其函数内部的this指向的不是触发事件对象，而永远指向window。在event对象中有一个属性指向触发该事件的对象，W3C中是target,IE中是srcElement, 在符合W3C规范的浏览器中，事件处理函数中的this和event.target指向的是同一个对象。下面的程序展示了一个IE和W3C兼容的事件处理程序：

<title>DOM 2 Event</title> <script type="text/javascript"> function ClickMe(event){ var target1=event.target?event.target:event.srcElement; alert(target1.innerHTML); } function setup(){ var div=document.getElementById('testDiv'); if(div.addEventListener){ div.addEventListener('click',ClickMe,false); }else{ div.attachEvent('onclick',ClickMe); } } window.onload=setup; </script> <div id="testDiv" style="width:100px;height:100px;background-color:gray"> Hello World. </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

事件处理程序中W3C和IE还有诸多不一致之处，十分麻烦。好在大多都有较好的解决方案。更多信息请参考http://www.quirksmode.org/js/events_events.html