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中的面向对象编程