3.3_JavaScript 对象与事件

• JavaScript DOM

  ---

1. DOM的作用：对网页中的HTML元素进行查看和修改；

2. 查看HTML元素（CSS选择器类型：id，类，标签）

   方法	描述	举例
   document.getElementById("id")	通过 id 查找元素	document.getElementById("id2");
   document.getElementByClassName("name")	通过类名查找元素	document.getElementsByClassName("te");
   document.getElementByTagName("name")	通过标签名查找元素	<p>你好，世界!</p> document.getElementsByTagName("p");

3. 改变HTML元素

   方法	描述	举例
   元素.innerHTML=新HTML值；	完全改变HTML元素内部的内容	document.getElementById("id2").innerHTML=Date(); （接收输入信息用value；获取标签元素用 innerHTML） 理解：重修整个房间
   元素.属性=值；（了解）	改变HTML元素的属性值(也可以是自定义的属性)	document.getElementById("image").width="360"; 理解：改变局部的装饰
   元素.setAttribute(属性，值)；（了解）	改变和添加HTML元素的属性值(也可以是自定义的属性)	document.getElementById("image").setAttribute("width","500"); 理解：改变局部的装饰 或 添加新的装饰
   元素.style.属性=值；（了解）	改变HTML元素的CSS属性样式	document.getElementById("image").style.backgroundColor="blue"; 理解：改变装修风格

• HTML 事件

// 在 HTML 中，带有"on"前缀的事件（如onclick、ondblclick等）是HTML事件

//1. <!--onblur--> 元素失去焦点
<input type="text" id="id3" onblur="upperCase()">	
<script>
function upperCase(){
    document.getElementById("id3").value=document.getElementById("id3").value.toUpperCase();
}
</script>

//2. <!--onclick事件-->	当用户单击时执行函数
Field1: <input type="text" id="field1" value="Hello World!">
Field2: <input type="text" id="field2">	
<button onclick="document.getElementById('field2').value=document.getElementById('field1').value">单击复制按钮</button>

//3. <!--ondbclick事件--> 当用户双击时执行函数
<button ondblclick="document.getElementById('field2').value=document.getElementById('field1').value">双击复制按钮</button>

//4. <!--onerror事件--> 加载文档或图像时发生错误
<img src="image.gif" onerror="alert('图像加载失败')">

//5. <!--onfocus事件-->  元素获得焦点
First:<input type="text" onfocus="setStyle(this.id)" id="id4">
<script>
function setStyle(x){
    document.getElementById(x).style.background="blue";
}
</script>

//6. <!--onmousedown事件--> 鼠标被按下
<script>
function load(){
    alert("你按下了鼠标");
}
</script>
<button onmousedown="load()">按钮</button>

//7. <!--onmousemove事件--> 鼠标移动
<script>
function mouseMove(){
    alert("鼠标经过了标题")
}
</script>
<h1 onmousemove="mouseMove()">经过标题</h1>

//8. <!--onmouseout事件--> 鼠标从某元素上移开
<script>
function mouseOut(){
    alert("鼠标离开了标题")
}
</script>
<h1 onmousemove="mouseOut()">离开标题</h1>
                
//9. <!--onmouseover事件--> 鼠标移动到某元素上
<script>
function mouseOver(){
    alert("鼠标移动到了标题上")
}
</script>
<h1 onmousemove="mouseOver()">标题上方</h1>

//10. <!--onmouseup 事件--> 鼠标按键被松开
<div onmouseup="mUp(this)" style="background-color: aquamarine;width:220px;height:200px;">"点击鼠标"</div>

//11. <!--onreset事件--> 重置按钮被点击
<form onreset="alert('重置按钮被点击')">
<input type="reset" value="Reset" >

1. HTML 事件归纳（12）

• DOM 事件

// 在  JavaScript 中，通过 addEventListener 处理的事件（如 click、dblclick等[去除  on ]）是 DOM 事件
1. //<!--onclick应用--> 点击时触发函数
//改变文字函数
function changeText(id){
    id.innerHTML="Text做出了改变";
}
<h1 onclick="changeText(this)">changeText</h1>

2. //<!--onchange应用--> 当用户改变input输入框内容时执行一段Javascript代码
//改变输入函数
function changeScan(){
    document.getElementById("id3").value.toUpperCase();
}
<input type="text" id="id3" onchange="changeScan()">

3. //<!--onmouseover和onmouseout--> 当用户将鼠标移至 HTML 元素上或移出时触发某个函数
    //放上鼠标进行的操作
function mOver(obj){
    obj.innerHTML="谢谢您";
}
    //移开鼠标进行的操作
function mOut(obj) {
    obj.innerHTML = "请把鼠标移上来"
}
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:skyblue;width:120px;height:200px;">"移动鼠标"</div>

4.  //<!--onmousedown, onmouseup 事件--> 当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发
    //点击鼠标操作
function mDown(obj){
    obj.style.backgroundColor="blue";
    obj.innerHTML="松开鼠标";
}
    //松开鼠标操作
function mUp(obj) {
    obj.style.backgroundColor="red";
    obj.innerHTML="谢谢您";
}
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: aquamarine;width:220px;height:200px;">"点击鼠标</div>

5.  // <!--DOM事件监听器(了解)-->  语法：element.addEventListener(事件,函数);
function listen(){
    alert("Hello");
}
document.getElementById("id4").addEventListener("click",listen);

6.   // <--了解 禁用内容(了解)--> 
    //禁止选中文字
    //function(e){e.preventDefault();}  取消事件的默认动作
document.addEventListener('contextmenu',function(e){e.preventDefault();});
    //禁止右键
document.addEventListener('selectstart',function(e){e.preventDefault();});

• BOM 事件

•  BOM 和 DOM 的区别

1. BOM 是浏览器对象模型，DOM 是文档对象模型；
2. BOM 用于浏览器窗口交互，如 window.location.href；
3. DOM 用于网页内容交互，如 document.getElementById();

• 结语

亲爱的网络安全同行和爱好者们，

在我分享的网络安全自学笔记中，我深感自己的知识和经验有限。为了更好地服务于这个领域，我真诚地希望各位能够指出我的错误和不足，以便我们共同进步，提升网络安全防护能力。

我深知，网络安全是一个不断发展的领域，需要我们持续学习和实践。我的笔记可能存在理解偏差、技术更新不及时或实践应用上的疏漏。因此，我非常欢迎各位专家和同好们提出宝贵意见，帮助我完善内容，确保信息的准确性和实用性。

请您在阅读过程中，如果发现任何问题，无论是小的笔误还是大的概念性错误，都能及时反馈给我。您的每一次指正都是我进步的阶梯，也是我们共同守护网络安全的责任所在。

感谢您的理解和支持，让我们一起努力，为网络安全领域的发展贡献力量！