13DOM编程：自定义事件

最新推荐文章于 2022-04-12 16:56:53 发布

_wayliu

最新推荐文章于 2022-04-12 16:56:53 发布

阅读量115

点赞数

分类专栏：解锁前端面试体系核心攻略

本文链接：https://blog.csdn.net/weixin_44499465/article/details/115063933

版权

解锁前端面试体系核心攻略专栏收录该内容

20 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #divA,
    #divB,
    #divC {
      width: 100px;
      height:100px;
    }
    
    #divA {
      background-color: #333;   
    }
    
    #divB {
      background-color: #dd5990; 
    }
    
    #divC {
      background-color: #ccc990; 
    }
  </style>
</head>
<body>
  <div id="divA">我是A</div>
  <div id="divB">我是B</div>
  <div id="divC">我是C</div>
</body>
<script type="text/javascript">
	var clickAEvent = new Event('clickA');
	// 获取 divB 元素 
	var divB = document.getElementById('divB')
	// divB 监听 clickA 事件
	divB.addEventListener('clickA',function(e){
	  console.log('我是小B，我感觉到了小A')
	  console.log(e.target)
	}) 
	
	// 获取 divC 元素
	var divC = document.getElementById('divC')
	// divC 监听 clickA 事件
	divC.addEventListener('clickA',function(e){
	  console.log('我是小C，我感觉到了小A')
	  console.log(e.target)
	}) 
	
	// A 元素的监听函数也得改造下
	divA.addEventListener('click',function(){
	  console.log('我是小A')
	  // 注意这里 dispatch 这个动作，就是我们自己派发事件了
	  divB.dispatchEvent(clickAEvent)
	  divC.dispatchEvent(clickAEvent)
	})  
</script>
</html>

动作演示
在这里插入图片描述
点击"我是A"块，控制台：

自定义事件步骤

创建一个本来不存在的”clickA“事件表示A被点击了

var clickAEvent = new Event('clickA');

完成事件监听和派发

var divB = document.getElementById('divB')
	// divB 监听 clickA 事件
	divB.addEventListener('clickA',function(e){
	  console.log('我是小B，我感觉到了小A')
	  console.log(e.target)
	}) 
	
	// 获取 divC 元素
	var divC = document.getElementById('divC')
	// divC 监听 clickA 事件
	divC.addEventListener('clickA',function(e){
	  console.log('我是小C，我感觉到了小A')
	  console.log(e.target)
	}) 
	
	// A 元素的监听函数也得改造下
	divA.addEventListener('click',function(){
	  console.log('我是小A')
	  // 注意这里 dispatch 这个动作，就是我们自己派发事件了
	  divB.dispatchEvent(clickAEvent)
	  divC.dispatchEvent(clickAEvent)
	})

_wayliu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13DOM编程：自定义事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&lt
复制链接

扫一扫