首页  思维导图  详情

JS-BOM和事件

2020-04-29 15:53:17   5  举报





AI智能生成

个人前端学习

学习笔记

作者其他创作

大纲/内容

事件

什么是事件？ 事件是可以被javascript侦测到的行为，通俗的讲用户与web页面进行某些交互时，解释器就会创建响应event对象以描述事件信息。 点击事件，登录，用户与web页面交互，就会执行一段程序，就是事件。鼠标经过，元素加载完成失败，浏览器窗口缩放，用户按下键盘，用户滚动窗口等等。

事件的定义 为特定事件定义监听函数有三种方式：

1、直接在HTML中定义元素的事件相关属性 <button onclick="alert('hello')">按钮</button> 缺点：违反了“内容与行为相分离”的原则，应尽可能的少用

2、DOM0级事件 在JavaScript中为元素的事件相关属性赋值： document.getElementById("btn").onclick=function(){} document.body.onload=init function init(){} 缺点：此语法实现了“内容与行为相分离”，但元素仍只能绑定一个监听函数。

3.DOM2级事件 高级事件处理方式，一个事件可以绑定多个监听函数： btn.addEventListener("click", function(){},false); // DOM btn.attachEvent("onclick", function(){});//IE document.body.addEventListener("load", init); document.body.attachEvent("onload", init); function init(){}此语法可以为一个元素绑定多个监听函数，但需要注意浏览器兼容性问题。

DOM0级和DOM2级区别： 1.DOM2支持同一dom元素注册多个同种事件 2.DOM2新增了捕获和冒泡的概念。

DOM 0 级事件与 DOM 2 级事件的区别 —— 1、 DOM 0 级事件绑定，只能给一个元素的某一个行为绑定一次方法，第二次绑定会把前面的覆盖掉； 2、 DOM 2 级事件绑定，可以给某一个元素的同一个行为绑定多个不同的方法；

为什么会有3种事件捕获方式 1、html中定义 html中写js代码。缺点：强耦合（html文件和js文件绑在一起），不利于复用代码（一般已经不适用了） 2、Dom0级事件，即事件对象的属性添加绑定事件（btn.onclick）优点：松耦合，html与js的代码分离。缺点：就是只能绑定一个事件类型（最后一个事件会把前面的事件都覆盖了）。 3、Dom2级事件，通过addEventListener函数绑定事件优点：松耦合，绑定多个事件（比如鼠标点击事件，会在第一个事件弹出后，后面事件依次点击弹出）（以后以这个Dom2级事件为主），该语法可以为一个元素绑定多个监听函数，但是需要注意浏览器的兼容性问题。

绑定事件三步法： 1、创建事件对象，如button 2、给事件对象绑定一个事件类型如，点击、鼠标滑过、键盘输入等 3、添加事件句柄如，函数，属性值 onclick="alert("我被点击了")"或者如图写一个function(){ }

DOM2级事件： （1）绑定事件：addEventListener(event,fn,onOff); （2）解绑事件：removeEventListener(event,fn,onOff);

监听方法 —— 【存在浏览器的差别】 1、addEventListener（）和 removeEventListener （） --> -->非 IE 浏览器 【功能】 addEventListener（）：可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。 removeEventListener （）：移除事件处理程序，但无法移除匿名添加的函数。 【参数】 第一个参数：事件名；第二个参数：事件处理程序函数； 第三个参数：布尔值，true 表示在捕获阶段调用， false 表示在冒泡阶段调用（IE 冒泡事件流，从里往外冒；其他捕获事件流）

2、DOM 2 级事件流：包含三个阶段，①事件捕获阶段；②事件目标阶段；③事件冒泡阶段；

3、attachEvent（）和 detachEvent（） --> --> IE 浏览器 【功能】 attachEvent（）：可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用； detachEvent（）：移除事件处理程序，但不能移除匿名添加的函数； 【参数】 第一个参数：事件名；第二个参数：事件处理程序函数；

跨浏览器事件处理程序

IE事件流（了解）

IE事件处理程序【属于DOM2级事件】 添加事件流：AttachEvent() 语法：elemen.attachEvent(event,function) 功能：用于向指定元素添加事件句柄 参数： event：必须。字符串，指定事件名，必须加“on”前缀。 function：必须。指定事件触发时要执行的函数。

移除事件： detachEvent() 语法：element.detachEvent（event,function） 功能：移除attachEvent()方法添加的事件句柄。 参数： event：必须。字符串，要移除的事件名称。 function：必须。指定要移除的函数。

主要是兼容IE8及以下的浏览器，其实就是把监听事件的两种方法，用if语句合并到一起（也可以说是两种监听事件的方法的函数封装，这种封装方法可以反复使用）： var EventUtil ={ }代表全局变量，{ }代表可以放函数；addHandler是函数名称；（）里面是3个参数，element代表事件对象（也就是html元素），type代表事件类型，handler是事件句柄；IE浏览器点击事件前面要加 "on"。

事件周期 解释器创建一个event对象后，会按如下过程将其在HTML元素间进行传播 第一阶段：事件捕获，事件对象沿DOM树向下传播 第二阶段：目标触发，运行事件监听函数 第三阶段：事件冒泡，事件沿DOM树向上传播

事件冒泡：事件沿DOM树向上传播，直系亲属树结构中，点击某个元素，由于冒泡作用，亲属树上的元素凡是添加了事件的，都会被触发【addEventListener方法中第三个参数必须是false】。

事件捕获：顺序与事件冒泡相反，使用addEventListener方法绑定事件时，第三个参数必须是true。

大部分事件都是用事件冒泡。

事件委托；给父级元素绑定事件，子元素也会相应绑定事件（原理就是事件冒泡，点击子元素后因为事件冒泡机制所以会往上走，走到父元素后就触发父元素绑定的事件）。 target事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口

event对象常用属性和方法实例：

1、event.type 事件类型，比如click，mouseout

2，event.target 事件目标【点击谁谁就是target，事件源】 event.currentTarget 绑定事件的对象【事件绑定在谁身上，就是指向谁】 比如：点击儿子，而事件绑定在父亲上面，target就是儿子，currentTarget是父亲

3.event.preventDefault(); 阻止默认行为，比如阻止链接跳转

4.event.stopPropagation(); 阻止事件捕获或者冒泡。比如放在子元素里组织冒泡，父元素就不会触发事件；就是它自己触发完事件不会再传播了

5.clientY：就是指浏览器顶部底边到鼠标的位置,但是不包含滚动轴滚动的距离 pageY：就是指浏览器顶部底边到鼠标的位置,但是包含滚动轴滚动的距离【所以如果滚动轴没有动那pageY和clientY一样，如果滚动轴向下滚动了那pageY就会比clientY大】 screenY：屏幕顶部到鼠标位置，跟浏览器所在位置无关，即使把浏览器缩小后往下挪依然是从屏幕顶部开始计算距离

IE8及以下浏览器的event对象属性和方法： event.type：还是事件的类型 event.returnValue=flase：同preventDefault() 阻止默认行为，默认为ture，通过 event.returnValue=flase阻止。 event.cancelBubble=true：同stopPropagation() 阻止事件冒泡，默认为flase，通过event.cancelBubble = true阻止。 srcElement：同target，指事件源

事件类型

UI事件

1.load 当页面完全加载后在window上触发，也可以应用在image标签上，图片加载完毕后弹框，可用于图片预加载，js动态加载，动态加载css EventUtil.addHandler(window,"load",function(e){ alert("loaded"); })

//img标签加载完毕 var image = document.getElementById("img"); EventUtil.addHandler(image, "load", function(e) { alert("图片加载完毕 "); }) image.src = "1.png"; 图片预加载 var image = new Image();//将图片存在了内存中缓存在内存空间上 EventUtil.addHandler(image,"load",function(event){ alert("Image loaded!"); }); image.src = "smile.gif"; // js动态加载完毕 var script = document.createElement("script"); EventUtil.addHandler(script, "load", function(event){ alert("js Loaded"); }); script.src = "jquery.js"; document.body.appendChild(script);

// js动态加载完毕 var script = document.createElement("script"); EventUtil.addHandler(script, "load", function(event){ alert("js Loaded"); }); script.src = "jquery.js"; document.body.appendChild(script);

// css动态加载完毕 var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; EventUtil.addHandler(link, "load", function(event){ alert("css Loaded"); }); link.href = "example.css"; document.getElementsByTagName("head")[0].appendChild(link);

2.unload事件，用户从一个页面切换到另一个页面

3.resize 窗口大小发生变化时触发，重复执行，损耗性能

EventUtil.addHandler(window, "resize", function(event){ alert("Resized"); });

4.scroll事件，主要针对新旧浏览器，滚动轮上下滚动触发

5.焦点事件 1、blur 元素失去焦点的时候触发 2. focus 元素获取焦点的时候触发，不支持冒泡 3. focusin 同focus一样元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+，chrome等 4. focuout 同blur一样，支持事件浏览器是IE5.5+,Safari5.1+，chrome等

鼠标事件

click dblclick 双击事件 mousedown 鼠标按下时候触发的事件 mouseup 鼠标松开时候触发的事件 mousedown+mouseup=click事件

mousemove鼠标在对象上移动，重复触发，注意代码性能优化。 mouseout鼠标离开元素时触发（离开目标对象或子元素都触发，范围比较广） mouseover鼠标进入元素时触发。（进入目标对象或子元素都触发，范围比较广） mouseenter鼠标进入目标元素。（只能进入目标元素触发，如其还有子元素不能触发。） mouseleave鼠标离开目标对象。（只能离开目标元素触发）

mousedown鼠标按下时候触发的事件 //高级浏览器： event.button ==0鼠标左键 event.button==1鼠标中键 event.button==2鼠标右键

//IE8派系 // event.button == 0 没有按下按钮 //event.button == 1 按下主鼠标按钮 //event.button == 2 按下次鼠标按钮 //event.button == 3 按下同时按下主、次鼠标按钮 //event.button == 4 按下中间鼠标按钮

/*var div = document.getElementById("myDiv"); EventUtil.addHandler(div, "clcik", function(event) { var keys = new Array(); if(event.shiftKey) { keys.push("shift"); } if(event.ctrlKey) { keys.push("ctrl"); } if(event.altKey) { keys.push("alt"); } if(event.metaKey) { keys.push("meta"); } console.log("keys:" + keys.join(",")) ; });*/ event.shiftKey表示当我鼠标点下去时同时按下键盘的shift键

键盘事件

1.keydown 键码，按下任意键触发 EventUtil.addHandler(myText,"keydown",function(event){ console.log(event.keyCode); })

keyCode键码

2.keyup 松开任意键的时候触发，支持keyCode

3.keypress 按下字符键，更适用于使用 charCode（字符码，返回ASCII码），而不是keyCode。

4.textInput 输入什么就会打印什么 EventUtil.addHandler(myText, "textInput", function(event) { console.log(event.data); })

结构事件

5.DOMNodeRemoved document中任意元素被删除就会触发 EventUtil.addHandler(document, "DOMNodeRemoved", function(event) { console.log(111111); })

6.DOMNodeInserted document中任意元素被添加就会触发

7. DOMSubtreeModified document结构中发生任何变化都会触发 EventUtil.addHandler(document, "DOMSubtreeModified", function(event) { console.log(111111); })

8.DOMNodeRemovedFromDocument 从文档中移除之前被触发

9.DOMNodeInsertedIntoDocument 从文档中添加之前被触发

H5新增事件

10.DOMContentLoaded 在DOM树结构之后就会触发，不理会图像。javascript文件、css文件或其他资源是否已经下载，速度比load事件快

11.readstatechange 仅支持IE、firfox、opera，提供文档或者元素加载过程，但是很难预料与load事件一起使用时候，情绪化，限制IE.很难预料 //1、document.readState == uninitialized 尚未初始化 //2、loading 对象正在加载数据 //3、interactive 可以操作对象，单还没有完全加载

12.hashchange 只能给window添加，，地址#后面的值变化， EventUtil.addHandler(window, "hashchange", function(event) { console.log(event.oldURL + ":"+event.newURL); })

移动端事件

1、touchstart：手指触摸屏幕触发 三个属性： （1）event.touches：当前触摸屏幕的触摸点数组（记录触摸点的信息，有可能多个手指一起触摸） （2）event.changedTouches：数组中只包含引起事件的触摸点信息（如果四个手指只移动了2个，那只存储这两个移动的触摸点信息） （3）event.targetTouches：只包含放在元素上的触摸信息（在事件对象上的触摸点的信息）

2、touchmove：手指在屏幕上滑动触发（重复触发）

3、touchend：手指从屏幕上移开时触发

4、touchcancel：当系统停止跟踪触摸时触发

BOM

BOM(browser object model)浏览器对象模型 BOM的对象有： window、navigator、screen、history、location、document、event

window window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象（全局对象）。 全局变量——脚本的任何一个地方都能调用的变量 全局方法——脚本的任何一个地方都能调用的方法 所有的全局变量和全局方法都被归在window上

全局变量可以用以下方式声明： 1、window声明——window.变量名=值 2、关键字声明——var 变量名=值 【两者等价】 -------------------------------------------------- 全局函数可以用以下方式声明： 1、window声明——window.函数名=function(){} 2、关键字声明——function 函数名(){}

Window对象的方法

Window对象的方法 语法：window.alert("content") 功能：显示带有一段消息和一个确认按钮的警告框

换行：\n

语法：window.confirm("message") 功能：显示一个带有指定消息和ok及取消按钮的对话框 返回值：布尔。如果用户点击确定按钮，则confirm（）返回true 如果用户点击取消按钮，则confirm（）返回false

换行：\n

语法：window.prompt("text,defaultText") 参数说明： text：要在对话框中显示的纯文本（而不是HTML格式的文本） defaultText：默认的输入文本 返回值：如果用户单击提示框的取消按钮，则返回null 如果用户单击确认按钮，则返回输入字段当前显示的文本

换行：\n

语法：window.open(pageURL, name, parameters) 功能：打开一个新的浏览器窗口或查找一个已命名的窗口 参数说明： pageURL:子窗口路径 name:子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用） parameters：窗口参数（各参数用逗号分隔）

新窗口样式设置： width：窗口宽度、height：窗口高度、left：窗口X轴坐标、top：窗口Y轴坐标、toolbar：是否显示浏览器的工具栏、menubar：是否显示菜单栏、scrollbars：是否显示滚动条、location：是否显示地址字段、status：是否添加状态栏

语法：window.close(); 给你：关闭浏览器窗口（所在的浏览器窗口）

超时调用 语法：setTimeout（code，millisec） 功能：在指定的毫秒数后调用函数或计算表达式 参数说明： 1、code：要调用的函数或要执行的JavaScript代码串 2、millisec：在执行代码前需等待的毫秒数 setTimeout方法返回一个ID值通过它取消超时调用

setTimeout（）方法用于在指定的毫秒数后调用函数或表达式。 一共有两个点需要注意： 1、有两个参数 （1）第一个参数是要执行的函数或者执行脚本 （2）第二个参数是要多少毫秒后执行，注意单位是毫秒！ 2、有三种表达式写法： （1）第一种是在方法中直接写脚本 （2）第二种是在方法中写匿名函数 （3）第三种是在方法中写定义好的函数的函数名。

清除超时调用 语法：clearTimeout(id_of_settimeout) 功能：取消由setTimeout（）方法设置的timeout 参数说明: 1、id_of_settimeout：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块 【清除超时调用后，超时调用的代码就不会再执行了，相当于删除了超时调用代码】

setInterval 间歇调用 setInterval(code,millisec) 功能：每隔指定的时间执行一次代码 参数说明： 1.code 要调用的函数或要执行的代码串 2.millisec：周期性执行或调用code之间的时间间隔，以毫秒计 setInterval(）返回ID值 clearInterval（）

清除间歇调用 语法：clearInterval（id_of_setinterval） 功能：取消由setInterval（）方法设置的interval 参数说明： 1、id_of_setinterval:由setInterval（）返回的ID值

获取窗口文档显示区的宽高可以使用window.innerWidth和window.innerHeight

location对象

1、语法：location.href 功能：返回当前加载页面的完整URL 说明：location.href与window.location.href等价

与location.replace相比，会生产记录，可以回退

2、语法：location.hash 功能：返回URL中的hash（#号后跟零或多个字符），如果不包含则返回空字符串。

3、语法：location.host 功能：返回服务器名称和端口号（如果有）【主机地址】

4、语法：location.hostname 功能：返回不带端口的服务器名称

5、语法：location.pathname 功能：返回URL中的目录和（或）文件名

6、语法：location.port 功能：返回URL中指定的端口号，如果没有，返回空字符串 假设网址为：localhost：8080/hotel location.port值为8080

7、语法：location.protocol 功能：返回页面使用的协议

8、语法：location.search 功能：返回URL的查询字符串。这个字符串以问号开头。