DOM 事件

特点：

DOM0级事件无法给一个事件添加多个处理函数

var dom = document.getElementById("id"); dom.addEventListener('click', a, false); function a() { alert(this.id);//id // this代表的是dom对象 } //移除事件 //传入的三个参数与添加事件完全相同。 dom.removeEventListener(('click', a, false)).

参数说明：

第一个参数是事件名，就是事件属性去掉on，

第二个参数是事件处理函数，

第三个参数是是否在事件捕获阶段执行。

特点

同一个事件处理函数可以绑定2次,一次用于事件捕获，一次用于事件冒泡。

var dom = document.getElementById("outestA"); dom.addEventListener('click', a, false); dom.addEventListener('click', a, true); function a() { alert(this.id);//outestA }

如果绑定的是同一个事件处理函数，并且都是事件冒泡类型或者事件捕获类型，那么只能绑定一次，多次绑定仅调用一次。

可以绑定多个不同的事件处理函数

旧版本IE浏览器（IE8及一下）

需要使用attachEvent和detachEvent来添加和移除事件,传入两个参数第一个是事件属性（包含on），第二个是处理函数，不支持事件捕获所以没有第三个参数。

var dom = document.getElementById("id"); dom.attachEvent('onclick',a); function a() { alert(this.id);/**/undefined** // 这里的this是window对象 }

DOM3级事件就是在DOM2基础上增加了更多的事件类型

UI事件，当用户与页面上的元素交互时触发，如：load、scroll

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

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

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

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

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

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

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

注:DOM1标准中并没有定义事件相关的内容*

事件冒泡

事件捕获

有以下HTML结构

事件捕获：window -> document -> html -> body -> div -> span -> 目标

事件冒泡：目标 -> span -> div -> body -> html -> document -> window

(function(){ var child = document.getElementById('child'); child.addEventListener('click', function(click){ console.log('child'); } ,flase);//false或者不写，都是冒泡。 var parent = document.getElementById('parent'); parent.addEventListener('click', function(click){ console.log('parent'); } ,false); }());

出现的情况：

点击child元素，先打印child后打印parent；

点击parent元素，只打印parent。

(function(){ var child = document.getElementById('child'); child.addEventListener('click', function(click){ console.log('child'); } ,true); var parent = document.getElementById('parent'); parent.addEventListener('click', function(click){ console.log('parent'); } ,true); }());

出现的情况：

点击child元素，先打印parent后打印child。

点击parent元素，只打印parent。

注：事件默认的处理阶段为冒泡阶段，可以把addEventListener第三个参数设置为true来让时间在捕获阶段被处理，

事件处理函数会回调一个参数event，代表当前事件对象。

event中常用的方法和属性：

preventDefault 阻止默认行为，比如当点击submit按钮时候，可以采用此方法阻止表单提交。

stopPropagation 停止事件冒泡，需要防止事件冒泡带来的负面影响的时候就要使用该方法。

stopImmediatePropagation 阻止后续事件，该方法除了阻止事件冒泡外在当前事件被绑定多个处理程序的时候，后续的处理程序也会被阻止。

currentTarget 此属性返回当前事件所绑定的对象。

target 此属性返回当前触发事件的对象，注意target是触发事件的对象，是真正的事件源，同样以上面的HTML为例，给div绑定一个事件，点击带文字的span后，target是span，而currentTarget是div。

• 1
• 2
• 3
• 4

如果想要实现点击每个li标签就能打印出文本内容，我们可以不用给每个li绑定事件，只需要利用事件冒泡即可

var click = document.getElementById('click'); click.addEventListener('click', log, false); function log(e) { console.log(e.target.innerText); }

除了系统内置的事件外，我们还可以自定义事件，由于平时使用的不多可能感觉会很高端，其实自定义事件并不复杂

var myEvent = new Event('myEvent'); document.addEventListener('myEvent', log, false); function log() { console.log('hello event'); } document.dispatchEvent(myEvent);

通过创建Event对象来创建事件，通过dispatchEvent函数派发事件。自定义事件可以绑定到任意DOM元素上，此处选择document只是为了演示方便。

HTML

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。