事件委托 · JavaScript

## 事件委托 ``` <body> <ul id="ul"> <li>西施</li> <li>貂蝉</li> <li>昭君</li> <li>凤姐</li> </ul> <script> //事件委托:原理事件冒泡 var ul = document.getElementById('ul'); ul.onclick = function () { console.log(this); } </script> ``` 显示的结果,获取到了整个ul ![](https://box.kancloud.cn/00a8745ad5b0777607f17e18e75e9d6b_462x266.png) ## 使用 ``` <ul id="ul"> <li>西施</li> <li>貂蝉</li> <li>昭君</li> <li>凤姐</li> </ul> <script> //事件委托:原理事件冒泡 var ul = document.getElementById('ul'); ul.onclick = function (e) { //e事件参数(事件对象) //获取到当前点击的li //e.target是真正触发事件的对象 //让当前点击的li高亮显示 e.target.style.backgroundColor = 'pink'; } </script> ```