首页 > 代码库 > js事件

js事件

2024-09-02 16:17:15   238人阅读

js事件，我这里主要谈谈这三种，冒泡事件，委托事件，以及事件监听。


所谓的冒泡事件，通俗一点就是，一个泡泡往上冒，当往上面的节点事件与目标节点事件（这里是p）一致时，也会发生。

直接上货吧。老样子，先把html放上来，要明白的是这里的节点树是：

body>div>p，都添加了onclick事件，目标函数都是add(),赋予的参数不一样

body>div.maopao 这里是要放的内容块

技术分享

                        function add(dd){
				var maopao = document.getElementsByClassName("maopao")[0];/*取到maopao*/
				maopao.innerHTML+=dd;/*把参数放到这个块里*/
			   }

委托事件， 我认为与冒泡相反，既然，我的底层节点，能够触发祖先节点，那么，可不可以然祖先节点来代替我执行事件呢？

 技术分享

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>第1个</li>
			<li>第2个</li>
			<li>第3个</li>
		</ul>
		<input type="button" value="http://www.mamicode.com/添加" id="tia" />
                
                
		<script>
		    var uu = document.getElementsByTagName("ul")[0];/*我取到的是ul,不是li*/
			var btn = document.getElementById("tia");
			var num=3;
			window.onload = function(){
				
				uu.onclick = weit;/*点击事件，点击弹出提示框*/
				uu.onmouseover = mou;/*鼠标移入事件*/
				uu.onmouseout = out;/*鼠标移出事件*/
				btn.onclick = tian;/*点击添加行*/
				
			}
			function weit(e){ /*事件对象e，不懂可以看我另一篇《事件对象》*/
				var event = e ||window.event;
				var tar = e.target || e.srcElement;/*具体到某个li，就是用到这个tar,目标源，这两句解决兼容性*/
				if(tar.nodeName.toLocaleLowerCase() == "li"){/*toLocaleLowerCase()方法是把字母变小写*/
					alert(tar.innerHTML);
				}
			}
			function mou(e){
				var e=e || window.event;
				var target = e.target || e.srcElement;
				console.log(e.type);
				target.style.color = "red";
			}
			function out(e){
				var e=e || window.event;
				var target = e.target || e.srcElement;
				console.log(e.type);
				target.style.color = "#000";
			}
			function tian(){
				num++;
				var lia = document.createElement("li");
				lia.innerHTML = "第"+num+"个";
				uu.appendChild(lia);
			}
		</script>
	</body>
</html>

　　

 

js事件


联系
我们