前言:阻止事件冒泡,这句话经常听到,也会经常用到。其实事件冒泡也是有用处的,其中一个就是事件委托啦!
一、简单事件绑定例子
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <script> var oUl = document.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); for(var i=0,len= aLi.length; i<len; i++){ aLi[i].onclick = function(){ console.log(this.innerText); } } </script> </body>
这是一个事件绑定的例子,我用for循环给所有的li都绑定了一个事件,用来输出li标签自身的内容。其实我们可以通过事件冒泡给ul添加事件,从而实现该功能,而不需要通过给每个li都添加事件。(这就是事件委托了)
二、事件委托
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <script> var oUl = document.getElementsByTagName('ul')[0]; oUl.onclick = function(ev){ //window.event 用于兼容IE8及IE8以下 var ev = ev || window.event; //ev.srcElement 用于兼容IE8及IE8以下 var target = ev.target || ev.srcElement; console.log(target.innerText); } </script> </body>这样,我们就可以实现跟上面一样的效果了。