XZ_JavaScript之JavaScript中常见的事件（DOM事件）
DOM事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应，即
当事件发生时，可以执行 JavaScript。
HTML 事件的例子：
- 当用户点击鼠标时，onclick
- 当网页已加载时，
- 当图片已加载时，
- 当鼠标移动到元素上时，
- 当输入字段被改变时，
- 当 HTML 表单被提交时，
- 当用户触发按键时，
总结的小经验
都是O开头的，比如onClick;
跟伪类有些相似；
要操作谁先拿到谁
onload 和 onunload事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
例如:
<
body
onload
=
"
checkCookies
()
"
>
onchange事件
onchange 事件常用于输入字段的验证。
例如
：
当用户改变输入字段的内容时，将调用 upperCase() 函数。
<
input
type
=
"text"
id
=
"fname"
onchange
=
"upperCase()”
>
onmouseover 和
onmouseout
事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件
。
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
<
script
>
document
.getElementById(
"myBtn"
).
onclick
=
function
(){
displayDate()
;
}；
</
script
>
实例1、
当鼠标在图片上移动，改变输入框的占位字
<
body
>
<
img
src
=
"image/img_01.jpg"
/>
<
input
type
=
"text"
placeholder
=
"我是占位字"
/>
<
script
>
// 拿到img标签
var
img
=
document
.getElementsByTagName(
'img'
)[
0
];
var
input
=
document
.getElementsByTagName(
'input'
)[
0
];
// 当页面加载完毕
window
.
onload
=
function
() {
//
alert('页面加载完毕’);
// 鼠标进入图片
img.
onmouseover
=
function
() {
//
console.log('进入图片’);
input
.placeholder
=
'进入图片'
;
}
// 鼠标在图片上移动
img.
onmousemove
=
function
() {
//
console.log('鼠标在移动');
input
.placeholder
=
'鼠标在移动'
;
}
// 鼠标离开图片
img.
onmouseout
=
function
() {
//
console.log('鼠标离开图片’);
input
.placeholder
=
'鼠标离开图片'
;
}
// 当输入框获得焦点的时候，要操作谁先拿到谁
input
.
onfocus
=
function
() {
input
.
style
.width
=
'200px'
;
input
.
style
.height
=
'60px'
;
}
}
</
script
>
</
body
>
效果图
实例2：使用外部JS实现增删改查
外部JS代码
// JS的CRUD
// 一、增
document
.write(
'Hello World'
);
// 拿到div
var
main
=
document
.getElementById(
"main"
);
// 1.1 创建一个图像标签
var
img
=
document
.createElement(
'img'
);
// 设置内容
img.src
=
'image/icon_01.png'
;
// 1.2 添加
main.appendChild(img);
// 二、删除
//
img.remove();
// 三、改
img.src
=
'image/icon_02.png'
;
// 四、查
// getElementBy....四种方式
// 获取子节点，即属性
console
.log(main.childNodes);
html代码
<
body
>
<
div
id
=
"main"
>
<
p
>在这个里面添加图片</
p
>
</
div
>
<
script
src
=
"js/JS的增删改查CRUD.js"
>
</
script
>
</
body
>
如果已经引用了外部的js，在页内还需要写JS的话，需要另起一个script标签来写
<
script
src
=
"js/JS的增删改查CRUD.js"
>
//
alert(0); 如果把JS代码写在这个里面，不会起作用
</
script
>
<
script
>
// 如果已经引用了外部的js，在页内还需要写JS的话，需要另起一个script标签来写
//
alert(0);
</
script
>