开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS day11—事件 -> 正文阅读

[JavaScript知识库]JS day11—事件

1.事件：

对某个元素的某种操作

事件三要素：事件元素，事件类型，事件对象（可有可无）

事件对象：当某个事件触发时产生的对象，就是事件对象。

event使用前提，必须有事件。不同的对象产生的事件不同。

事件对象的兼容写法：

var e = evt || event

宏观事件分为鼠标事件和键盘事件。

2.鼠标事件对象的属性：

坐标属性：

pageX / pageY? 相对于整个文档（整个页面）顶部和左侧的坐标

clientX / clientY? 相对于局部窗口（窗口）的左侧和顶部的坐标

offsetX /offsetY? 相对于内部元素的距离（离自己最近的父元素）左侧和顶部的坐标常用于拖拽

3.键盘事件对象：

键盘事件对象的事件源是documnt

onkeyUp: 用户释放某一个按键时触发该事件

onkeyDown: 用户按下按键时触发该事件

onkeyPress: 用户按下按键，并且产生一个字符时才会触发该事件

ctrl+回车=10（返回值为10）

事件对象相关属性：

keyCode: 获取键盘按键值? ?字母对应其ASCII值识别?

ctrlKey：判断ctrl键是否被按下--------是则true，不是则false

键盘检测兼容写方法：

var key = e.keyCode || e.which || e.charCode;

4.事件流：

事件流：当某个事件执行时，从子元素向父元素触发或从父元素向子元素触发?

事件流的两种模式：

? ?冒泡：子向父触发---------当某个事件触发时，同样的事件会向父元素触发。

*******并不是所有的事件都产生冒泡：

onfocus（聚焦）onblur（失焦）onload（延迟加载）不会产生冒泡。

? ?捕获：从父元素向子元素触发--------当某个事件触发时，同样的事件会向子元素触发。

阻止事件流冒泡：

事件对象.stopPropagation();--------对事件的触发源添加该方法

兼容写法：

e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;

5.阻止浏览器的默认事件：

兼容写法：

e.preventDefault?e.preventDefault():e.returnValue = false;

或：

return false;

右键的事件：oncontextmenu

onmouseover：鼠标指针移动到事件对象时执行事件-----只在刚进入区域时触发

onmousemove：和onmouseover差不多，但是鼠标在区域内移动鼠标，也会触发事件

onmousedown：鼠标按钮按下事件对象时触发事件

onmouseout：鼠标移出事件对象触发该事件

6.事件绑定的方式：

1.通过html元素绑定事件

2.通过js对象绑定事件

前两个事件绑定的缺陷：

1.无法决定事件流传递是冒泡还是捕获

2.无法为相同的元素多次绑定相同的事件

****3.事件监听-------本质也是事件绑定

该方法的好处：

1.可以为同样的元素绑定多次同一个事件

2.可以决定事件流的传递是冒泡还是捕获

使用方法：

DOM对象.addEventlistener（去掉on的事件名，回调函数，[事件捕获还是冒泡]------false，不写则为冒泡。true为捕获）

当相同元素绑定相同事件时：当捕获与冒泡同时存在时，先捕获在冒泡

7.取消事件的绑定效果：

非ie的浏览器

document.οnclick=null；

监听取消：

document.removeEventListener（去掉on的事件名，回调函数-----此函数与监听的函数一样）

注意事项：

?两个方法的回调函数必须是同一个函数对象才可以取消

8.事件委托：-----依赖与冒泡机制

事件委托：某个元素的事件触发后，让别的元素的回调函数去执行

此方法的好处：

1.将大量子元素的事件绑定至其父元素，从而提高程序执行的效率

2.可以对父元素所有子元素添加事件效果，即使这个子元素是未来创建的

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" />
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<button type="button">添加</button>
	</body>
</html>
<script type="text/javascript">

	var otext = document.querySelector("input");
	var obut = document.querySelector("button");
	var oul = document.querySelector("ul");
     //当鼠标移入时添加高亮效果
	oul.onmouseover = function(evt) {
		var e = evt || event;
		//获取真实的操作源
		var target = e.srcElement || e.target;
		//targe.tagName：返回的是操作源的标签名（大写）
		if (target.tagName == "LI") {
			target.style.backgroundColor = "hotpink";
		}
	}
     //当鼠标移出时清除高亮效果
	oul.onmouseout = function(evt) {
		var e = evt || event;

		var target = e.srcElement || e.target;

		if (target.tagName == "LI") {
			target.style.backgroundColor = "";
		}
	}
     //按添加按钮时添加新的li
	obut.onclick=function(){
		var oli=document.createElement("li");
		oli.innerHTML=otext.value;
		oul.appendChild(oli);
	}
</script>

9.JSON的扩充

1.json转字符串

JSON.stringify（）；

 var json = {"name":"呆毛","age":20};
	 var str = JSON.stringify(json);
	 console.log(str,typeof str);//类型为字符串

2.字符串转json

JSON.parse（）；

	var str = '{"name":"呆毛","age":20}';
	var json = JSON.parse(str);
    //对json的所有key值进行遍历
	for(var index in json){
		console.log(json[index]);
	}

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-09-22 14:35:15 更:2021-09-22 14:37:37

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/18 22:04:16-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码