一.BOM
1.BOM介绍
JavaScript由三部分组成:
1. 核心(ECMAScript)
2. 浏览器对象模型(BOM)
3. 文档对象模型(DOM)
ECMAScript：是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的>基础，他的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等
BOM： Browse Object Model, 浏览器对象模型，提供与浏览器交互的方法和接口(API ), 开发人员使用BOM可>以控制浏览器显示页面以外的部分.
DOM： Document Object Model, 文档对象模型，提供访问和操作网页HTML内容的方法和接口
2.BOM中的对象和方法
BOM的核心是window对象（全局）
window对象的方法:
alert(text): 弹出提示框(警告框)
confirm(): 创建一个需要用户确认的对话框
prompt(text,defaultInput) : 创建一个对话框要求用户输入信息
open(url,name,[options]) : 打开一个新窗口并返回新 window 对象
location对象中的方法：
location.href = 'http://www.baidu.com' //跳转到指定的URL
location.assign('http://www.baidu.com'); //跳转到指定的URL
location.reload(); //最有效的重新加载,有缓存加载
二.DOM
1.DOM的概念
DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
HTML-页面结构 css-页面样式 javascript –页面行为操作
2.DOM节点分类
DOM节点分为三种: 元素节点, 属性节点和文本节点
例如: <div title= "属性节点" >测试Div</div>
<div></div>: 元素节点(最重要)
title="属性节点": 属性节点
测试Div : 文本节点
3.DOM节点和属性
1, 元素节点对象的获取方式:
getElementById(): 获取特定ID元素的节点对象(返回一个对象)
getElementsByTagName(): 获取指定标签名的节点列表(返回一个数组)
getElementsByName(): 获取相同name属性值的节点列表(返回一个数组)
2, getElementById()
getElementById()需要给一个参数: 元素节点的id属性值。如果找到相应的元素则返回该元素的元素节点对象，如果不存在，则返回 null。
例如: 获取 id 为 box 的元素节点
var box = document.getElementById('box');
注意: 如果id值存在, 但是返回null，则是执行顺序的问题
解决方法:
1. 把<script>标签(JS代码)移到html结构后面；
2. 使用onload事件来处理， onload事件会在html加载完毕后再调用。
//加载 html 后执行
window.onload=function() {
document.getElementById('box'); //id具有唯一性
};
3, 元素节点的属性
tagName: 元素节点对象所指向的标签名称
innerHTML: 元素节点中的内容
className: 元素节点的class属性值
style: css内联样式对象
children: 某元素的所有子元素节点
value: 输入框的内容
4.DOM操作
DOM节点操作
DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等.
DOM操作所涉及的方法有:
createElement(); 创建一个元素节点
appendChild(); 添加一个新子节点到子节点的末尾
createTextNode(); 创建一个文本节点
insertBefore(); 将新节点插入到某节点前面
replaceChild(); 将新节点替换旧节点
cloneNode(); 复制节点
removeChild(); 移除节点
在JS事件中, this表示触发事件的元素节点对象;
var box = document.getElementById('box');
box.onclick = function() {
console.log(this); //this表示box对象
};
通过for循环添加事件, 使用this
var aInput = document.getElementsByTagName('input');
for (var i=0; i<aInput.length; i++) {
aInput[i].onclick = function() {
console.log(this.value); //这里的this表示被点击的那个input元素节点对象
};
}
三.事件
脚本模式:
脚本模式能将JS代码和HTML代码分离, 符合代码规范.
使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件; 如我们可以采用三种方式 来获得节点对象: getElementById(), getElementsByTagName(), getElementsByName()
例如:
var box = document.getElementById('box');
添加事件方式一 : 通过匿名函数，可以直接触发对应的代码 (推荐)
box.onclick = function() { //给box节点对象添加点击事件onclick
console.log('Hello world!');
};
添加事件方式二 : 通过指定的函数名赋值的方式 来执行函数
box.onclick = func; //注意这里不能写成func()
function func() { //给box节点对象添加点击事件onclick
console.log('Hello world!');
};
1.事件的分类
事件的分类
JavaScript 可以处理的事件种类有三种：鼠标事件, 键盘事件和 HTML事件.
1, 鼠标事件
鼠标事件，页面所有元素都可触发鼠标事件;
click： 当单击鼠标按钮并在松开时触发
onclick = function() {
console.log('单击了鼠标');
};
dblclick： 当双击鼠标按钮时触发。
ondblclick = function() {
console.log('双击了鼠标');
};
mousedown：当按下了鼠标还未松开时触发。
onmousedown = function() {
console.log('按下鼠标');
};
mouseup： 释放鼠标按钮时触发。
onmouseup = function() {
console.log('松开了鼠标');
};
mousemove：当鼠标指针在某个元素上移动时触发。
onmousemove = function() {
console.log('鼠标移动了');
};
mouseenter：当鼠标移入某个元素的那一刻触发。
onmouseenter = function() {
console.log('鼠标移入了');
};
mouseleave：当鼠标刚移出某个元素的那一刻触发。
onmouseleave = function() {
console.log('鼠标移出了');
};
2. 键盘事件
键盘事件，在键盘上按下键时触发的事件;
(一般由window对象或者document对象调用)
keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。
window.onkeydown = function() {
console.log(按下了键盘上的某个键);
};
keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发
window.onkeypress = function() {
console.log('按下了键盘上的字符键');
};
keyup：当用户释放键盘上的某个键触发。
window.onkeyup = function() {
console.log(松开键盘上的某个键);
};
3. HTML事件
HTML事件，跟HTML页面相关的事件;
load：当页面完全加载后触发
window.onload = function() {
console.log('页面已经加载完毕');
};
unload：当页面完全卸载后触发
window.onunload = function() {
console.log('页面已经卸载完毕');
};
select：当用户选择文本框(input 或 textarea)中的内容触发。
input.onselect = function() {
console.log('选择了文本框中的内容');
};
change：当文本框(input 或 textarea)内容改变且失去焦点后触发。
input.onchange = function() {
console.log('文本框中内容改变了');
};
focus：当页面或者元素获得焦点时触发。
input.onfocus = function() {
console.log('文本框获得焦点');
};
blur：当页面或元素失去焦点时触发。
input.onblur = function() {
console.log('文本框失去焦点');
};
submit：当用户点击提交按钮在<form>元素节点上触发。
form.onsubmit = function() {
console.log(‘提交form表单’);
};
reset：当用户点击重置按钮在<form>元素节点上触发。
form.onreset = function() {
console.log('重置form表单');
};
scroll：当用户滚动带滚动条的元素时触发。
window.onscroll= function() {
console.log('滚动了滚动条了');
};
2.事件对象Event
通过事件的执行函数传入的event对象(事件对象) 不是在所有浏览器都有值, 在IE浏览器上event对象并没有传过来, 这里我们要用window.event来获取, 而在火狐浏览器上window.event无法获取, 而谷歌浏览器支持event事件传参和window.event两种, 为了兼容所有浏览器, 我们使用以下方式来得到event事件对象:
box.onclick = function(evt){
var e= evt || window.event; //获取到event对象(事件对象)
console.log(e);
};
其中window.event中的window可以省略, 最终我们可以写成:
box.onclick = function(evt){
var e= evt || event; //获取到event对象(事件对象)
console.log(e);
};
注意: evt||event不要倒过来写
事件对象Event的属性:
button: 鼠标按键
clientX: 浏览器可视区域的x坐标
clientY: 浏览器可视区域的y坐标
pageX: 浏览器内容区域的x坐标
pageY: 浏览器内容区域的y坐标
screenX: 显示器屏幕的x坐标
screenY: 显示器屏幕的y坐标
offsetX: 鼠标点击的元素位置距离元素左边界的x坐标
offsetY: 鼠标点击的元素位置距离元素上边界的y坐标
3.阻止事件冒泡和默认行为
冒泡传递事件
document.onclick=function(){
console.log('我是 document');
};
document.documentElement.onclick=function() {
console.log('我是 html');
};
document.body.onclick= function(){
console.log('我是 body');
};
document.getElementById('box').onclick=function() {
console.log('我是 div');
};
document.getElementsByTagName('input')[0].onclick= function(){
console.log('我是 input');
};
但是一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡;
阻止事件冒泡有两个方法:
( 在指定不想再继续传递事件的节点的事件执行函数中使用)
1, 取消冒泡, IE
e.cancelBubble = true;
2, 停止传播, 非IE
e.stopPropagation();
例如:
document.getElementsByTagName('input')[0].onclick= function(evt){
var e = evt || window.event;
//可以通过下述两个方法取消事件冒泡
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true
};
阻止浏览器默认行为
if (e.preventDefault) {
e.preventDefault(); //非IE
}
else {
e.returnValue = false; // IE
}
4.拖拽
所谓拖拽: 就是按住元素后移动位置, 最后松开的过程
1, 实现拖拽相关的三大事件:
onmousedown : 鼠标按下
onmousemove : 鼠标移动
onmouseup : 鼠标松开
2, 实现拖拽思路：
1, 给目标元素添加onmousedown事件(鼠标按下事件)
在鼠标按下的瞬间, 记录鼠标所在位置与目标元素左边界的距离disX, 以及与上边界的距离disY
2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)
在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:
公式: 目标元素的left = oEvent.clientX – disX + “px”;
目标元素的top = oEvent.clientY – disY + “px”;
3, 在onmousedown事件(鼠标按下事件)发生以后，给document再添加onmouseup事件(鼠标松开事件)，且在onmouseup事件中，取消document的onmousemove事件;
onload = function() {
var box = document.getElementById("box");
//鼠标按下
box.onmousedown = function(evt) {
var e = evt || event;
//计算鼠标位置与div左边和上边的距离
var disX = e.offsetX;
var disY = e.offsetY;
//鼠标移动
document.onmousemove = function(evt) {
var e = evt || event;
box.style.left = e.pageX - disX + "px";
box.style.top = e.pageY - disY + "px";
}
//鼠标松开
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
网友评论