JS的事件和BOM模型

作者: 某某宝 | 来源:发表于2019-05-29 00:25 被阅读0次

一、事件
1、什么是事件
事件(Event)是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应
2、特点
三要素：
事件源、事件名称、处理函数
注意：
一个事件可以触发多个函数
一个函数可以被多个事件触发
一个元素可以绑定多个事件,但是多个事件不能相互干扰
尽量给合适的元素选择合适的事件
3、常用事件：
点击事件 onclick
失焦事件 onBlur
聚焦事件 onfocus
改变域对象 onchange
鼠标悬停事件 onmouserover
鼠标移开事件 onmouseout
键盘按下事件 onkeydown
键盘弹起事件 onkeyup
加载事件 onload：
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
4、事件处理程序
DOM0级事件处理程序
不能绑定同一个元素同一个事件多次
DOM2级事件程序
可以绑定一个元素的内容多次
addEventListener()和 removeEventListener()
所有 DOM 节点都包含这两个方法，并且他们都接受 3 个参数：
要处理的事件名、作为事件处理程序的函数和一个布尔值。
最后这个布尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；
如果是 false 则表示在冒泡阶段调用事件处理程序。
5、事件流和事件模型
我们的事件最后都有一个特定的事件源，暂且将事件源看做是 HTML 的某个元素，那么当一个 HTML 元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为 DOM 事件流。
事件顺序有两种类型：事件捕获和事件冒泡。冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为 IE 和 Netscape 两个大公司完全不同的事件流概念产生的。（事件流：是指页面接受事件的顺序）IE 的事件流是事件冒泡， Netscape 的事件流是事件捕获流。
* 事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）。例如下面的：

<!DOCTYPE html> 
<html>  
    <head>   
        <meta charset="UTF-8"> 
          <title>JavaScript</title>  
      </head>  
    <body>   
        <div id="myDiv">Click me</div>  
    </body> 
</html>
如果点击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播：
<div> 
<body>
<html> 
document

    也就是说，click 事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后， click 事件沿 DOM 树向上传播，在每一级节点上都会发生，直到传播到 document 对象。 所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。 
    *  事件捕获
    Netscape 提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早 接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标 之前捕获它。还以前面的例子为例。那么单击<div>元素就会按下列顺序触发 click 事件：

document
<html> 
<body> 
<div>

    在事件捕获过程中，document 对象首先接收到 click 事件，然后沿 DOM 树依次向下，一 直传播到事件的实际目标，即<div>元素。 虽然事件捕获是 Netscape 唯一支持的事件流模式，但很多主流浏览器目前也都支持这种事 件流模型。尽管“DOM2 级事件”规范要求事件应该从 document 对象开始传播，但这些浏览器都是从 window 对象开始捕获的。
    *  DOM事件流
    “DOM2 级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡 阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。 最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

clipboard.png

二、BOM
BOM(Browser Object Model)浏览器对象模型

clipboard1.png

1、window对象
* 概念
BOM 的核心对象是 window，它表示浏览器的一个实例。window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问 parseInt()等方法。如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames 集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架的名称来访问相应的 window 对象。
* window对象方法

系统对话框：
    浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt()方法
可以调用对话框向用户显示消息。
（1）消息框:alert， 常用。
    alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
    prompt() 方法用于显示可提示用户进行输入的对话框。
    参数（可选）：
        第一个参数：要在对话框中显示的纯文本。
        第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
    confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
 
 function test01(){
    alert(1);
}
function test02(){
    var flag=confirm("是否继续?");
    if(flag){
        alert('是的');
    }else{
        alert("不对");
    }
}
function test03(){
    var name=prompt("输入银行卡号?");
    alert(name);    
}

打开窗口：
    window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口 
function openPage () {          
    window.open("http://www.baidu.com","_self");
}

_self、_parent、_top、_blank 代表打开页面的位置

关闭窗口：
    <input type="button" value="关闭窗口" onclick="window.close();" />

时间函数：
setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以
    clearTimeout(id) 来清除指定函数的执行在 times 毫秒后执行 function 
    指定的方法，执行之前也可以取消
setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据
    返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调
    用或窗口被关闭。
    
        //测试时间函数 setTimeout     
        function openNew(){
            setTimeout(function newPage(){
            window.open('http://www.baidu.com');            
        }  ,3000);
        }    //函数匿名使用时，加引号会报错，加括号会立即执行。 
        function openBD(){          
            window.open('http://www.baidu.com'); 
        }
        function openNew1(){
            id=setTimeout("openBD()",3000);
          //使用函数名调用时，不加引号时不加括号，否则会立即执行；          
          //加引号时必须加括号，否则不执行         
        }
             //关闭clearTimeout
        function releaseTimer(){
            clearTimeout(id);
        }    

var id = setInterval(function,times) 
clearInterval(id) 
function test(){  
    console.log("....."); 
} //window 是一个全局对象，通过全局对象调用 setInterval()函数 
window.setInterval(test,1000);

注意：setTimeout之后指定的函数，
使用函数名调用时，不加引号时不加括号，否则会立即执行；加引号时必须加括号，否则不执行。
函数匿名使用时，加引号会报错，加括号会立即执行。
* window 对象属性
window 对象的双重身份决定着，在该对象中既有着核心语法中的全局方法和属性，又有着和浏览器相关的属性和方法，一下的一些对象都是属于 window 对象的属性值。

histroy 对象
* history 对象是历史对象。
包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
* history 对象的属性：
length，返回浏览器历史列表中的 URL 数量。
* history 对象的方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
location 对象
location 对象是 window 对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。
* location 对象的属性：
href：设置或返回完整的 URL location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。

// 得到当前的url
var url = window.location.href;
console.log(url);
        
// 跳转到指定页面
//window.location.href = "03-history对象.html";
// window.location.href = "http://www.baidu.com";
        
function reload1() {
    // 刷新页面
    //window.location.reload();
    // 用指定页面替换当前页面
    window.location.replace("http://www.baidu.com");
}

document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
* 访问
Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问。
* 属性
document 对象的 body 属性，提供对<body>元素的直接访问
cookie 属性，用来设置或返回与当前文档有关的所有 cookie
write()方法，向文档写 HTML 表达式或 JavaScript 代码。
还有其他属性和方法。在 Document 对象中讲解。该对象作为 DOM 中的核心对象

JS的事件和BOM模型

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读