目录
一、DOM(Document Object Model:文档模型对象)
四、定时事件(Time Events 可以在一定的时间间隔内执行)
一、DOM(Document Object Model:文档模型对象)
1、DOM 当网页被加载时 浏览器会创建爱页面的 文档对象模型;
2、HTML DOM模型被结构化为DOM对象数
3、JavaScript 能改变页面中所有的HTML元素
(1)JavaScript 能改变页面中所有的HTML属性
(2)JavaScript 能改变页面中所有的CSS 样式
(3)JavaScript 能删除页面中所有的HTML元素、属性
(4) JavaScript 能添加页面中所有的HTML元素、属性
(5)avaScript 能对页面中已有的HTML事件做出处理
(6)总结:HTML DOM进行获取 更改 添加 删除
4、DOM节点
(1)节点 Node 是构成我们页面的基本组成,网页中的每一个部分都可以称为一个节点
例如:html标签、属性、文本、注释、整个文档都是一个节点
(2)节点与节点之间类型是不同的,属性和方法也不同。
例如: 标签:元素节点 :HTML文档中的HTML标签
属性:属性节点 :元素的属性
文本 :文本节点 :HTML标签中的文本内容
文档:文档节点 :整个HTML文档
(3) node 是构成HTML文档最基本的单元
二、键盘事件
释:判断当键盘按下时是不是a 如果是 输出true 否则 输出false
1、onkeydown 当按下键时
键盘上按住某个键时触发该事件。如果按住,会不断触发该事件。
2、 onkeyup 当松开键时
按住,放开键盘某个键时,该事件触发一次。
3、onkeypress 当按下并松开按键时
按下键盘某一个按键,放开时触发该事件。如果按住不放开,会不断触发该事件直至放开。
示例:代码编写
document.getElementById("inpt").onkeydown = function (event) {
event = event || window.event;
console.log(event.keyCode)
}
三、鼠标事件
1、 onclick 当鼠标单击时;
2、ondblclick 当鼠标双击时
3、onmousedown 当鼠标按钮按下时 左右按键按下都触发
4、onmouseup 当鼠标按钮松开始 左右按键按下都触发
5、 onmousemove 当鼠标指针移动时
6、 onmouseover 鼠标指针移入元素时
7、onmouseout 鼠标指针移出元素时
8、onmouseenter 当鼠标指针移动到元素上时 可以阻止事件冒泡
9、 onmouseleave 当鼠标指针移出元素上时 可以阻止事件冒泡
10、onmousewheel 当转动鼠标的滚轮时
11、示例:代码编写:
window.onmousewheel=function () {
console.log("触发了鼠标事件1");
}
12、事件冒泡
示例:
四、定时事件(Time Events 可以在一定的时间间隔内执行)
1、延时器
示例代码编写:
2、定时器
示例代码编写:
3、清除定时器:
示例代码编写: