js事件三要素事件委托

最新推荐文章于 2022-09-10 23:34:59 发布

敬礼 salute

最新推荐文章于 2022-09-10 23:34:59 发布

阅读量320

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/weixin_49868928/article/details/109759469

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

事件三要素:1 事件源 2 事件类型 3 事件处理程序
事件的使用:
1 在标签行内能过属性使用事件

2 通过js注册事件:
           事件源.事件类型 = function(){}
           事件源.addEventListener("事件类型",处理程序,布尔值);
                  事件类型:字符串,不加on
                  处理程序: 匿名函数或调用函数
                  布尔值:
           事件源.attachEvent();     //IE浏览器

//有兼容性的注册事件函数
function addEvent(element,eventType,funName,broad){
	if(element.addEventListener){
	//谷歌浏览器
		element.addEventListener(eventType,funName,broad);
	}else if(element.attachEvent){
	//IE浏览器
	    element.attachEvent("on"+eventType,funName);
	}else{
	//火狐及其他浏览器
	    element["on"+eventType] = funName;
	}
}

    3 移除事件
          事件源.事件类型 = null;
          事件源.removeEventListener(“事件类型”);
          事件源.detachEvent(“事件类型”);

//有兼容性的移除事件函数
			function removeEvent(element,eventType,funName,broad){
				if(element.removeEventListener){
					element.removeEventListener(eventType,funName,broad);
				}else if(element.detachEvent){
					element.detachEvent("on"+eventType,funName);
				}else{
					element["on"+eventType] = null;
				}
			}

2.event常见属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event常见属性</title>
    <script src="public.js"></script>
    <style>
        div{
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="01">

    </div>
    <script>
        var div01=document.getElementById('01');
        addEvent(div01,'click',div01Click,false);
        function div01Click(){
            console.log(event.type);
            console.log(event.target);
        }
    </script>
</body>
</html>

js中的事件委托

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件委托</title>
		<script src="addevent.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
			<li>第01个</li>
			<li>第02个</li>
			<li>第03个</li>
			<li>第04个</li>
			<li>第05个</li>
			<li>第06个</li>
			<li>第07个</li>
			<li>第08个</li>
			<li>第09个</li>
			<li>第10个</li>
		</ul>
		<script type="text/javascript">
			var ul = document.getElementsByTagName("ul")[0];
			addEvent(ul,"click",ulClick,true);
			function ulClick(){
				var now = event.target;  //当前事件源
				now.style.backgroundColor = "pink";	
				//var ulTemp = now.parentElement.children; //通过当前事件源找到父元素的所有子元素
				var ulTemp = this.children; //this指的是注册事件元素
				for(var i=0;i<ulTemp.length;i++){
					if(ulTemp[i] != now){
						ulTemp[i].style.backgroundColor = "white";
					}
				}
				// for(var i=0;i<ul.children.length;i++){
				// 	if(ul.children[i] != now){
				// 		ul.children[i].style.backgroundColor = "white";
				// 	}
				// }
				// console.log("now:"+now.valueOf());
				// console.log("this:"+this.valueOf());
			}
		</script>
	</body>
</html>

事件三个阶段

1捕获
2当前
3冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件三个阶段</title>
		<style>
			#d0{
				margin: 50px auto;
				width: 400px;
				height: 400px;
				background-color: #008000;
			}
			#d1{
				margin: 50px auto;
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
			}
			#d2{
				margin: 50px auto;
				width: 200px;
				height: 200px;
				background-color:  #FFFF00;
			}
			
		</style>
	</head>
	<body>
		<div id = "d0">
			<div id = "d1">
				<div id = "d2"><input type="button" value="测试" id = "in1"></div>
			</div>
		</div>
		<script type="text/javascript">
			var d0 = document.getElementById("d0");
			var d1 = document.getElementById("d1");
			var d2 = document.getElementById("d2");
			//addEvent(d0,"click",d0Onclick,false);
			addEvent(d0,"click",d0Onclick,true);
			addEvent(d1,"click",d1Onclick,false);
			addEvent(d2,"click",d2Onclick,false);
			function d0Onclick(){
				alert("d0单击");
				console.log("d0:"+event.eventPhase);
			}
			function d1Onclick(){
				alert("d1单击");
				console.log("d1:"+event.eventPhase);
			}
			function d2Onclick(){
				alert("d2单击");
				console.log("d2:"+event.eventPhase);
			}
			//有兼容性的注册事件函数
			function addEvent(element,eventType,funName,broad){
				if(element.addEventListener){
					element.addEventListener(eventType,funName,broad);
				}else if(element.attachEvent){
					element.attachEvent("on"+eventType,funName);
				}else{
					element["on"+eventType] = funName;
				}
			}
			//有兼容性的移除事件函数
			function removeEvent(element,eventType,funName,broad){
				if(element.removeEventListener){
					element.removeEventListener(eventType,funName,broad);
				}else if(element.detachEvent){
					element.detachEvent("on"+eventType,funName);
				}else{
					element["on"+eventType] = null;
				}
			}
		</script>
	</body>
</html>

敬礼 salute

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件三要素事件委托

事件三要素:1 事件源 2 事件类型 3 事件处理程序事件的使用:1 在标签行内能过属性使用事件2 通过js注册事件: 事件源.事件类型 = function(){} 事件源.addEventListener("事件类型",处理程序,布尔值); 事件类型:字符串,不加on 处理程序: 匿名函数或调用函数布尔值: 事件源.a
复制链接

扫一扫