JavaScript中如何实现事件对象与事件委托的机制？
- 内容介绍
- 文章标签
- 相关推荐
本文共计446个文字，预计阅读时间需要2分钟。
在IE9以下的浏览器中，事件对象被存储在全局的`window.event`中；为了解决兼容性问题，可以将`event`对象赋值为`event || window.event`。这样，当`event`参数未定义时，它将自动从全局对象中获取事件信息。事件委托则通过事件对象的`target`属性来控制子级对象，实现事件在不同元素间的传播。
Ie9以下浏览器中的事件对象是放在全局中的window.event;
解决兼容性：event = event || window.event
事件委托（就是将事件绑定到父级/爷爷级对象上，通过事件对象的target属性来控制子级对象的改变）：
event.target（点击的目标对象）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> td{ width: 100px; height: 100px; border:2px solid red; } </style> </head> <body> <table > <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> </table> </body> <script> var tab = document.getElementsByTagName("table")[0]; tab.onclick = function (event) { //点击子级对象改变颜色 event.target.style.backgroundColor = "black"; } </script> </html>
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对自由互联的支持。如果你想了解更多相关内容请查看下面相关链接
本文共计446个文字，预计阅读时间需要2分钟。
在IE9以下的浏览器中，事件对象被存储在全局的`window.event`中；为了解决兼容性问题，可以将`event`对象赋值为`event || window.event`。这样，当`event`参数未定义时，它将自动从全局对象中获取事件信息。事件委托则通过事件对象的`target`属性来控制子级对象，实现事件在不同元素间的传播。
Ie9以下浏览器中的事件对象是放在全局中的window.event;
解决兼容性：event = event || window.event
事件委托（就是将事件绑定到父级/爷爷级对象上，通过事件对象的target属性来控制子级对象的改变）：
event.target（点击的目标对象）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> td{ width: 100px; height: 100px; border:2px solid red; } </style> </head> <body> <table > <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr> </table> </body> <script> var tab = document.getElementsByTagName("table")[0]; tab.onclick = function (event) { //点击子级对象改变颜色 event.target.style.backgroundColor = "black"; } </script> </html>
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对自由互联的支持。如果你想了解更多相关内容请查看下面相关链接