<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <div> </div> <a target="_blank" href="https://www.baidu.com">qweqwe</a> </div> </body> <script type="text/javascript"> var tag=document.getElementById("tag"); tag.addEventListener("click",function(event){ event.preventDefault(); },false); </script> </html>
例如上面的那段代码使用preventDefault()这个方法就阻止了a标签的打开新窗口
stopPropagation()这个方法主要是用来阻止事件冒泡的，这个一般在一些特定业务中不需要冒泡的情况下可以使用，示例代码如下：
var btn1=document.getElementById("btn1"); var content=document.getElementById("content"); btn1.addEventListener("click",function(event){ alert("btn1"); event.stopPropagation(); },false); content.addEventListener("click",function(){ alert("content"); },false);
这一段代码就阻止了id="btn1"向上级id="content"上面冒泡，打印出来的结果是：弹窗弹出btn1
二、preventDeefault()和stopPropagation()在IE浏览器和标准浏览器上面使用的差异
在标准浏览器的使用方法如第一点所示，在IE浏览器上面是event事件是没有preventDefault()这个属性的，所以在IE上，我们需要设置的属性是returnValue
window.event.returnValue=false
stopPropagation()在标准浏览器上面也是如第一点所示，在IE上面的用法如下：
event.cancelBubble=true
三、target与currentTarget
target这个属性指向的是目标过程中的DOM对象，currentTarget这个指向的是当前的对象，具体内容跟this一样，所以当this指向的是目标的时候，target与currentTarget相同，这个理解即可，在实际业务中这个知识点使用频率较少
接下来我们就来说一说DOM Level 2，这一部分主要是一些复杂的交互事件，包括鼠标响应事件，键盘响应事件，具体用法跟click事件类似，下面的这几个属性的对比是需要关注的。
clientX, clientY: 这两个属性表示鼠标光标相对浏览器的水平和垂直坐标;
pageX, pageY: 这两个属性表示鼠标光标相对文档的水平和垂直坐标; IE8及更早版本不支持;
screenX, screenY: 这两个属性表示鼠标光标相对整个屏幕的水平和垂直坐标;
五、HTML5新增的事件
在HTML5到来的时候新增加了一些事件，其中在这里就一些关键的事件进行讲解，洗完起到一个抛砖引玉的作用
1、 contextmenu事件
这个事件是当鼠标右击的时候触发的，但是触发这个属性的时候默认的行为也会被触发，所以需要通过preventDefault()方法来阻止
2、beforeunload事件
beforeunload在页面卸载之前触发, 该事件会弹出一个对话框, 询问是否确定离开, 事件的returnValue属性表示对话框显示的文字内容;
3、hashchange事件
该事件当URL中的hash值改变时触发, 通常用于Ajax应用中利用URL参数保存导航信息;这个在前端路由的制作中是非常有用得
除此之外还有很多的事件，但是可能在实际业务中使用得比较少，所以不在这里说明
六、事件委托