首页  思维导图  详情

JS-BOM和事件

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





AI智能生成

为你推荐

查看更多



事件登记

JS核心DOM和BOM操作，Jquery核心

co.js

个人前端学习

学习笔记

作者其他创作

大纲/内容

事件

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

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

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

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

3.DOM2级事件高级事件处理方式，一个事件可以绑定多个监听函数：btn.addEventListener(\"click\

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、创建事件对象，如button2、给事件对象绑定一个事件类型如，点击、鼠标滑过、键盘输入等3、添加事件句柄如，函数，属性值onclick=\"alert(\"我被点击了\")\"或者如图写一个function(){ }

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

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

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

跨浏览器事件处理程序

IE事件流（了解）

主要是兼容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(); 阻止事件捕获或者冒泡。比如放在子元素里组织冒泡，父元素就不会触发事件；就是它自己触发完事件不会再传播了

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

事件类型

UI事件

//img标签加载完毕var image = document.getElementById(\"img\

// js动态加载完毕var script = document.createElement(\"script\

// css动态加载完毕var link = document.createElement(\"link\");link.type = \"text/css\";link.rel = \"stylesheet\

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

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

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

鼠标事件

clickdblclick 双击事件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\

键盘事件

keyCode键码

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

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

结构事件

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

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 可以操作对象，单还没有完全加载

移动端事件

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

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

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

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

JS-BOM和事件

BOM

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

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

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

Window对象的方法

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

换行：\

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

语法：window.prompt(\

新窗口样式设置：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值，该值标识要取消的延迟执行代码块【清除超时调用后，超时调用的代码就不会再执行了，相当于删除了超时调用代码】

清除间歇调用语法：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/hotellocation.port值为8080

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

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