js事件

Posted xiao_style

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js事件相关的知识，希望对你有一定的参考价值。

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="添加" 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>

监听事件:

<div class="jianting1">通用监听事件，点我</div>
<div class="jianting2">IE监听事件，点我</div>
<div class="jianting3" style="background: red;">标准DOM监听事件，点我</div>


window.onload = function(){
	        	/*监听事件 1通用*/
	        	var tongy1 = document.getElementsByClassName("jianting1")[0];
	        	tongy1.onclick = function(){
	        		
	        		alert("我监听到了");
	        		
	        	}
	        	/*标准DOM*/
	        	var biao3 = document.getElementsByClassName("jianting3")[0];
	        	biao3.addEventListener("click",click1,false);
	        	biao3.addEventListener("click",click2,click1);
	        	
	        }
                function click1(){
	        	var biao3 = document.getElementsByClassName("jianting3")[0];
	        	timer=setInterval(function(){
	        		if(parseInt(biao3.style.width) == 100){
	        			alert("我现在的宽是100")
	        			clearInterval(timer);
	        		}
	        		biao3.style.width = sum+"px";
	        		sum-=10;
	        	},200);
	        }
	        function click2(fn){
	        	var biao3 = document.getElementsByClassName("jianting3")[0];
	        	clearInterval(timer);
	        	timer=setInterval(function(){
	        		if(parseInt(biao3.style.width) == 200){
	        			alert("我现在的宽是200")
	        			if(fn){
	        				fn();
	        			}
	        		}
	        		biao3.style.width = sum+"px";
	        		sum+=10;
	        	},200);
	        }

　　

　　

 

以上是关于js事件的主要内容，如果未能解决你的问题，请参考以下文章

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

原生js禁止页面滚动

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程