js.冒泡、阻止、监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body onclick="addSome('div<br>')">
		<div onclick="addSome('div<br>')">
			<p onclick="addSome('div<br>')">click</p>
		</div>
		<div class="con"></div>
		<div class="center">
			<p>IE事件监听的方法</p>
		</div>
		<script>
			/*事件流：
			 * 浏览器中的事件类型分为冒泡型事件和捕获型事件
			 * IE不支持捕获型事件
			 * 冒泡型事件：事件按照从最特定的时间目标到最不特定的时间目标的顺序逐一触发
			 * 捕获相反
			 */
			function addSome(str){
				var div = document.getElementsByClassName("con")[0];
				div.innerHTML += str;
				alert("我被点击了");
			}
			/*事件监听：
			 * 页面中的事件需要一个函数来响应，这类函数就叫事件处理函数
			 * 这些函数也在实时监听是否有事件发生，所以也称为事件监听函数
			 * 不同浏览器，对于事件监听函数的调用方法是不一样的
			 */
			/*IE调用事件监听（低版本IE6.7.8方法，高版本已主流）
			 * attachEvent()用来给某个元素添加监听事件
			 * detachEvent()用来给某个元素删除监听事件
			 * 语法：
			 * 变量名.attachEvent("arg1",arg2)
			 * 变量名.detachEvent("arg1",arg2)
			 * "arg1"——事件名称，比如"onclick","onload"...
			 * arg2——监听函数的名称，不能加括号
			 */
			var p01 = document.getElementsByClassName("center")[0].getElementsByTagName("p")[0];
			function clickFun(){
				alert("我被发现了");
				p01.removeEventListener("click",clickFun,false);//删除标准DOM监听方法
			}
			/*标准的DOM监听方法
			 * 有两个方法来实现添加和删除监听函数，addEventListener()和removeEvenListener()
			 * 语法：
			 * 变量名.addEventlistener("事件名称",函数名,事件类型)
			 * 函数名不加括号，事件类型，true是捕获型事件，false是冒泡型事件，一般用false。
			 */
			p01.addEventListener("click",clickFun,false);//添加标准DOM监听方法
		</script>
		<div id="div01"	>
			<div id="div02"	>
				<div id="div03"	>
				</div>
			</div>	
		</div>
		<a href="http://www.baidu.com" target="_blank" onclick="stopLink(event)">百度一下</a>
		<script>
			/*阻止事件冒泡*/
			var divs = document.getElementById("div03");
			divs.addEventListener("click",function(event){
				console.log(window.event);
				event.stopPropagation();//阻止冒泡
				alert("div03");
			},false)
			
			function stopLink(event){
				if(event.preventDefault()){
					event.preventDefault();//阻止默认事件
					console.log(event.returnValue);
				}else{
					event.returnValue = false;
				}
				alert("不跳转")
			}
		</script>
	</body>
</html>
js.冒泡、阻止、监听

猜你喜欢
