load事件，但是IE8及以下不支持，在IE9+，Firefox，Opera，chrome及Safari3+都支持，以便开发开发人员确定动态加载的javascript文件是否加载完毕；比如我们动态创建script...； 有：blur：在元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持。...foucs：在元素获得焦点时触发，这个事件不会冒泡，所有浏览器都支持。...鼠标事件：当用户通过鼠标在页面操作时触发； click事件：在用户单击鼠标按钮或者按下回车键触发； dblclick事件：在用户双击鼠标按钮时被触发； mousedown事件：在用户按下了任意鼠标按钮时被触发...也都实现了这个事件，当用户通过鼠标滚轮与页面交互，在垂直方向上滚动页面时(无论向上还是向下)，就会触发mousewheel事件，这个事件可以在任何元素上触发，最终会冒泡到document（IE8）或window
---只读 getComputedStyle不支持IE8 VS 元素.currentStyle支持IE8 ===》通用方法融合两者 元素.clientHeight和元素.clientWidth获取元素可见宽度和高度...浏览器对象模型---History 浏览器对象模型---Location 浏览器对象模型---Window常用的三个弹出框 定时器 开启一个定时器之前，需要关闭上一次开启的定时器，不会产生一大堆定时器同时工作的情形...childNodes属性会获取包括文本节点在内的所有节点，注意DOM标签与标签之间的空白也会被当成文本节点 在IE8一下的浏览器中，不会将空白文本当成子节点，所以该属性再IE8中会返回4个子元素...() 需要一个选择器的字符串作为参数，可以根据一个 CSS 选择器来查询一个元素节点对象 虽然 IE8 中没有 getElementsByClassName()但是可以使用 document.querySelector...---- 页面滚动条的归属者 ---- 解决浏览器兼容性常使用以下写法 //针对IE8以下浏览器不会将事件对象传入到事件函数的参数中 event=event||window.event;
CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类。 例如，针对第一个或最后一个子元素。...: hover 当可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色用。 : active 当元素被激活或单击时适用。 : focus 当元素具有键盘焦点时适用。...注意： CSS :last-child选择器在Internet Explorer 8和更早版本中不起作用。在Internet Explorer 9及更高版本中支持。...提示： CSS :nth-child(N)选择器在必须选择以特定间隔或模式（例如在偶数或奇数位置等）出现在文档树内的元素的情况下非常有用。...IE8仅在指定a的情况下支持。 三、伪类和CSS类 伪类可以与CSS类结合使用。 在下面的示例中class="red"，带有的链接将显示为红色。 <!
当然，如果有一个p元素出现在h1之前，那个p元素不会被匹配。...上面的例子，在鼠标悬停的时候，将会改变a元素内的span元素中的文字的颜色。...支持情况 IE6 No IE7 Yes IE8 Yes Bugs IE7中，如果要定位的第一个子元素之前有HTML注释，first-child伪类将会无效...然而，在IE6中只有在这个值用于根元素的时候才有效。...在该例子中，媒体类型是”screen”。
发现问题： 之前在做EasyNVR 的web页面开发过程中，力求的都是一个播放效果的、功能的展示。对于兼容性也有注意，但有些细节还是难免有所疏忽。...但是，在IE浏览器下，这些属性好像并没有起到作用。 ? 当我们单击播放器时，依然会出现暂停的情况。 分析问题： 我的第一想法是，是否是videojs对于ie浏览器的不兼容。...pointer-events: none 元素永远不会成为鼠标事件的target。...但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。 ?...也就是说，这个属性的IE还没有很好的支持； 解决问题： 我是我们就需要找个其他方式，来解决这个问题，来完成我们的需求； 我们在js中动态的设置： $(".vjs-tech").prop("disabled
false为默认值，表示冒泡阶段 IE8中提供的事件监听器为：element.attachEvent(eventName,functionName) eventName：为元素指定具体的事件名称...（例如单击事件是 click等） functionName：注册事件的句柄 事件中的this，当使用 addeventlistener()方法为某个HTML页面元素注册事件的时候，this就指代注册事件的元素...表示注册当前事件的HTML元素 srcElement E8及之前版本浏览器支持，表示触发当前事件的HTML元素 returnValue E8及之前版本浏览器支持，表示取消当前事件的默认行为 cancelBubble...函数return语句 link.onclick = function () { return false } 获取鼠标坐标 pageX和pageY 表示鼠标在整个页面中的位置。...clientX和clientY 表示鼠标在整个可视区域中的位置。 ? screenX和screenY 表示鼠标在整个屏幕中的位置。从屏幕（不是浏览器）的左上角开始计算。 ?
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。 ?...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...事件委托也称为事件代理，在 jQuery 里面称为事件委派。 说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 生活中的代理： ? js事件中的代理： ?
深入理解事件-3.png 一般来说事件冒泡机制用的更多一些，所以在IE8以及之前，IE只支持事件冒泡。...2） currentTarget: 绑定事件的对象，恒等于this，可能出现在事件流的任意一个阶段中。动态变化的。...3） 两者的应用场合 通常情况下target和currentTarget是一致的，我们只要使用terget即可，但有一种情况必须区分这三者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素...注意： IE8以及IE8之前可以通过 window.event.cancelBubble=true阻止事件的继续传播；IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播...根据事件冒泡原理，不管是原有li还是新增li，只要鼠标一移入li中就等同于鼠标移入ul中，自然会触发ul的鼠标移入事件，之后我们只要在ul的事件函数中定义相关行为就可以了。
在ie8及以下版本浏览器中，如果调用了元素的setCapture()方法，那么点击任何事物都会来执行这个元素绑定的响应函数。...可以将setCapture()方法用到鼠标拖拽div的例子中，但是注意，在给mousedown事件中，调用的box的**setCapture()方法之后，会有一个问题，就是当鼠标松开之后，事件还会一直被捕获...，在mouseup事件中调用box的releaseCapture()方法即可。...（如果不涉及ie8浏览器，就不用管这个问题。在火狐中嗲用时不会报错，但是在chrome中没有setCapture()这个方法）。...优化拖拽代码 在之前拖拽div的代码中，如果要拖拽多个内容，就需要重新为一个内容绑定事件，所有的操作都要重新写一遍，所以对之前的代码进行了优化： 定义函数，将拖拽的方法封装起来，方便调用，要拖拽哪个元素
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...事件委托也称为事件代理，在 jQuery 里面称为事件委派。 说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
所以，在事件处理函数中声明1个形参用来接收事件对象。...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...事件委托也称为事件代理，在 jQuery 里面称为事件委派。 说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。...动态新创建的子元素，也拥有事件。 知否知否，点我应有弹框在手！ 知否知否，点我应有弹框在手！
拖拽到 元素范围内就触发 ondragleave：有元素被 拖离 元素范围内就触发 ondragover：鼠标移动时，元素在我的范围内就会触发（非常频繁） ondrop: 鼠标松开时，元素还在我的范围内就会触发...* 注意点：这个事件默认不会触发，需要配合ondragover使用 <!...，元素在我的范围内'); }; //4.ondrop //这个事件默认不会触发，需要配合ondragover使用 // 给容器盒子注册ondragover...阻止事件冒泡：让同名事件不要在父元素中冒泡（触发） * 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件 语法： 事件对象.stopPropagation() IE8及之前不支持...事件对象.cancelBubble = true IE8之前支持 注意：如果想要阻止事件冒泡，一定要在触发事件的函数中接收事件对象 <!
换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。 事件流描述的是从页面中接收事件的顺序。...这个事件是 HTML 事件 blur 的通用版本 鼠标事件 DOM3 级事件中定义了 9 个鼠标事件: click: 在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发 dblclick:...mouseleave: 在位于元素上方的鼠标光标移动到元素范围之外时触发 mousemove: 当鼠标指针在元素内部移动时重复地触发 mouseout: 在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发...事件; 如果 mousedown 或 mouseup 中的一个被取消，就不会触发 click 事件。...在文本插入文本框之前会触发 textInput 事件 内存和性能 ---- 在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。 导致这一问题的原因是多方面的。
通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。 在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。...注意事项： 1、根据官网定义X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用。...默认情况下，IE8的浏览器模式为IE8。用户可以通过单击地址栏旁边的兼容性视图按钮来手动切换到不同的浏览器模式。...在IE8中，IE8兼容性视图会以IE7文档模式来显示网页，同时会向服务器发送IE7的用户代理字符串。...切换文档模式会导致网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器重新下载网页。切换浏览器模式的同时，浏览器也会自动切换到相应的文档模式。
DOM 选择器的差异 getElementById 和 getElementsByName 在低于 IE8 版本（不包括 IE8）的浏览器中，这两个选择器匹配的元素的 ID/name 值是不区分大小写的...不过在 IE 中每个 HTML 元素都有自己的 currentStyle 属性，该属性会返回一个对象，但与 getComputedStyle 方法相比，并不是真正的计算，设置的相对属性值并不会转化为绝对值...比如： elem.onclick = function(event){ // event 就是点击事件的时间对象 } 但在 IE8 及其之前的版本浏览器中，事件对象是存在于全局中的...在 IE9 之前没有该属性，它提供了另一个属性 —— cancelBubble 属性，当该属性值为 true 时，会阻制事件冒泡。下面一个简单的例子，让子元素在点击时父元素的背景不出现变化。...但在 IE9 之前的 IE 中，可以通过事件对象的 returnValue 属性设置为 false 来达到同样的效果。比如下面例子，当点击后，我们不让页面跳转，这样可以在页面跳转之前验证一些东西。
可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存 例子： 元素.事件 = function(event){ event...，向目标元素进行事件的捕获，但是默认此时不会触发事件 目标阶段 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 冒泡阶段 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 如果希望在捕获阶段就触发事件...，可以将addEventListener()的第三个参数设置为true 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false IE8及以下的浏览器中没有捕获阶段 # 拖拽 拖拽的流程...= function(event){ //设置box1捕获所有鼠标按下的事件 /* * setCapture() * - 只有IE支持，但是在火狐中调用时不会报错，...，则输入的内容，不会出现在文本框中 return false; } }; 1 2 3 4 5 6 7 8 9 10 11 复制 ---- # BOM Browser Object Model
但是在IE中似乎就没有能够完成自己应有的任务了。...但是，在IE浏览器下，这些属性好像并没有起到作用。 ? 当我们单击播放器时，依然会出现暂停的情况。 分析问题 遇到这个问题，我们研发人员首要排查的，就是查看是否videojs对于ie浏览器的不兼容。...pointer-events: none 元素永远不会成为鼠标事件的target。...但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。 ?...我们在js中动态的设置： $(".vjs-tech").prop("disabled",true); .prop是设置对象的属性。
我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，我之前的项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。...有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。...[endif]--> 2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍 解决办法：display:block; 3.IE6下图片的下方有空隙...a标签上的状态； ":active": a标签被鼠标按着时的状态； 8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0，...并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement 4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致
shift() 删除数组的开头的一个元素，并返回被删除的元素 reverse() 可以用来反转一个数组，它会对原数组产生影响 concat() 可以连接两个或多个数组，它不会影响原数组，而是新数组作为返回值返回...使用该属性可以获取或设置元素内部的HTML代码 事件 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存...("click", function () { console.log(2) },false); 在IE8中可以使用attachEvent()来绑定事件 参数： 事件的字符串，要on 回调函数...向目标元素进行事件的捕获，但是默认此时不会触发事件 目标阶段 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 冒泡阶段 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 如果希望在捕获阶段就触发事件...，可以将addEventListener()的第三个参数设置为true一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false 鼠标单击事件 btn.onclick = function
级中使用addEventListener和removeEventListener来注册和解除事件（IE8及之前版本不支持，IE7、IE8用 attachEvent）。...这种函数较之前的方法好处是一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。...例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。...在此过程中，浏览器都会检测针对该事件的捕捉事件监听器，并且运行这件事件监听器。 目标（target）阶段 浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行 该事件监听器。...在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
