关于JavaScript的默认行为与DOM2级事件（包含事件流）

最新推荐文章于 2023-07-05 22:21:38 发布

洛伦兹的法拉第

最新推荐文章于 2023-07-05 22:21:38 发布

阅读量143

点赞数

分类专栏：前端基础· 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43724848/article/details/107366102

版权

基础· 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

前端

24 篇文章 0 订阅

订阅专栏

事件流：
- 捕获（从外到内）
- 目标
- 冒泡（从内到外）
  - 阻止冒泡方法
```
e.stopPropagation()
```
默认事件
- 浏览器<a>标签点击后默认刷新
- form表单点击提交按钮后默认刷新
- 鼠标右键页面默认弹出菜单选项
阻止默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于默认事件</title>
	</head>
	<body>
		<form action="">
			<input type="text" id="" value="" />
			<input type="submit" name="" id="" value="提交" />
		</form>
	</body>
	
</html>
<script type="text/javascript">
	var oForm = document.getElementsByTagName("form")[0];
	var oInput = document.getElementsByTagName("input")[0];
	oForm.onsubmit = function(e){
		console.log("aaaaaa");
		return false;  这是第一种方法阻止默认行为
		
		/*这是第二方法进行阻止默认行为
			var evt = e||event;
			evt.preventDefault();
		*/
	}
	oInput.onkeydown = function(){
		console.log("点击了输入框");
	}
	
	//阻止右键默认行为（弹出菜单）
	document.oncontextmenu = function(){
		return false;
	}
</script>

DOM2级事件
- 添加事件监听器
- 移除事件监听器

封装函数（IE特殊，统一封装）

//关于IE与其他浏览器的DOM2级事件的封装
/*
	里面的布尔值,判断事件执行顺序（事件流）false：冒泡；true：捕获
	obj代表要操作的对象，type为事件名（such as:click），fun为处理函数（大部分自我编写）
*/
//添加事件监听器
function addEvent( obj , type, fun){
	if(obj.addEventListener){
		obj.addEventListener(type , fun , false);
	}else{
		obj.attachEvent("on"+type , fun);
	}
}

//删除事件监听器
function deleteEvent(obj,type,fun){
	if(obj.removeEventListener){
		obj.removeEventListener(type,fun.false);
	}else{
		obj.detachEvent("on"+type,fun);
	}
}

洛伦兹的法拉第

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于JavaScript的默认行为与DOM2级事件（包含事件流）

事件流：捕获（从外到内）目标冒泡（从内到外）阻止冒泡方法 e.stopPropagation() 默认事件浏览器<a>标签点击后默认刷新 form表单点击提交按钮后默认刷新鼠标右键页面默认弹出菜单选项阻止默认行为<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&gt...
复制链接

扫一扫