关于JavaScript和HTML之间的交互事件

JavaScript和HTML之间的交互是通过事件来实现的。JavaScript采用异步事件驱动的编程模型，当文档、浏览器、元素或相关对象发生特定的事情时，浏览器会生成事件。如果JavaScript专注于特定类型的事件，它可以注册一个句柄，以便在此类事件发生时调用。事件流事件流描述了从页面接收事件的顺序。例如，如果有两个嵌套的div，并且单击了内部div，那么内部div会先启动click事件还是外部div先触发？目前IE的事件冒泡主要有三种模式：事件在开始时被最特定的元素接收，然后逐步传播到不太特定的元素。网景的事件捕获：不太具体的节点更早接收事件，而最具体的元素在最后接收事件。与事件冒泡相反，DOM事件流：DOM2级别的事件规定事件流包括三个阶段，即事件捕获阶段(位于目标阶段)和事件冒泡阶段。第一个事件捕获发生，为拦截事件提供了机会。Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡。如果有以下html，点击div区域复制代码如下：DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=utf-8 '/title测试页/标题/流头部分单击此处/部分/正文/html

事件处理程序也称为事件侦听器，事件是由用户或浏览器本身执行的操作。例如，点击、加载、移动等。都是事件类型(通常称为事件名称)，响应事件的方法称为事件处理程序或事件侦听器或事件句柄，事件处理程序的名称为：on event type。考虑到这一点，让我们看看如何向元素添加事件处理程序。HTML事件处理程序元素支持的每个事件都可以使用与相应事件处理程序同名的HTML属性来指定。这个属性值应该是可执行的JavaScript代码。我们可以向按钮添加click事件处理程序。复制代码如下：输入类型=' button '值=' click here ' onclick=' alert(' clicked！');'HTML事件处理程序可以包含要执行的特定操作，或者调用页面上其他地方定义的脚本。刚才提到的例子可以写成这样：输入类型=' button '值=' click here ' onclick=' show message()；'。/script type='text/javascript '函数showMessage() { alert('Clicked！');}在HTML中指定事件处理程序很方便，但有两个缺点。首先是加载顺序的问题。如果在html代码之后加载事件处理程序，用户可能会在加载事件处理程序之前点击按钮等触发事件，这就导致了时间差的问题。其次，用这种方式编写html代码和JavaScript代码耦合紧密，维护起来不方便。用JavaScript指定事件处理程序意味着给元素的事件处理程序属性分配一个方法。每个元素都有自己的事件处理程序属性，这些属性的名称通常是小写的，比如onclick。通过将这些属性值设置为方法，可以指定事件处理程序。下面的代码复制如下：输入id=' btnclick '类型=' button '值=' click here '/脚本类型=' text/JavaScript ' var BTN click=document . getelementbyid(' BTN click ')；btnClick.onclick=函数show message(){ alert(this . id)；};/script是这样处理的，事件处理程序被视为元素的方法，它在元素的作用域下运行，所以这是当前元素，所以点击按钮的结果是：btnClick，这有另一个好处，我们可以删除事件处理程序。只需将元素的onclick属性设置为null，DOM2事件处理程序DOM2级别的事件就定义了两种方法来处理指定和删除事件处理程序的操作：addEventListener和removeEventListener。的所有DOM节点都包含这两种方法，它们都接受三个参数：事件类型、事件处理方法和一个布尔值。最后，如果布尔参数为真，则意味着在捕获阶段调用事件处理程序，如果为假，则在事件冒泡阶段处理。在刚才的例子中，我们可以编写并复制如下代码： input id=' BTN click ' type=' button ' value=' click here '/script type=' text/JavaScript ' var BTN click=document . getelementbyid(' BTN click ')；BTN click . addeventlistener(' click ')，function(){ alert(this . id)；}，false)；/script上面的代码向按钮添加了click事件的处理程序，该处理程序在冒泡阶段被触发。和前面的方法一样，这个程序也在元素的作用域下运行，但是有一个优点。我们可以为click事件添加多个处理程序来复制代码，如下所示： input ID=' BTN click ' type=' button ' value=' click here '/script type=' text/JavaScript ' var BTN click=document . getelementbyid(' BTN click ')；BTN click . addeventlistener(' click ')，function(){ alert(this . id)；}，false)；BTN click . addeventlistener(' click ')，function() { alert('Hello！');}，false)；/script，两个事件处理程序，将在用户单击按钮后按添加顺序执行。

addEventListener添加的事件处理程序只能由removeEventListener移除，移除时的参数与添加时的参数相同，这意味着我们刚刚添加的匿名函数无法移除，因为匿名函数的方法体相同，但句柄不同。因此，当我们移除事件处理程序时，我们可以编写并复制如下代码： input id=' BTN click ' type=' button ' value=' click here '/script type=' text/JavaScript ' var BTN click=document . getelementbyid(' BTN click ')；var handler=function(){ alert(this . id)；} btnclick . addeventlistener(' click '，handler，false)；BTN click . removeeventlistener(' click '，处理程序，false)；/script以下是旧的IE兼容性问题。IE不支持addEventListener和removeEventListener方法，但是实现了两个类似的方法，attachEvent和disconnectevent，它们都接收两个相同的参数，事件处理程序名称和事件处理程序方法。因为IE支持事件冒泡，所以添加的程序会被添加到冒泡阶段。使用attachEvent添加一个事件处理程序来复制代码，如下所示：输入id=' btnclick '类型=' button '值=' click here '/脚本类型=' text/JavaScript ' var BTN click=document . getelementbyid(' BTN click ')；var handler=function(){ alert(this . id)；} btnClick.attachEvent('onclick '，处理程序)；/script的结果是未定义的，这很奇怪。一会儿我们会介绍，attachEvent添加的事件处理程序可以被disconnectevent移除，条件是同一个参数，所以匿名函数不能被移除。

复制的代码如下： input ID=' BTN click ' type=' button ' value='单击此处'/script type=' text/JavaScript ' var BTN click=document . getelementbyid(' BTN click ')；var handler=function(){ alert(this . id)；} btnClick.attachEvent('onclick '，处理程序)；BTN click . discoverent(' onclick '，处理程序)；/script跨浏览器事件处理程序正如我们所看到的，在不同的浏览器中，添加和删除事件处理程序的方式是不同的。如果要编写一个跨浏览器的事件处理程序，首先我们需要了解不同浏览器下处理事件处理程序的差异。添加事件处理程序有几个区别：添加事件侦听器和附加事件。1.参数数量不同，这是最直观的。addEventListener有三个参数，而attachEvent只有两个。attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener的第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理(为了浏览器兼容，我们一般设置为冒泡阶段)。2.第一个参数有不同的含义，addEventListener的第一个参数是事件类型(如click)，attachEvent的第一个参数表示事件处理程序的名称(onclick，load)。3.事件处理程序的作用域不同，addEventListener的作用域是元素本身，这是指触发器元素，而attachEvent事件处理程序运行在全局变量中，这是window。这就是为什么刚才的例子返回undefined而不是元素id4。为一个事件添加多个事件处理程序时，执行顺序是不同的，addEventListener会按照添加顺序执行，而attachEvent在添加多个事件处理程序时会有不规则的顺序(当要添加的方法很少时，大部分会按照添加顺序的逆序执行，但如果添加的多了，就不规则了)。因此，当添加多个时，最好独立于执行顺序。如果要看函数的执行顺序，最好自己处理。不要指望浏览器能理解这四个区别。我们可以尝试编写一个添加事件处理程序的方法，以获得更好的浏览器兼容性。复制代码如下：函数addevent(节点、类型、处理程序){if(！节点)返回falseif(node . addeventlistener){ node . addeventlistener(类型，处理程序，false)；返回真；} else if(node . attachevent){ node . attachevent(' on '类型，处理程序，返回真；}返回false}这样，首先我们解决了第一个问题，即参数个数不同。现在，事件冒泡阶段触发三个参数，第二个问题就可以解决了。如果是IE，我们就添加到类型中。第四个问题还没有解决，需要用户关注。一般来说，人们不会添加很多事件处理程序。尝试这种方法感觉很好，但是我们还没有解决第三个问题。因为处理程序的范围不同，如果处理程序中有这样的操作，那么就会出现错误。在IE下，其实大部分功能都会有这个操作。

复制代码如下：函数addevent(节点、类型、处理程序){if(！节点)返回falseif(node . addeventlistener){ node . addeventlistener(类型，处理程序，false)；返回真；} else if(node . attachevent){ node . attachevent(' on '类型，function(){ handler . apply(node)；});返回真；}返回false}这个可以解决这个的问题，但是新的问题又来了。我们已经添加了一个匿名事件处理程序，所以我们不能用disconnectevent取消事件处理程序。解决方法很多，可以借鉴大师的处理方法。jQuery的创始人John Resig通过复制如下代码做到了这一点： Function AddEvent(节点、类型、处理程序){if(！节点)返回falseif(node . addeventlistener){ node . addeventlistener(类型，处理程序，false)；返回真；} else if(node . attachevent){ node[' e ' type handler]=handler；node[type handler]=function(){ node[' e ' type handler](window . event)；};node.attachEvent('on '类型，node[type handler])；返回真；}返回false}取消事件处理程序时，复制代码如下：函数remove event(节点、类型、处理程序){if(！节点)返回falseif(node . removeeventlistener){ node . removeeventlistener(类型，处理程序，false)；返回真；} else if(node . separate vent){ node . separate vent(' on '类型，node[type handler])；节点[类型处理程序]=null；}返回false}John Resig巧妙利用了闭包，看起来非常不错。当一个事件触发DOM上的一个事件时，将生成一个事件对象，事件。此对象包含与事件相关的所有信息，包括生成事件的元素、事件类型和其他相关信息。所有浏览都支持事件对象，但支持方式不同。DOM中的事件对象与DOM浏览器兼容，后者将生成一个事件对象并将其传递给事件处理程序。使用我们刚刚编写的addEvent方法复制代码如下： var BTN click=document . getelementbyid(' BTN click ')；addEvent(btnClick，' Click '，处理程序)；单击按钮时，我们可以看到弹出内容为click的弹出事件对象包含与创建它的特定事件相关的属性和方法。不同类型的触发事件有不同的可用属性和方法。但是，所有事件都将包含属性/方法类型read/Write是否起泡布尔只读事件bubble cancelableBoolean只读事件可以取消事件的默认行为currentTargetElement只读事件处理程序当前处理元素detailInteger只读事件相关详细信息eventPhaseInteger只读事件处理程序阶段：1捕获阶段，在目标阶段， 3冒泡阶段preventDefault()函数只读取消事件默认行为stopPropagation()函数只读取消事件进一步捕获或冒泡targetElement的targetelement只读事件类型String只读触发事件类型viewAbstractView与事件关联的只读抽象视图，相当于事件的window对象在事件处理程序内部，而这始终相当于currentTarget，它是事件的实际目标。 若要防止事件的默认行为，可以使用preventDefault()方法，前提是可取消值为true。例如，我们可以防止链接导航的默认行为。复制代码如下： document . getelementsbyname(' a ')。onclick=function(e){ e . preventdefault()；} stopopagation()方法可以在DOM级别停止事件的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()来避免在body上注册的事件的发生。复制代码如下： var HANDLER=function(e){ alert(e . type)；e . stopperpagation()；} addEvent(document.body，' click '，function(){ alert(' Clicked body ')})；var BTN click=document . getelementbyid(' BTN click ')；addEvent(btnClick，' Click '，处理程序)；注释掉e . stopperpagation()；当点击按钮时，由于事件的冒泡，也会触发主体的点击事件，但调用这句话后，事件就会停止扩散。IE中的事件对象有几种不同的方式来访问IE中的事件对象，具体取决于指定事件处理程序的方法。

当事件处理程序直接添加到DOM元素时，事件对象作为窗口对象的属性存在。复制代码如下： varhandler=function(){ var e=window . event；警报(e . type)；} var BTN click=document . getelementbyid(' BTN click ')；btnClick.onclick=handler我们通过window.event获取了事件对象并检测了它的类型，但是如果通过attachEvent添加了事件处理程序，那么事件对象将被传递到事件处理程序中。复制代码如下：VAR处理程序=函数(e){ alert(e . type)；} var BTN click=document . getelementbyid(' BTN click ')；attachEvent(btnClick，handler)；当然，此时也可以通过窗口对象访问事件。为了方便起见，我们通常传入事件对象。ie中的所有事件都包括以下属性、方法、属性/方法类型。cancelBulleBoolean的读/写指令默认为false。当设置为true时，您可以取消事件冒泡。默认情况下，读/写返回值布尔值为真。True将事件的默认行为设置为取消。srcElementElement只读事件的目标元素类型字符串只读触发事件类型跨浏览器事件对象。虽然DOM和IE的事件对象不同，但基于它们的相似性，我们仍然可以编写一个跨浏览器的事件对象方案。复制代码如下： function get event(e){ return e | | window . event；}函数getTarget(e){ return e . target | | e . screenElement；}函数prevent default(e){ if(e . prevent default)e . prevent default()；else e.returnValue=false} function stopperpagation(e){ if(e . stopperpagation)e . stopperpagation()；else e.cancelBubble=true}有一些常用的HTML事件，不一定和用户的操作有关。这里，只简单提一下。详细用法，你得用百度谷歌。1.load:页面完全加载时，在窗口上触发，加载图像时，在img元素上触发，或者加载嵌入内容时触发。对象元素2.unload上的触发器：页面完全卸载后的窗口上的触发器。或者当嵌入内容被卸载时，它在对象元素上被触发。3.select:当用户在文本框中选择字符时触发。4.change:当文本框的焦点改变时触发。5 .提交：用户提交表单时触发。6.resize:当窗口或框架的大小改变时，在窗口上触发。7.scroll:当用户用滚动条滚动元素时，在此元素上触发8.focus:当页面或元素获得焦点时，在窗口和相应元素上触发9.blur:当页面或元素失去焦点时，在窗口和相应元素上触发10.beforeunload:在卸载页面之前，在窗口上触发11.mousewheel:如果不是HTML，则在用户通过鼠标滚轮与页面交互并垂直滚动页面时触发。