JAVASCRIPT DOM EVENT 初探
在项目中实验了一下 JAVASCRIPT ---- DOM ---- EVENT
因为原先看过在父节点进行事件的捕捉，所以我也就来实验了一下。
因为接手的项目很不规范 ... 所以 ... 不说啦 ... 还是进入主题 ...
结论是这样的 ，
使用 JS document.getElementById(“id”) .onclick = function(event){ /*** function body here ***/ } 来进行父节点事件绑定是可以捕捉到所有的子节点的 click事件的。
使用 JQUERY 的 $(“#id”).bind(“click”,function(event))(){/*** function body here ***/}) 来进行父节点事件绑定有的时候不能够捕捉到子节点的 click 事件。
因为在这里原项目使用了第三方的 JQUERY 插件来渲染子元素 。很有可能就导致了功能冲突。我也是 DEBUG 了很久，最后还是决定使用 JAVASCRIPT 原生 DOM 来实现事件绑定的。在使用 JQUERY 的情况下不推荐使用 DOM 来完成 JQUERY 能够实现的功能。这样可能会破坏代码的可读性和美观程度。当你阅读代码的时候发现各种混乱的搭配，你会疯掉的。
所以以后在做类似父节点事件绑定的话，假如 JQUERY 事件绑定无效，就可以先使用 document.getElementById(“element_id”).onclick = function(event){
/*** function body ***/
};
来进行事件的绑定，看看是否能成功。
关于 event.target 和 event.currentTarget
Event.target指向的是实际触发事件的子元素。
Event.currentTarget指向的是绑定处理事件的父元素。
Return type 返回的是 html dom 元素，跟使用 document.getElementById 获得的元素是相同的。
可以使用 . 号析取操作符号来获得对应 HTML 元素的各项属性 …
另外就是关于事件捕捉和冒泡，基本上来说事件都是在冒泡阶段进行处理的，是通过事件流的方式，事件流不会因为处理事件的进行而中断。这也就是说假如在子节点和父节点都有相应的处理事件，则两个处理事件都会被触发到，因为事件流并没有被截断。
下面直接给出代码。
<script>
window.onload = function(){
//在父元素绑定事件，单击子元素查看 event.target 和 event.currentTarget 的效果
document.getElementById("tableRowsClick").onclick = function(event){
alert( "event.target = " + event.target.id);
alert( "event.currentTarget =" + event.currentTarget.id);
}
//在子节点也绑定事件看看事件流还能到父节点么
document.getElementById("row_2").onclick = function(event){
alert("before father node capture!");
};
}
</script>
</head>
<body id = "mainBody">
<table id = tableRowsClick>
<tr><td id = "row_1"> row_1 </td></tr>
<tr><td id = "row_2"> row_2 </td></tr>
</table>
大家可以自己看一下处理的结果 ..
即使子节点已经对 click 事件进行了处理但是事件流还是没有断。
当然事件流也是可以被人为截断的…
可以通过 event.preventDefault() 来取消事件的默认行为
也可以通过 event.stopPropagation() 来取消事件进一步捕捉和冒泡
另外这份文档整理的事件比较早了。使用了 jquery 的 bind() 函数来进行事件绑定。这样其实不是很好。推荐使用 delegate @屈小伟 。能够很方便的进行事件绑定而且逻辑也更加清晰。
Thank you for reading …