js事件、标签操作、BOM

最新推荐文章于 2024-06-19 14:30:50 发布

cf313995

最新推荐文章于 2024-06-19 14:30:50 发布

阅读量300

点赞数

分类专栏： js学习文章标签：事件 BOM

本文链接：https://blog.csdn.net/cf313995/article/details/98875547

版权

js学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
1、注册事件

<input type="button" id="btn" value="点我">
<script>
	// 获取按钮
	var btn = document.getElementById('btn');
	// 给按钮注册点击事件
	btn.onclick = function () {
		alert(111);
	}
	// onclick无法给同一个元素注册多个同种事件。
</script>

注意：

在DOM对象中，对应标签的class属性名字叫做className，因为class在js中是关键字。关键字不可以作为变量或者属性的名字。

2、常见事件
(1)、鼠标事件

onclick	 // 当用户点击某个对象时调用的事件句柄。	
oncontextmenu	// 在用户点击鼠标右键打开上下文菜单时触发	 
ondblclick	// 当用户双击某个对象时调用的事件句柄。
onmousedown	// 鼠标按钮被按下。
onmouseenter	// 当鼠标指针移动到元素上时触发。
onmouseleave	// 当鼠标指针移出元素时触发	
onmousemove	// 鼠标被移动。
onmouseover	// 鼠标移到某元素之上。
onmouseout	// 鼠标从某元素移开。
onmouseup	// 鼠标按键被松开。

(2)、键盘事件

onkeydown	// 某个键盘按键被按下。	
onkeypress	// 某个键盘按键被按下并松开。	
onkeyup	// 某个键盘按键被松开。

(3)、框架/对象（Frame/Object）事件

onabort	// 图像的加载被中断。 ( <object>)	存在兼容性问题
onbeforeunload	// 该事件在即将离开页面（刷新或关闭）时触发	
onerror	// 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)	 
onhashchange	// 该事件在当前 URL 的锚部分发生修改时触发。	 
onload	 // 一张页面或一幅图像完成加载。
onpageshow	// 该事件在用户访问页面时触发	
onpagehide	// 该事件在用户离开当前网页跳转到另外一个页面时触发	
onresize	// 窗口或框架被重新调整大小。	
onscroll	// 当文档被滚动时发生的事件。	
onunload	// 用户退出页面。 ( <body> 和 <frameset>)

(4)、表单事件

onblur	元素失去焦点时触发	
onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)	
onfocus	元素获取焦点时触发	
onfocusin	元素即将获取焦点时触发	
onfocusout	元素即将失去焦点时触发	
oninput	元素获取用户输入时触发	
onreset	表单重置时触发	
onsearch	用户向搜索域输入文本时触发 ( <input="search">)	 
onselect	用户选取文本时触发 ( <input> 和 <textarea>)	
onsubmit	表单提交时触发

(5)、剪贴板事件

oncopy	该事件在用户拷贝元素内容时触发	 
oncut	该事件在用户剪切元素内容时触发	 
onpaste	该事件在用户粘贴元素内容时触发

(6)、拖动事件

ondrag	该事件在元素正在拖动时触发	 
ondragend	该事件在用户完成元素的拖动时触发	 
ondragenter	该事件在拖动的元素进入放置目标时触发	 
ondragleave	该事件在拖动元素离开放置目标时触发	 
ondragover	该事件在拖动元素在放置目标上时触发	 
ondragstart	该事件在用户开始拖动元素时触发	 
ondrop	该事件在拖动元素放置在目标区域时触发

事件来源：https://www.runoob.com/jsref/dom-obj-event.html

3、取消事件的的默认行为

return false;

// DOM标准方法
e.prevenDefault();

// IE老版本，非标准方式
e.returnValue = false;

4、获取标签内容
innerHTML和innerText都可以
区别：

前者获取内容的时候，如果内容中有标签，会把标签获取到。同时原封不动的把内容获取到，有换行保留。
后者获取内容的时候，如果内容中有标签，会把标签过滤掉。同时会把内容中的换行过滤掉。

innerText和textContent都可以获取内部文本，只不过会有浏览器兼容性问题。

5、设置标签内容
innerHTML和innerText都可以
区别：

前者设置内容，如果内容中带标签，会以html的方式解析。
后者设置内容，如果内容中带标签，会在网页上显示出来。

6、表单元素属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性

7、获取自定义属性的值，使用getAttribute()

<div id="box" age="18" personId="1">张三</div>
var box = document.getElementById('box');
console.log(box.getAttribute('age'));

8、设置自定义属性，使用setAttribute()

<div id="box" age="18" personId="1">张三</div>
var box = document.getElementById('box');
console.log(box.setAttribute('sex','male'));

9、删除属性，使用removeAttribute()

<div id="box" age="18" personId="1">张三</div>
var box = document.getElementById('box');
console.log(box.removeAttribute('sex'));

10、节点
父节点：parentNode
子节点：childNodes(包含属性节点、元素节点、文本节点、注释节点，可以根据nodeType是否为真盘点暖是都为元素节点)，返回值是一个Nodelist。

<div id="box">张三</div>
var box = document.getElementById('box');
console.log(box.childNodes);

判断是否包含子节点：使用hasChildNodes()方法。
兄弟节点：
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点

11、动态创建元素
document.write()

使用document.write() 输出内容，会把之前的整个页面内容覆盖掉。

element.innerHTML()
createElemet()
–>appendChild() 方法，它用于添加新元素到尾部
–>insertBefore() 方法，将新元素添加到开始位置

replaceChild(新节点、旧节点) 方法,用来替换HTML DOM 中的元素。

12、addEventListener()
用于向指定元素添加事件句柄。不会覆盖已存在的事件句柄。IE9以后才支持
addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”)。
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

13、 removeEventListener()
removeEventListener() 方法来移除事件的监听。

14、attachEvent()；detachEvent()
attachEvent(event, function)，这是IE老版本专有的，IE6-IE10支持

element.attachEvent('onclick', function(){
	alert(11);
})

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄。

15、阻止事件冒泡
标准DOM方法：stopPropagation() 停止事件传播。
老版本IE：e.cancelBubble = true;

element.onclick = function(e) {
	console.log(111);
	e.stopPropagation();
}

19、只能输入数字和键盘的文本框
keydown 键盘按下的时候
keyup 键盘弹起的时候
区别：
keydown键盘落下的时候我们所按得键还没有落入文本框。
keyup键盘弹起的时候按得键已经落入文本框。

<input id="txt" type="text">

<script>
	var txt = document.getElementById('txt');
	txt.keydown = function(e) {
		e = e || window.event;
		// e.keyCode 键盘码
		// 如果e.keycode的值在48 - 57之间是大键盘数字
		// 96-105是小键盘的数字键
		// 8是退格符←
		if ((e.keyCode < 48 || e.keyCode >57) || (e.keyCode > 105 || e.keyCode <96) || e.keyCode != 8){
			// 非数字，取消默认行为
			e.preventDefault();
		}
	}
</script>

20、BOM
BOM是浏览器对象模型。所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window.onload   页面加载完成之后执行
window.onunload  事件在用户退出页面时发生，在onunload中所有的对话框都无法使用 window对象被冻结。

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.assign   作用和location.href一样
location.replace  替换掉地址栏中的地址，但是不记录历史
location.reload    重新加载页面，参数为true强制从服务器获取页面，false如果浏览器有缓存从缓存获取。

f5刷新页面可能从缓存中加载  ctrl+f5强制从服务器获取页面刷新

window.history 对象包含浏览器的历史。

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面

window.navigator 对象包含有关访问者浏览器的信息。

浏览器代号		navigator.appCodeName
浏览器版本 		navigator.appVersion
启用Cookies	navigator.cookieEnabled
硬件平台			navigator.platform
用户请求头		navigator.userAgent

21、setTimeout()隔一段时间执行，并且只会执行一次
用于在指定的毫秒数后调用函数或计算表达式。
提示： 1000 毫秒= 1 秒。
提示：如果你只想重复执行可以使用 setInterval() 方法。
提示：使用 clearTimeout() 方法来阻止函数的执行。

setInterval()隔一段时间执行，并且会重复执行

<button onclick="myFunction()">先点我</button>
<button onclick="myStopFunction()">阻止弹出</button>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(function(){ alert("Hello") }, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}
</script>

22、