好的废话不多说 我直接给出一份演示
现在我要对id为demo的节点的后代的拥有class test的节点进行监听
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo test{
width: 10px;
height: 10px;
background-color: #00AEEF;
margin: 5px;
}
</style>
</head>
<body>
<div id="demo">
</div>
<script>
//获取所有的父节点
function getParentNode(Obj,Arr){
if(!Arr){
var Arr=[];
}
Arrpush(Obj);
if(Obj&&ObjparentNode){
getParentNode(ObjparentNode,Arr);
}
return Arr;
};
//判断是否拥有class
function hasClass(e,v){
if(!egetAttribute)return false;
if(egetAttribute("class")==null)return false;
var allClass=egetAttribute("class")split(" ");
if(allClassindexOf(v)!=-1){return true}else{return false}
}
//事件委托 现在我要对id为demo的节点的后代的拥有class test的节点进行监听
//添加事件
documentgetElementById("demo")addEventListener("click",function(e){
e=e||(typeof windowevent=="undefined"event:windowevent);//这里对事件对象进行了一个兼容
var target=typeof esrcElement=="undefined" etarget: esrcElement;
var path=getParentNode(target);
for(var i=0;i<pathlength;i++){
if(hasClass(path[i],"test")){
clickTestcall(path[i],e);
}
}
function clickTest(e){
consolelog("你点了这个节点");
consolelog(e);
consolelog(this);
}
});
documentgetElementById("demo")innerHTML="<div class='test'><span>"+
"asdasd</span></div>"
</script>
</body>
</html>
可以看到当我执行domObjinnerHTML=xxx时我是没有对class为test进行添加事件的 但是我点击它执行的函数就是clickTest
具体原理自己看代码吧 我就不详细说了
友人A、友人B；
友人A有四辆车，友人B需要监控这四辆车会不会出问题，但是友人B一辆辆去看很麻烦，而且又不知道他们什么时候启动。
这时候，友人B叫友人A帮忙看着四辆车（托管给A），有问题的时候，就呼叫友人B（处理事件）。
也不知道这样说对不对，哈哈哈~
在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型。
其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持
原始事件模型：
在原始事件模型中(也有说DOM0级)，事件发生后没有传播的概念，没有事件流。北大青鸟>
(1)HTML代码中指定属性值：
(2)在js代码中指定属性值：documentgetElementsByTagName(‘input’)[0]onclick=func
优点：所有浏览器都兼容
缺点：
1逻辑与显示没有分离
2相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的
3无法通过事件的冒泡、委托等机制。
DOM2事件模型
此模型是W3C制定的标准模型。W3C制定的事件模型中，一次事件的发生包含三个过程：
(1)事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。
(2)事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数
(3)事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。
所有的事件类型都会经历"事件捕获阶段"但是只有部分事件会经历"事件冒泡阶段"阶段,例如submit事件就不会被冒泡。
etarget与ecurrentTarget是干什么的
etarget获取当前实际触发事件节点，ecurrentTarget获取获取当前监听节点。
11111
$('div')on('click',function(e){consolelog(ecurrentTarget);consolelog(etarget);})
如果点击span的输出：
li对象
span对象
点击li的非span区域，输出
li对象
li对象
preventDefault与stopPropagation是干什么的
windowonload = function(){
var oUl = documentgetElementById("ul");
var aLi = oUlgetElementsByTagName("li");
oUlonclick = function(ev){
var ev = ev || windowevent;
var target = evtarget || evsrcElement;
if(targetnodeNametoLowerCase() == "li"){
var that=target;
var index;
for(var i=0;i<aLilength;i++)if(aLi[i]===target)index=i;
if(index>=0)alert('我的下标是第'+index+'个');
targetstylebackground = "red";
}
}
}
以上就是关于原生js怎么注册委托事件全部的内容，包括:原生js怎么注册委托事件、怎么理解js中的事件委托、北大青鸟分享js代码事件机制识别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）