浅谈事件冒泡，事件捕获，行为，事件委托

最新推荐文章于 2020-07-25 19:29:52 发布

不难呐

最新推荐文章于 2020-07-25 19:29:52 发布

阅读量141

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41238274/article/details/103338133

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

事件冒泡

	由微软公司提出的，就是由具体的元素逐级向上传播，直至到document对象。
	生动形象的来说就是将一个石头扔到水里，然后泡泡从里向外冒。

<body>
	<div id="country">
		中国
		<div id="pro">
			湖北
			<div id="city">
				武汉
			</div>
		</div>
	</div>
	<script>
		function getid(m){
			return document.getElementById(m);
		}
		var country = getid("country");
		var pro = getid("pro");
		var city = getid("city");
		country.addEventListener("click",function(){
			alert("中国")
		});
		pro.addEventListener("click",function(){
			alert("湖北")
		});
		city.addEventListener("click",function(){
			alert("武汉")
		});
	</script>
</body>

阻止冒泡

function bubbles(event){
  var event = event || window.event;
  if(event && event.stopPropagation) {
    //非IE浏览器
    event.stopPropagation();
  } else {
    //IE浏览器(IE11以下) 独有
    event.cancelBubble = true;
  }
  console.log("武汉呐")
}

阻止默认行为

	<body>
		<a href="http://www.baidu.com">去百度</a>
		<script>
			document.getElementsByTagName("a")[0].onclick = function(event){
				var event = event || window.event;
//				event.preventDefault();//IE9以下不兼容
				return false;
//				event.returnValue = false;//兼容老版本的IE
			}
			document.oncontextmenu = function(){ //鼠标右击事件
				console.log(123);
				return false;
			}
		</script>
	</body>

事件捕获

由网景公司提出，从最外层到最里面的具体元素，与事件冒泡刚好相反。

这两者全都是由事件流（事件发生顺序）引出的，是为解决页面中事件流的问题。

addEventListener中第三个参数

	addEventListener(event, function, useCapture)

第一个参数：所需要绑定的事件；
第二个参数：事件触发后要执行的函数；
第三个参数：若为flase,表示处于冒泡阶段，若为true，表示处于捕获阶段，一般默认值为false

事件委托
简单来说就是把自己的事情给别人做
优点：
1.减少内存消耗

<body>
	<ul>	
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
	<script>
	//普通用法：
//			var lis = document.getElementsByTagName("li");
//			for(var i =0;i<lis.length;i++){
//				lis[i].onclick = function(){
//					console.log(this.innerHTML)
//				}
//			}
//			事件委托
		var ul = document.getElementsByTagName("ul")[0];
		ul.onclick = function(event){
			var event = event || window.event;
			var target = event.target || event.srcElement;
			console.log(target.innerHTML)
		}
	</script>
</body>

在这个例子中就是将本来子元素li自己要做的事情给到了父元素ul,就是自己不想做，让他父亲做。
事件委托减少大量的内存消耗，节约效率。

2.动态绑定事件

我们有时候经常需要通过 Ajax
或用户操作动态的增加或删除列表项元素，那么在每次操作时，都要给即将删除的元素解绑事件；都要新给新添加的元素加绑定事件；

若使用事件委托无需这么麻烦，因为事件是绑定在父层，与目标元素的增删没有任何关系，执行到目标元素是在真正响应执行事件函数的过程中去匹配；
使用事件委托在动态绑定事件的情况下将减少很多重复工作。

不难呐

关注

0
点赞
踩
0

收藏

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

事件冒泡由微软公司提出的，就是由具体的元素逐级向上传播，直至到document对象。生动形象的来说就是将一个石头扔到水里，然后泡泡从里向外冒。<body> <div id="country"> 中国 <div id="pro"> 湖北 <div id="city"> 武汉 </div> ...
复制链接

扫一扫