浏览器和DOM的一些东西

window.location

host：域名/ip地址 （hostname），端口号（port）

hostname：服务器名称

每个计算机程序都会有一个端口 范围是0-65535

href 浏览器地址栏输入的所有数据信息。百分号%加两位16进制数值表示中文 特殊符号等内容 。浏览器可以自动解析 转化这些 符号。如果我们需要这些数据 要用函数方法转回去

window.decodeURICompoent() 还原

window.encodeURICompoent() 转换

origin 请求协议+服务器地址+端口号

pathname 服务器地址后的路径地址 

protocol 请求协议

search ：？之后的参数 浏览器地址栏携带参数

form 表单传参 action 

a 超链接跳转传参  href(键名=键值& 键名=键值&)

 通过window.location.href

常见事件分类

鼠标类

click 鼠标左键单击=mousedown+mouseup;按下➕抬起

dbclick 鼠标左键双击

contextmenu 鼠标右键单击

mousedown 鼠标按键按下

mousemove 鼠标移动

mouseenter 鼠标移入 不会触发后代标签

mouseleave 鼠标移出  

mouseover 鼠标移入。鼠标的移入 经过边界线时出发一次  后代标签也会触发  经过后代标签时 先进行移出 再进行移入 

mouseout 鼠标移出。（）不是事件传播

keydown 键盘按键按下 

keyup 键盘按键按下

keypress

focus 获取鼠标焦点

blur 失去鼠标焦点

change 并且存储数据改变

input  输入数据事件submit 表单提交事件

触摸类

 移动端设备支持 pc端不支持

键盘事件 

1，不是所有的标签都支持 绑定键盘事件

2，一般是给整个文档绑定事件 document.addeventlistener('keydown',fn)

keypress不支持ctrl alt

事件对象.keycode. :49. ( w )

事件对象.which. 兼容低版本火狐浏览器。现在所有浏览器都有事件的对象了

事件对象.altkey

事件对象.ctrlkey

back ()

foward()

go()

浏览器加载时间 window.addeventlistner('load',fn) 

表单事件

focus 获取焦点

blue失去焦点

change 获取焦点时标签输入的数据 和 失去焦点时 标签输入的数据不同

不是所有标签都支持直接绑定 获取事件 

.clientx 相对视窗窗口 有固定定位用client

.clienty

.pagex 相对html body。标签没有固定定位 使用 pagex (实际项目中一般没有固定定位 用page)

.pagey 

.offsetx 相对自身元素 （基本不用）

.offsety

 阻止默认事件 通过事件对象执行 

事件对象.preventDefault();

超链接事件

鼠标右键

form

button

阻止事件传播 当前事件触发  父级标签触发相同类型事件

传播方式

冒泡/捕获（已弃用）事件监听语法事件3设置成true

浏览器兼容语法

获取标签样式 window.getComputedStyle(标签对象).css样式

低版本ie ： 标签对象.currentStyle.css样式

 

按键编号 

 事件对象.keyCode

低版本火狐 事件对象.which

事件监听

标签对象.addeventlistener()  remove

低版本ie：标签对象.attachevent。detachevent

 

浏览器视窗窗口宽度

document.documentElement.currentWidth 有文档声明 ！

document.body.clientWidth;无文档声明；

 

页面上卷距离

 

事件对象

阻止事件传播

标准浏览器：事件对象.stoppropagation();

ie7:  事件对象

事件委托 

 给标签绑定事件的一种语法形式

 

之前绑定事件

获取标签对象 给标签对象绑定事件

 

事件委托

1，给一直存在的父级标签绑定事件

2，通过 事件对象.target 判断 触发事件的标签

根据触发事件的标签 执行对应的程序

事件委托和直接绑定事件对比

对比1:
直接绑定 给每一个标签都绑定事件

 

对比2:

事件绑定 给父级标签 绑定一次事件

 

对比3:

直接绑定 每次动态生成标签 都需要绑定事件

事件委托 给一直存在的父级标签绑定了

 

对比4:

事件委托 生成标签时通过设定属性 存储数据

触发事件时 通过获取标签属性存储的属性值