js事件流

最新推荐文章于 2025-06-08 15:44:34 发布

程序员库里

最新推荐文章于 2025-06-08 15:44:34 发布

阅读量522

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.csdn.net/chaofei_liang/article/details/77914599

js 专栏收录该内容

12 篇文章

订阅专栏

1.HTML事件处理程序:

JS事件放在HTML里面。

<!DOCTYPE html>
<html>
<head>
	<title>HTML事件处理程序</title>
</head>
<body>
<div>
	<input type="button" value="按钮" onclick="show">
</div>

<script type="text/javascript">
	function show(){
		alert('hello world')
	}
</script>
</body>
</html>

2.DOM0级事件处理程序：

<!DOCTYPE html>
<html>
<head>
	<title>DOM0级事件处理程序</title>
</head>
<body>
<div id="box">
	<input type="button" value="按钮" id="btn">
</div>

<script type="text/javascript">
	var btn=document.getElementById('btn');
	btn.onclick=function(){
		alert('hello world')
	}

	btn.onclick=null;//取消onclick事件
</script>
</body>
</html>

3.DOM2级事件处理程序

<!DOCTYPE html>
<html>
<head>
	<title>DOM2级</title>
</head>
<body>
<div id="box">
	<input type="button" value="按钮" id="btn">
</div>
<script type="text/javascript">
	//DOM2级事件定义了两个方法
	//用于处理指定和删除事件程序的操作
	//addEventListener()和removeEventListener()
	//接收三个参数：要处理的时间名、事件处理程序、布尔值（true:捕获阶段、false:冒泡阶段）
	//一个按钮上可以添加多个事件
	var btn=document.getElementById('btn');
	btn.addEventListener('click',function(){
		alert('hello world');
	},false);
	//删除事件的参数必须和添加事件的一样，
	btn.removeEventListener('click',function(){
		alert('hello world');
	},false);

</script>
</body>
</html>

4.IE事件处理程序

<!DOCTYPE html>
<html>
<head>
	<title>IE事件处理程序</title>
</head>
<body>
<div id="box">
	<input type="button" value="按钮" id="btn">
</div>

<script type="text/javascript">
	//attachEvent()添加事件
	//detachEvent()删除事件
	//接收相同的两个参数：事件名称、事件程序

	var btn=document.getElementById('btn');
	btn.attachEvent('onclick',function(){
		alert('hello')
	});
	btn.detachEvent('onclick',function(){
		alert('hello')
	})
</script>
</body>
</html>

5.跨浏览器事件处理程序

<!DOCTYPE html>
<html>
<head>
	<title>跨浏览器事件处理</title>
</head>
<body>
<div id="box">
	<input type="button" value="按钮" id="btn">
</div>


<script type="text/javascript">
	function show(){
		alert('hello');
	}
	var eventUtil={
		//添加事件
		addHandler:function(element,type,handler){
			if(element.addEventListener){
				addEventListener(type,handler,false);
			}else if(element.attachEvent){
				attachEvent('on'+type,handler);
			}else{	
				element['on'+type]=handler;
			}
		}
		//删除事件
		removeHandler:function(element,type,handler){
			if(element.removeEventListener){
				removeEventListener(type,handler,false);
			}else if(element.attachEvent){
				detachEvent('on'+type,handler);
			}else{	
				element['on'+type]=null;
			}
		}
	}
	eventUtil.addHandler(btn,'click',show);
	eventUtil.removeHandler(btn,'click',show);
</script>
</body>
</html>

6.DOM事件对象

<!DOCTYPE html>
<html>
<head>
	<title>DOM事件对象</title>
</head>
<body>
<div id="box">
	<input type="button" value="按钮" id="btn">
	<a href="http://www.baidu.com" id='go'>跳转</a>
</div>

<script type="text/javascript">
	//1.DOM的事件对象
		//(1)type属性 用于获取时间类型
		//(2)target属性 用户获取事件目标
		//(3)stopPropagation()阻止事件冒泡
		//(4)preventDefault()阻止默认行为


		var btn=document.getElementById('btn');
		var box=document.getElementById('box');
		var go=document.getElementById('go');
		btn.onclick=function(e){
			alert('btn')
			e.stopPropagation();
		};
		box.onclick=function(){
			alert('box')
		};
		go.onclick=function(e){
			e.stopPropagation();
			e.preventDefault();
		}
</script>
</body>
</html>

7.IE事件对象

<!DOCTYPE html>
<html>
<head>
	<title>IE事件对象</title>
</head>
<body>

<div id="box">
	<a href="" id="go">跳转</a>
</div>
<script type="text/javascript">
	//1.IE的事件对象
		//(1)type属性 用于获取时间类型
		//(2)srcElement属性 用户获取事件目标
		//(3)cancelBubble属性：true:阻止事件冒泡
		//(4)returnValue属性：flase:阻止默认行为
window.onload=function(){
	var go=document.getElementById('go');
	var box=document.getElementById('box');
	eventUtil.addHandler(box,'click',function(){
		alert('111')
	})
}
		var eventUtil={
		//添加事件
		addHandler:function(element,type,handler){
			if(element.addEventListener){
				addEventListener(type,handler,false);
			}else if(element.attachEvent){
				attachEvent('on'+type,handler);
			}else{	
				element['on'+type]=handler;
			}
		},
		//删除事件
		removeHandler:function(element,type,handler){
			if(element.removeEventListener){
				removeEventListener(type,handler,false);
			}else if(element.attachEvent){
				detachEvent('on'+type,handler);
			}else{	
				element['on'+type]=null;
			}
		},

		getEvent:function(event){
			return event?event:window.event;
		},
		getType:function(event){
			return event.type;
		},
		getTarget:function(){
			return event.target||event.srcElement
		},
		preventDefault:function(event){
			if(event.preventDefault{
				event.preventDefault()
			}else{
				event.returnValue=false;
			}
		},
		stopPropagation:function(){
			if(event.stopPropagation){
				event.stopPropagation();
			}else{
				event.cancelBubble:false;
			}
		}
	}
</script>
</body>
</html>