JavaScript让你和页面对话

╰半夏微凉° 2022-05-16 08:35 125阅读 0赞

1.  每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地说来这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。
2.  Node.js 使用像 on ( ) 这样的函数来注册一个事件监听器，使用 once ( ) 这样函数来注册一个在运行一次之后注销的监听器。
3.  事件委托：如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并将事件监听器气泡的影响设置为每个子节点，而不是每个子节点单独设置事件监听器。
4.  javascript 动态修改css样式方法汇总(四种方法)
5.      * 使用obj.style.className来修改样式表的类名    var obj = document.getElementById("btnB"); obj.style.backgroundColor= "black";
                    * 使用obj.style.cssTest来修改嵌入式的css    obj.style.cssText = " display:block;color:White;";
                    * 使用obj.className来修改样式表的类名    obj.setAttribute("class", "style2");    obj.className = "style2";
                    * 使用更改外联的css文件，从而改变元素的css    obj.setAttribute("href","css2.css");
6.  cssText 返回值是什么？在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号。
7.  为了解决这个问题，可以采用cssText累加的方法：Element.style.cssText += ‘width:100px;height:100px;top:100px;left:100px;’ 因此，上面cssText累加的方法在IE中是无效的。最后，可以在前面添加一个分号来解决这个问题：Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’
8.  为了兼容更多的浏览器，非特殊情况一般我们都是把事件添加到在事件冒泡阶段。
9.  基于DOM0的事件，对于同一个dom节点而言，只能注册一个，后边注册的 同种事件 会覆盖之前注册的。
10. DOM2支持同一dom元素注册多个同种事件，事件发生的顺序按照添加的顺序依次触发（IE是相反的）。DOM2事件通过addEventListener和removeEventListener管理。
11. IE用了attachEvent(),detachEvent(),接收两个参数,事件名称和事件处理程序。
12. 跨浏览器事件处理程序：创建的方法是addHandlers(),removeHandlers(),这两个方法属于一个叫EventUtil的对象;但是这个没有考虑到IE中作用域的问题，不过就添加和移除事件还是足够的。
13. 兼容触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含了所有与事件有关的信息。事件被触发时，会默认给事件处理程序传入一个参数e , 表示事件对象；通过e，我们可以获得其中包含的与事件有关的信息。只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完毕，event对象就会被销毁。
14. event.stopPropagation()可以组织事件的传播，但它阻止不了绑定在该元素上的其他函数的执行。event.stopImmediatePropagation()，那么第二个事件也会被阻止，它不仅阻止事件的传播还阻止后续事件的执行。
15. 因为冒泡机制，比如既然点击子元素，也会触发父元素的点击事件，那我们完全可以将子元素的事件要做的事写到父元素的事件里，也就是将子元素的事件处理程序写到父元素的事件处理程序中，这就是事件委托；利用事件委托，只指定一个事件处理程序，就可以管理某一个类型的所有事件。
16. 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。
17. setInterval()方法可以接收三个参数，此参数会作为参数传递给第一个函数参数。也就是说max会作为一个参数传递给函数show()，当count的值大于等于max时，会停止定时器的执行。
18. setInterval()方法的第一个参数是一个字符串，这种处理方式类似于eval()方法。但是要特别注意一下作用域问题，如果第一个参数是字符串，那么会在全区作用域查找show()函数。
19. Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。