JavaScript学习资料四

来源：互联网发布：韦德夏季联赛数据编辑：程序博客网时间：2024/06/07 01:11

1.DOM 文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
在页面中用document来表示浏览器创建出来的文件对象模型,document对象是window对象的一个属性，因此可以直接调用

document对象中的常见属性:
//documentElement属性始终指向HTML页面中的<html>元素
console.log(document.documentElement);
//body属性直接指向<body>元素
console.log(document.body);
//doctype属性访问<!DOCTYPE>, 浏览器支持不一致，很少使用
console.log(document.doctype);
//title属性获取文档的标题
console.log(document.title);
//URL属性取得完整的URL
console.log(document.URL);
//domain属性取得域名，并且可以进行设置，在跨域访问中经常会用到
console.log(document.domain);
//referrer属性取得链接到当前页面的那个页面的URL，即来源页面的URL
console.log(document.referrer);
//images属性获取所有的img对象，返回HTMLCollection类数组对象
console.log(document.images);
//forms属性获取所有的form对象，返回HTMLCollection类数组对象
console.log(document.forms);
//links属性获取文档中所有带href属性的<a>元素
console.log(document.links);

1)查找 HTML 元素

通过 id 找到 HTML 元素
document.getElementById("...");
返回某一个元素对象,默认id是唯一的
通过name找到 HTML 元素
document.getElementsByName("...");
返回一个集合
通过标签名找到 HTML 元素
document.getElementsByTagName("...");
返回一个集合
通过class找到 HTML 元素
document.getElementsByClassName("...");
返回一个集合

2)找到元素之后干什么
1.改变元素中的内容
利用innerHTML 或者 value来改变元素中显示的内容
2.改变元素的属性
document.getElementById("image").src="2.jpg";
<img id="image" src="1.jpg"></img>
3.改变元素的css样式
document.getElementById("p1").style.color="blue";
<p id="p1">今天天气很好.</p>
4.给元素添加事件处理(覆盖之前的事件)
document.getElementById("myBtn").onclick=function(){
//...
};

5.给元素添加事件监听(不覆盖之前的事件)
document.getElementById("myBtn").addEventListener("click",function(){.....});
6.添加或删除元素
添加:
//创建新元素对象 <p></p>
var para=document.createElement("p");
//创建文本节点
var node=document.createTextNode("大家好");
//把文本节点添加到<p></p>中
para.appendChild(node);
//获得指定div
var element=document.getElementById("div1");
//把<p></p>添加到div中
element.appendChild(para);
删除:
<div id="div1">
<p id="p1">大家好</p>
<p id="p2">你们好</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

2.javascript中的事件
1)事件三要素：
事件目标（event target）
发生的事件与之相关联或与之相关的对象
事件处理（event handler）
处理或相应事件的函数
事件对象（event object）
与特定事件相关且包含有关该事件详细信息的对象。

2)事件处理
给页面元素添加事件的三种方式
1. 在元素标签中使用事件属性
页面中的大都数元素都有事件处理属性,这些属性的名字都是以on开头的,例如onclick onload等等

例如1:
<input type="button" value="clickMe" onclick="javascript:alert('clicked');">
或者
<script type="text/javascript">
function showMsg(){
alert("clicked");
}
</script>
<input type="button" value="clickMe" onclick="showMsg()">

例如2:
<script type="text/javascript">
function showMsg(obj){
console.log(obj);
}
</script>
<input type="button" value="clickMe" onclick="showMsg(this)">
注意:调用showMsg(this)的时候把this当做参数传给了该函数,因为showMsg函数的调用是写在onclick属性值中的,而且这个onclick属性又是这个input标签中的,所以这个this代表的是当前input元素对象,在函数中输出即可知道

例如3:
<script type="text/javascript">
function showMsg(obj){
console.log(obj);
console.log(this);
console.log(this==window);//true
}
</script>
<input type="button" value="clickMe" onclick="showMsg(this)">
注意:每个函数中有一个this,用来表示当前函数是由哪个对象来调用,就是java中所描述的当前对象

2. 在js中访问元素的事件属性并且赋值
var btn = document.getElementById("btn");
btn.onclick = function(){
console.log(this);
console.log(this == btn);//true
}

//删除事件处理程序
btn.onclick = null;

注意:这里函数中的this代表当前btn对象,因为函数是作为btn对象中的一个属性值出现的,所以这个函数就属于btn对象,那么函数中的this就代表这个btn对象

注意:如果之前btn对象中已经有了onclick事件处理了,那么这种方式会覆盖之前的事件

3. 使用指定函数给元素添加事件处理
事件绑定使用addEventListener函数
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.log(this);
console.log(this == btn);//true
});
注意函数中this代表的含义
注意第一个参数所写的事件名称中不带on
注意这种方式【不会】覆盖之前的事件

事件删除使用removeEventListener函数
var btn = document.getElementById("btn");
var handler = function(){
console.log(this);
console.log(this == btn);//true
}
btn.addEventListener("click",handler);
//移除事件
btn.removeEventListener("click",handler);

注意:可以添加多个事件处理程序，并且按照添加她们的顺序触发。添加事件时如果使用匿名函数将无法删除

注意:这个时候使用btn.onclick=null是【不能】移除事件处理的

4. IE事件处理
在低版本的IE中绑定事件和解除事件可以分别使用attachEvent()函数和detachEvent()函数

3)事件对象
1. DOM中的事件对象
在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中
element.onclick = function(event){
console.log(event);
}
element.addEventListener("click",function(event){
console.log(event);
});

2. 事件对象event的特殊属性
1)客户区坐标位置
clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标
2)页面坐标位置
pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等
3)屏幕坐标位置
screenX,screenY

4)事件类型
1. UI事件
onload
在浏览器完成对象的装载后立即触发
onunload
在浏览器完成对象的卸载后立即触发(有些情况需要浏览器支持)
onselect
当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
onresize
当浏览器窗口被调整到一个新的高度或者宽度时，会触发
2. 焦点事件
onfocus
元素获得焦点的时候触发
onblur
元素失去焦点的时候触发

//IE支持
onfocusin
与onfocus等价
onfocusout
与onblur等价
3. 鼠标与滚轮事件
onclick
在用户用鼠标左键单击对象时触发。只有在一个元素上相继发生onmousedown,onmouseup事件，才会触发click事件
ondblclick
当用户双击对象时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件
onmousedown
任意鼠标按钮按下时触发
onmouseup
释放鼠标按钮触发
onmousemove
鼠标在元素内部移动的时候重发触发
onmousewheel
滚轮事件
火狐浏览器中需要以下方式来添加该事件
div.addEventListener("DOMMouseScroll",function(event){
//如果是负值说明滚轮是向上滚动，如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数
console.log(event.detail);
});
onmouseover
鼠标位于元素外部，将其首次移入另一个元素边界之内时触发
onmouseenter
鼠标光标从元素外部首次移动到元素范围内激发
onmouseout
在位于元素中的鼠标光标移入到另外一个元素中
onmouseleave
在位于元素中的鼠标光标移动到元素范围之外时触发

4. 鼠标按钮
onmousedown,onmouseup，该事件的event对象中包含了button属性，表示按下或释放的按钮。

例如:
function test(event){
//event.button=0 左键
//event.button=1 中键
//event.button=2 右键
}
<input type="button" value="点击" onmousedown="test(event)" />

5. 键盘事件
onkeydown 当用户按下键盘【任意】按键时触发。
onkeypress 当用户按下【字母数字】键时触发。
onkeyup 当用户按下并释放键盘按键时触发
6. 表单事件
onsubmit 当表单将要被提交时触发。
onreset 当用户重置表单时触发
onchange 当对象或选中区的内容改变时触发。

阅读全文

0 0