XZ_JavaScript之JavaScript中常见的事件（DOM事件）

时间：2021-09-11 20:24:59
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 >

效果图
XZ_JavaScript之JavaScript中常见的事件（DOM事件）
实例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 >
标签：

相关文章