下面是我给大家整理的js原生事件，有兴趣的同学可以去看看。
1、事件流
事件流主要分为事件冒泡和事件捕获两种。事件冒泡，目标元素最先接收事件，然后逐渐向上层传播到较为不具体的节点。事件捕获完全相反，它的主要思想是较不具体的节点最先接收到事件，然后逐渐向下层传播到目标节点。
<html>
<head>
<title>事件流</title>
</head>
<body>
<div id ="testdiv"></div>
</body>
</html>
当点击div时,冒泡事件接收到节点顺序div->body->html->document
捕获事件接收到节点顺序document->html->body->div
2、事件处理程序
a)html事件处理程序
某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的html特性来指定。
缺点：1、时差问题，可能在浏览器还未解析点击事件函数时,用户已经点击了页面元素——通过try-catch包裹错误
2、事件处理程序的作用域链在不同浏览器中会导致不同结果。
3、html代码和javascript代码紧密耦合,不利于扩展维护。
b) dom0级事件处理程序
将函数赋值给元素事件处理程序属性
var btn = document.getelementbyid(“#dv”);
btn.onclick = function(){};
想要删除元素的事件处理程序–btn.onclicn = null;
该方式添加的事件处理程序在事件冒泡阶段被处理。
c)dom2级事件处理程序
指定事件处理程序addeventlistener
删除事件处理程序removeeventlistener
接收三个参数即要处理的事件名，事件处理程序的函数，布尔值（true表示捕获阶段调用处理程序，false表示冒泡阶段调用事件处理程序）
注意:addeventlistener必须通过removeeventlistener删除且参数必须一致，所以通过addeventlistener添加的匿名函数不能被移除。
d)ie事件处理程序
attachevent
detachevent
两个方法接收相同的两个参数（”onclick”,”function(){}”）;
由于ie8级更早版本只支持事件冒泡,所以通过attachevent添加的事件处理程序只能被添加到冒泡阶段。
注意：attach中第一个参数是onclick而不是addeventlistener中的click
ie事件处理程序attachevent添加的在全局作用域中运行
var btn = document.getelementbyid(“#tes”);
btn.attachevent(“onclick”,function(){
alert(this == window); //true
})
3、跨浏览器的事件处理程序。
由于不同浏览器之间事件处理程序不同，所以有必要编写可以跨浏览器使用的事件处理程序。
var eventutil = {
addhandler:function(element,type,handler){
if(element.addeventlistener){
element.addeventlistener(type,handler,false);
}else if(element.attachevent){
element.attachevent("on" + type,handler);
}else{
element["on" + type] = handler;
}
},
removehandler:function(element,type,handler){
if(element.removeeventlistener){
element.removeeventlistener(type,handler,false);
}else if(element.deatchevent){
element.deatch("on" + type,handler);
}else{
element["on" + type] = null;
}
}
}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
js弹出窗口代码大全
几个前端常见的js排序代码
js去掉字符串前后空格或去掉所有空格的用法
以上就是详细解析js原生事件描述（附上代码，简单明了）的详细内容。