JavaScript事件处理实例分析

今天小编给大家分享一下JavaScript事件处理实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

十载专注建站、设计、互联网产品按需搭建网站服务，业务涵盖品牌网站建设、商城网站建设、小程序制作、软件系统开发、重庆APP开发公司等。凭借多年丰富的经验，我们会仔细了解每个客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，成都创新互联更提供一系列网站制作和网站推广的服务，以推动各中小企业全面信息数字化，并利用创新技术帮助各行业提升企业形象和运营效率。

一.事件传播机制

客户端 JavaScript程序（就是浏览器啦）采用了异步事件驱动编程模型。当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web浏览器就会产生事件（event）。如果JavaScript应用程序关注特定类型的事件，那么它可以注册当这类事件发生时要调用的一个或多个函数。当然了，这种风格并非Web编程独有，所有使用图形用户界面的应用程序都采用了它。

既然要详解事件处理，那我们先从几个基础概念说起吧：

①事件类型（event type）：是一个用来说明发生什么类型事件的字符串。例如，“mousemove”表示用户移动鼠标，“keydown”表示键盘上某个键被按下。事件类型只是一个字符串，有时候又称之为事件名字（event name）；

②事件目标（event target）：是发生事件或与之相关的对象。Window、Document和Element对象是最常见的事件目标。当然，AJAX中的XMLHttpRequest对象也是一个事件目标；

③事件处理程序（event handler）：是处理或响应事件的函数，它也叫事件监听程序（event listener）。应用程序通过指明事件类型和事件目标，在Web浏览器中注册它们的事件处理函数。

④事件对象（event object）：是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理函数（但是在IE8以及其之前版本中，全局变量 event才是事件对象）。事件对象都有用来指定事件类型（event type）的type属性和指定事件目标（event target）的target属性（但是在IE8以及其之前版本中，用的是srcElement而非target）。当然，不同类型的事件还会为其相关事件对象定义一些其他的独有属性。例如，鼠标事件的相关对象会包含鼠标指针的坐标，而键盘事件的相关对象会包含按下的键和辅助键的详细信息。

以上说完了四个基本概念。那么问题来了——如果在一个web页面上用鼠标点击一个元素a的某一子元素b时，应该先执行子元素b注册的事件处理程序还是先执行元素a 注册的事件处理程序呢（假设元素a和它的子元素b都有注册事件处理程序）？身为读者的你是否想过这个问题呢？

这个问题就涉及到浏览器中的事件传播（event propagation）机制。相信大家都听说过事件冒泡（event bubble）和事件捕获（event capturing）吧！没错，它们就是浏览器中的事件传播机制。无图无真相，没有配图？那怎么阔以：

JavaScript事件处理实例分析

看了图之后相信你已经大概理解了浏览器中的事件传播机制了：当一个事件发生时，它会先从浏览器***对象Window一路向下传递，一直传递到触发这个事件的那个元素，这也就是事件捕获过程。然而，一切并没有结束，事件又从这个元素一路向上传递到Window对象，这也就是事件冒泡过程（但是在IE8以及其之前版本中，事件模型并未定义捕获过程，只有冒泡过程）。

所以，关于上面的问题，还得看元素a注册的事件处理程序是在捕获过程还是在冒泡过程了。那么到底什么是在捕获过程注册事件处理程序，在冒泡过程注册事件处理程序又是怎么做的呢？这就得好好说说几种注册事件处理程序的方式了：

1. 设置HTML标签属性为事件处理程序

文档元素的事件处理程序属性，其名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。当然了，这种形式只能为DOM元素注册事件处理程序。实例：

            test              #div1{width: 300px; height: 300px; background: red; overflow:hidden;}         #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}         #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}            div1         div2             div3

test #div1{width: 300px; height: 300px; background: red; overflow:hidden;} #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;} #div3{margin:50px auto; width: 100px; height: 100px; background: blue;} div1 div2 div3

test
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
div1
div2
div3
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);
div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);
div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);
div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);
div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);
div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);
div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);

test #div1{width: 300px; height: 300px; background: red; overflow: hidden;} div1 var div1 = document.getElementById('div1'); if(div1.addEventListener){ div1.addEventListener('click', div1Fun, false); }else if(div1.attachEvent){ div1.attachEvent('onclick', div1Fun); } function div1Fun(event){ event = event || window.event; var target = event.target || event.srcElement; console.log(event.type); console.log(target); }

test #div1{width: 300px; height: 300px; background: red; overflow: hidden;} div1 var div1 = document.getElementById('div1'); div1.onclick = function(){ console.log('div1.onclick:'); console.log(this); }; div1.addEventListener('click', function(){ console.log('div1.addEventListener:'); console.log(this); }, false);

test
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
div1 var div1 = document.getElementById('div1'); div1.onclick = function(){ console.log('div1.onclick:'); console.log(this); }; div1.attachEvent('onclick', function(){ console.log('div1.attachEvent:'); console.log(this === window);
});

function cancelHandler(event){ var event = event || window.event; if(event.preventDefault){ event.preventDefault(); } if(event.returnValue){ event.returnValue = false; } return false; }

test
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
div1 div2 div3 var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var div3 = document.getElementById('div3'); div1.onclick = function(){ console.log('div1'); }; div2.onclick = function(){ console.log('div2'); }; 　　div3.onclick = function(event){ stopEventPropagation(event); console.log('div3'); }; function stopEventPropagation(event){ var event = event || window.event; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true;
}
}

大橙子网站建设，新征程启航

JavaScript事件处理实例分析

其他资讯