python控件触发事件_三分钟读懂 DOM 事件机制-CSDN博客

云栖号资讯：【点击查看更多行业资讯】

在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！

浏览器的DOM事件机制，就是通过监听函数(listener)对事件做出反应。而事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击(click)按钮等，这里的click就是事件的名称。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式(event-driven)的主要编程方式。

一、事件流

我们知道，DOM是个树形结构，当我们在页面上单击一个按钮，页面上哪些元素会触发这个事件，是发生在这个按钮上，还是这个按钮的容器元素(我们说父元素)也会触发这个点击事件呢？

这就牵扯到事件流，从上面我们知道它描述的是事件触发顺序，那上文中是按钮和其容器元素都触发吗，它们谁先触发呢？这可不是确定的，得看是哪种类型的事件流了。

1、事件冒泡

事件冒泡是IE 的事件流，事件是由最具体的元素接收，然后逐级向上传播，在每一级的节点上都会发生，直到传播到document对象，向Chrome这样的浏览器会冒泡到window对象(就像水底的泡泡在上升)。

2、事件捕获

事件捕获是Netscape浏览器开发团队提出的，很有意思，他们思想和IE 的截然相反。也就是说，从不具体的节点到最具体的节点，一般是从document对象开始传播，不过很少人用事件捕获的，还是事件冒泡用的多。

3、DOM 事件流

一个事件发生后，会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段：

第一阶段：从window对象传导到目标节点(上层传到底层)，称为“捕获阶段”(capture phase)。

第二阶段：在目标节点上触发，称为“目标阶段”(target phase)。

第三阶段：从目标节点传导回window对象(从底层传回上层)，称为“冒泡阶段”(bubbling phase)。

这种三阶段的传播模型，使得同一个事件会在多个节点上触发。

二、事件处理程序

前面简单说了什么是事件，那响应事件的函数就是事件处理程序。比如click是事件名称，加上"on"开头，事件处理程序是onclick，有以下几种方式来给事件指定事件处理程序。

1、HTML 事件处理程序

其实就是，HTML 的on属性。点击

on + 事件名，因为要执行函数，我这里写的doSomething()，这是会执行的代码，不能写个函数名哈，要记得带上括号。使用这个方法指定的监听代码，只会在冒泡阶段触发。

2、DOM 0级事件

其实就是，元素节点的事件属性。var btn = document.getElementById('btn');btn.onclick = function () { console.log('被点击了！');};

这样就获取按钮的引用，并给它指定事件onclick,点击后在控制台输出'被点击了！'。

如果想删除事件处理程序，只需要这样 btn.onclick = null; // 删除事件处理程序

3、DOM 2级事件

el.addEventListener(event-name, callback, useCapture)event-name: 事件名称，可以是标准的DOM事件

callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event

useCapture: 默认是false，代表事件句柄在冒泡阶段执行// 例2var btn = document.getElementById('btn');btn.addEventListener("click", test, false);function test(e){ e = e || window.event; alert((e.target || e.srcElement).innerHTML); btn.removeEventListener("click", test)}//IE9-:attachEvent()与detachEvent()。//IE9+/chrom/FF:addEventListener()和removeEventListener()

IE9以下的IE浏览器不支持 addEventListener()和removeEventListener()，使用 attachEvent()与detachEvent() 代替，因为IE9以下是不支持事件捕获的，所以也没有第三个参数，第一个事件名称前要加on。

4、 DOM 3级事件

DOM 3级事件在DOM 2级事件的基础上添加了更多的事件类型：UI事件，当用户与页面上的元素交互时触发，如：load、scroll

焦点事件，当元素获得或失去焦点时触发，如：blur、focus

鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup

滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

文本事件，当在文档中输入文本时触发，如：textInput

键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

合成事件，当为IME(输入法编辑器)输入字符时触发，如：compositionstart

变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。

三、事件委托