javascript1事件

最新推荐文章于 2022-11-20 16:43:45 发布

忆搁浅啊

最新推荐文章于 2022-11-20 16:43:45 发布

阅读量128

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_37839978/article/details/100056186

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、事件注册

作用：
	就是在标签里添加属性，可以对标签进行操作的功能

方法

事件名	作用
onclick	点击时触发
ondblclick	双击时触发
onmouseenter	鼠标进入时触发（就触发一次)
onmouseleave	鼠标离开时触发
onfocus	元素获得焦点时触发(文本框)
onblur	失去焦点时触发（焦点就是鼠标点击的位置)
onmouseover	和enter差不过,只不过里面有别的标签页触发
onmouseout	同上
onmousedown	鼠标点击的时候触发
onmouseup	鼠标松开的时触发
onchange	用户改变内容
onkeydown	键盘键被按下，显示前一个，包括键盘的大多数键
onkeyup	键盘键松开
onkeypress	键盘的键被按下，不包括别的键
onload	用于解决事件注册的提前加载问题

event对象

简介：
	是所有的对象的信息，可以尝试使用，感觉很方便

事件冒泡

简介：
	就是多个事件对同一个操作，会引起多个操作，就和python的菱形继承差不多
解决方案：
	加个stopPropagetion()
	阻止向上一层传递

2、常用技巧

超链接

应用：
	有时候需要对用户提交的数据进行操作
<a href="javascript:void(0)" οnclick="myclick()"></a>
通过javacript:void(0)参数，可以不直接跳转，到myclick()函数里面在进行跳转

form表单

同上，需要对用户的数据进行处理的时候。
方法：
	把input中的submit按钮替换成button，然后处理

this对象

作用：
	代表当前表单
使用：
	当做时间的参数传递，可以自己看一下

另外的事件注册方式

原因：
	直接在表单里面加入事件的方式，使得代码有很高的耦合性，而我们一般不需要代码那么高的耦合性，所以引用了另外一种事件注册的方式。
简要说明一下代码：
			一般来说，什么样式的代码放在什么代码块中，就是为了解决代码之间的高耦合性。


使用：
	在script里面对标签进行添加事件
	var b=document.getElementsByName('')[0]
	b.οnclick=function(){
 		....
	}等，但是会出一个问题，
	JavaScript是一个脚本语言，从上往下执行，所以会先加载JavaScript里面的内容，所以找不到name里面的，
	这个时候就需要解决这个问题：
		一：
			写在需要为这个标签设置的后面
		二：
			把这个写成一个函数，在body标签里面加载。
			function fu(){
	var b=document.getElementsByName('')[0]
	b.οnclick=function(){...}}
	<body οnlοad="fu()">

DOM对象

说明：文件对象模型(document object model)
	以上的使用，都是使用的dom对象，dom就是对HTML页面进行操作的一个模块
	简单来说：就是HTML除了页面上最上面的那一个框，其余的都是dom操作
作用：
	可以访问HTML的所有元素，并且可以改变。
获取到标签的几种方法：
	document.getElementById()			通过id获取，只能一个
	document.getElementsByTagName()		通过标签名获取,多个(数组)
	document.getElementsByName()		通过名字获取，多个(数组)
	document.getElementsByClassName()	通过类名获取，多个(数组)

对于HTML中的修改：

都可以通过上面获取的对象，直接修改

通过以上对象获取当前标签的所有子标签：
	children
获取父标签：
	parentNode
上一个兄弟标签:
	previousElementSibing
下一个兄弟标签：
	nextElementSibing

更改文档内容

获取当前标签的所有内容：（包括别的标签）
	innerHTML
不包括别的标签：
	innerTEXT
同上，修改内容也可以用这两个修改

删除标签

removeChild（标签)			删除字标签
remove（标签）				删除当前标签

增加标签

var name=document.createElement(标签名)		注意标签名用引号括起来
var text=document.createTextNode(内容)		 添加标签内容
name.appendchild(text)
要添加的标签.appendchild(name)
insertBefore(添加的标签，指定的标签)		      添加到指定标签之前

BOM

BOM（brower object model）浏览器对象模型
作用：
	管理窗口与窗口之间的通讯，其核心对象是window

方法：
	alert()			警告框
	confirm（）		确认框（返回布尔值）
	prompt（）		提示框（）手机信息
	history.formad()	在浏览器历史中前进一步
	history.back()		后退一步
	screen.width		屏幕宽度
	screen.height		屏幕高度
	navigator.appVersion	浏览器版本
	location.href		加载网页
	document.forms[0]	获取HTML的form表单
	document.write		向网页写入内容

计时器：
	setInterval（function(){},time)		返回事件的id，每time执行一次function
	clearInterval(id)					移除事件
	clearTimeout(id)					移除事件
	setTimeout(fucntion(){},time)		延迟执行函数
<script src="url">			引入外部的

忆搁浅啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript1事件

1、事件注册作用：就是在标签里添加属性，可以对标签进行操作的功能方法事件名作用onclick点击时触发ondblclick双击时触发onmouseenter鼠标进入时触发（就触发一次)onmouseleave鼠标离开时触发onfocus元素获得焦点时触发(文本框)onblur失去焦点时触发（焦点就是鼠标点击的位置)on...
复制链接

扫一扫

专栏目录