DOM对象：元素事件

元素的事件某元素发生了一件事事件处理程序事件发生后需要执行的函数事件流模型捕获阶段-目标阶段-冒泡阶段1.注册事件把元素的事件和事情处理程序关联起来DOM 0(非标的事件注册DOM对象.on事件名称func赋值操作仅能注册一个且没有事件流模型只能在冒泡阶段DOM2(2000 定义了事件流模型统一了事件传播机制)DOM对象.addEventListener事件名称事件处理函数boolean(是否在捕获阶段触发默认false)第三个参数可以是对象除了是否捕获阶段触发外capture:true还可以多一个配置 once:true只触发一次移除事件DOM对象.removeEventListener事件名称事件处理函数boolean(是否在捕获阶段触发默认false)事件移除的事件处理函数必须是具名函数匿名函数的话即便函数体一样也不是指向同一个函数2.事件对象当一个事件触发时浏览器会创建一个与该事件相关的事件对象该对象包含大量有用信息比如事件的类型触发的元素鼠标的坐标等等事件对象会作为参数传递给事件处理函数编写事件处理函数可以通过这个对象了解事件的详细信息并执行更精确的操作常用的事件对象成员:target:事件源,触发事件的元素无论事件是注册给谁的target一定是目标阶段的事件源比如父元素注册事件子元素无事件注册点击子元素点击事件冒泡到父元素触发父元素事件target仍旧是指向子元素事件委托由于时间冒泡且target永远是触发元素的事件因此给父元素注册事件通过判断target不同来源分别设置不同的事件处理程序称为事件委托。currentTarget绑定事件的元素thistype事件类型常用的事件对象方法:preventDafault()阻止浏览器默认行为dom1阻止a元素默认跳转return fasle/hrefjavascript:void 0stopPropagation()阻止事件冒泡eventPhase()获取事件所处阶段参数123对应捕获、目标和冒泡3.事件类型鼠标事件:click单击鼠标主键左键/聚焦时按下回车键dblclick、mousedown、mouseup、mousemove、mouseover和mouseoutmouseEvent鼠标事件对象对象成员:点击altKey事件触发时是否按下了键盘的alt键ctrlKey、shiftKey、metaKeybutton:012对应鼠标左中右键位置pageX,pageY:当前鼠标相对于整个文档的xy坐标clientX,clientY:当前鼠标相对于视口的xy坐标offsetX,offsetY:当前鼠标相对于事件源内填充边的xy坐标针对的是事件源screenX,screenY:当前鼠标相对于屏幕的xy坐标movementX,movementY:只在鼠标移动事件中有效表示当前鼠标相对于上一次鼠标位置的xy偏移坐标键盘事件keydown:按下键盘任意键触发按住不放会重复触发keyup、keypresskeyboardEvent(键盘事件对象对象成员altKey事件触发时是否按下了键盘的alt键ctrlKey、shiftKey、metaKeykey,code返回按键的字符串code记录按键适配键盘布局不管大小写key可以得到打印字符可以区分大小写焦点事件focus元素获得焦点不冒泡blur元素失去焦点不冒泡focusin获取焦点冒泡focusout失去焦点冒泡表单事件submit表单提交事件仅form元素reset表单重置事件仅form元素input用户在输入控件中输入内容触发change表单控件内容更改触发改变且失去焦点后才触发invalid表单验证失败事件不冒泡窗口事件window对象load页面上所有资源加载完成error资源加载失败触发不冒泡beforeunload页面卸载前触发(关闭标签页/刷新页面)scroll页面滚动事件窗口事件对象不提供滚动距离但dom对象可以找到滚动后隐藏的部分高度和宽度scrollTopscrollLeftdom对象的属性可随时访问上边或者左边隐藏内容的宽高scroolHeightscrollWidth全部滚动内容的高度和宽度当滚动条不在元素内而是整个窗口时不能直接用window因为bom没有这个属性我们要拿文档对象的宽高(因为window是bom对象要分清windowdocument和doucument.doucmentElement)要用doucument.doucmentElement获取这个scroolHeightresize窗口大小调整事件监听的是视口尺寸屏幕尺寸window.screen.width、window.screen.height浏览器窗口尺寸window.outerWidth、window.outerHeight包括导航栏等等窗口尺寸(包含滚动条window.innerWidth、window.innerHeight视口尺寸(不包含滚动条html.clientWidth、html.clientHeight实际内容尺寸内容加内边距scrollWidth、scrollHeight元素位置offsetLeftoffsetTop相对该元素的offsetParent填充盒body特殊会包含整盒offsetParent获取元素的第一个定位祖先元素无定位祖先元素则找bodygetBoundingClientRect()返回一个对象该对象记录了相对于视口的距离文档事件DOMContentLoaded:DOM树构建完成后触发ready事件redaystatechange准备状态切换事件readystateloading正在加载中interactive可交互的dom构建树完成complete所有资源加载完成剪贴板事件copy复制内容时触发cut剪切内容时触发paste粘贴内容时触发clipboardData剪切板事件对象getData(获取数据的类型MIME类型)4.事件模拟通过代码触发事件click、submit、reset、focus、blur、select事件的派遣dispatchEvent要派遣的事件对象的元素.dispatchEvent被派遣的事件对象