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>