事件冒泡、捕获、委托、行为型事件委托

最新推荐文章于 2024-03-31 18:09:13 发布

喵喵程序媛

最新推荐文章于 2024-03-31 18:09:13 发布

阅读量104

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_47067248/article/details/107708204

版权

事件捕获、事件冒泡

事件监听: 允许对同一个事件进行多次监听（添加多个事件处理函数）

element.addEventListener("事件名", 事件处理函数, 是否采取捕获boolean --默认false)

取消事件绑定：

element.removeEventListener("事件名", 声明函数的名字)
element.on事件名 = null

捕获事件：目标元素的父类元素能够捕捉到子类添加的事件，当事件触发时，可以先行触发自己相应事件的绑定函数
事件冒泡：目标元素事件触发后，事件会沿着DOM树向它的父类元素传递，触发父类元素对应的事件处理函数
  		目标元素触发事件  -->  目标元素父系元素执行捕获事件，从DOM树上层向下层传递  -->   目标元素执行自身事件   -->  目标元素父系元素执行冒泡事件，从DOM树下层向上层传递

事件委托

利用事件的冒泡机制与event.target可以找到触发事件元素的特性，实现子元素的事件委托给父元素监听的过程。

优点：
1. 节省了DOM操作次数
2. 新添加的子元素也能拥有事件

  <ul class="ul">
        <li>li_1</li>
        <li>li_2</li>
        <li>li_3</li>
        <li>li_4</li>
    </ul>
    <button class="btn">新增li</button>
    <script>
        // 
        var ulEl = document.querySelector('.ul');
        // 循环绑定事件
        var lis = document.querySelectorAll('.ul>li');
        //
        var btn = document.querySelector('.btn');
        // for(var i = 0 ; i < lis.length ; i ++){
        //     lis[i].onclick = function(){
        //         console.log(this.innerText);
        //     }
        // }
        btn.onclick = function(){
            lis = document.querySelectorAll('.ul>li');
            // 1. appendChild 
            // 2. innerHtml
            var li = document.createElement('li');
            li.innerText = 'li_'+(lis.length+1); // li_5
            ulEl.appendChild(li);
        }
        // 如何给新增的元素添加事件??
        ulEl.onclick = function(e){
            // 触发点击事件对象 
            var target = e.target;
            // 判断过滤委托对象本身(ul)
            // if(target.tagName(''))
            // console.log(target.tagName);
            if(target.tagName == 'LI'){
                //给目标元素添加事件即可
                console.log(target.innerText);
            }else{
                console.log('点歪了...');
            }
            
        }
    </script>

行为型事件委托

根据某个特征声明一类事件，用文档对象监听事件。

  <body>
		
		<button data-count="0">0</button>
		<p data-count="0">0</p>
		<span data-count="0">0</span>
		
		<div>14</div>
		<p data-color="orange">忽如一夜春风来，千树万树梨花开。</p>
		<h3 data-color="purple">李白乘舟将欲行，忽闻岸上踏歌声。</h3>
		
		<script type="text/javascript">
			/*
			行为型事件委托：根据某个特征声明一类事件，用文档对象监听事件
			*/
		   
			document.body.addEventListener("click", function () {
				if(event.target.dataset.count){
					event.target.innerText = Number(event.target.innerText) + 1;
					
				}
			})
			
			document.body.addEventListener("click", function () {
				if(event.target.dataset.color){
					event.target.style.color = event.target.dataset.color;
					
				}
			})
		</script>
	</body>

喵喵程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡、捕获、委托、行为型事件委托

事件捕获、事件冒泡事件监听: 允许对同一个事件进行多次监听（添加多个事件处理函数）element.addEventListener("事件名", 事件处理函数, 是否采取捕获boolean --默认false)取消事件绑定：element.removeEventListener("事件名", 声明函数的名字)element.on事件名 = null捕获事件：目标元素的父类元素能够捕捉到子类添加的事件，当事件触发时，可以先行触发自己相应事件的绑定函数事件冒泡：目标元素事件触发
复制链接

扫一扫