JavaScript常见小问题

javascript中的css改变

document.getelementbyid("p2").style.color="blue";

3.js常见事件处理

事件就是用户或浏览器自身执行的某种动作，如click,laod,mouseover都是事件的名称。

事件流描述的是从页面中接收事件的顺序。

事件处理程序就是对事件作出响应的函数。事件处理程序的名字以“on”开头，

如click事件对应的事件处理程序的名称为onclick。为事件指定处理程序的方式有多种，

如：html事件处理程序、dmo0级事件处理程序、

dom2级事件处理程序、ie事件处理程序、跨浏览器事件处理程序。

当产生一个事件时，就会产生一个事件流，这个留从父组件开始向子组件流去，这个过程叫做捕获阶段。当找到发出事件的子组件时叫做目标阶段然后事件流会从目标组件反向流向父组件，这个过程叫冒泡阶段。三个阶段都可以相应事件。

（1）html事件处理程序

即：将事件处理程序，写在相应的html标签中。

eg:

缺点：①存在一个时间差，当用户在html元素一出现在页面上就去触发相应的事件时，

事件的处理程序可能还不具备执行条件（比如说调用的函数还木有被解析），

就会引发错误。eg:

functionmessage(){

alert("helloworld");

}

因为调用的函数处于按钮的下方，如果在message函数被加载之前就点击了按钮就会引发错误。

②html和js代码耦合度太高，如果要改变事件处理程序，就要改动两个地方：html代码和javascript代码。

（2）dmo0级事件处理程序

eg:

varbtn=document.getelementbyid("mybtn");

btn.onclick=function(){alert(this.id)};

注意：如果这段代码位于按钮之后，就有可能在一点时间内怎么点击都木有反应，

因为在这段代码运行以前不会指定事件处理程序。

dmo0级事件处理程序被认为是元素的方法，换句话说，

dmo0级事件处理程序是在元素的作用域中运行的，

所以程序中的this引用当前元素。可以在事件处理程序中通过this访问元素的任何属性和方法。

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

也可删除指定的事件处理程序，只要将事件处理程序的属性设置为null就ok了。

eg:

btn.onclick=null;将处理程序设置为null以后，再点击按钮不会发生任何动作。

（3）dom2级事件处理程序

dom2级事件定义了两个方法，用于指定和删除事件处理程序。

这两个操作分别为：addeventlistener()和removeeventlistner().所有的dom节点都包含这两个方法。

他们要接受3个参数，分别为：要处理的事件名，处理函数，布尔值。

最后的布尔值参数如果为ture,表示在捕获阶段处理程序，如果为false，表示在冒泡阶段调用事件处理程序。

例如在按钮上为click添加事件处理程序，可以用下面的代码：

varbtn=document.getelementbyid("mybtn");

btn.addeventlistner("onclick",function(){alert("helloworld");false});

这里添加的事件处理程序也是依附于元素的的作用域

使用dom2事件处理程序的优点是：可以为同一个元素添加多个事件处理程序。

例：varbtn=getelementbyid("mybtn");

btn.addeventlistner("click",function(){alert(this.id);},flase);

btn.addeventlistner("click",function(){alert("helloworld");},flase);

结果：先显示id，后显示helloworld。

通过addeventlistner()添加的事件处理程序只能通过removeeventlistner来删除。

移除时使用的参数与添加事件处理程序的参数相同。

另：通过addeventlistner添加的匿名函数无法删除。

（4）ie事件处理程序。

ie添加和删除事件处理程序的函数分别为：attachevent()和detachevent();

这两个函数接收相同的两个参数：事件处理程序名与事件处理函数。

由于ie只支持事件冒泡，所以通过attachevent添加的事件处理程序都会添加到冒泡阶段。

例如：varbtn=document.getelementbyid("mybtn");

btn.attachevent("onclick",function(){alert("helloworld");});

ie在使用attachevent方法的情况下，事件处理程序的作用域为全局作用域，

因此this等于window。（在编写跨浏览器的代码时，记住这一点非常重要）。

与addeventlistner类似，attachevent()方法也可以用来为一个元素添加多个事件处理程序；

eg:

varbtn=document.getelementbyid("mybtn");

btn.attachevent("onclick",function(){alert("clicked");});

btn.attachevent("onclick",function(){alert("helloworld");});

值得注意的是：这些事件的处理程序是按逆序触发的，也就是说，先弹出helloworld再弹出clicked。

detach()使用方法略。

（5）跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件，主要可以使用两个方法：

①使用能隔离浏览器差异的js库。

②自己编写最适合的事件处理方法。这里要用到能力检测，

即：识别浏览器的能力。要保证代码能在大多数浏览器下一致的运行，只须关注冒泡阶段。

代码步骤如下：

首先要创建的方法是addhandler(用于处理跨浏览器的兼容性问题，这里没有给出具体代码),

它的职责是视情况判定使用dom0级方法，dom2级方法，ie方法来添加事件。

addhandler接收3个参数：要操作的元素、事件名称、事件处理程序函数。

这个方法属于一个名叫eventutil的对象。这里使用这个对象来处理浏览器之间的差异。

与addhandler对应的方法是removehandler(),它也接受相同的参数。

这个事件的职责是移除之前添加的事件处理程序。

不论事件是以什么方式添加到对象中的，如果其他方法程序无效，则默认使用dom0级方法。

使用eventutil的方法如下：varbtn=document.getelementbyid("mybtn");

varhander=function(){alert("hello")};//事件处理程序

eventutil.addhandler(btn,"onclick",handler);

//其他代码

eventutil.removehandler(btn,"onclick",handler);

addhandler()和removehandler()没有考虑到所有的浏览器问题，

例如ie中作用域的问题，但是使用它们添加和移除事件处理程序还是足够了。

（6）onload和onunload事件

onload和onunload事件会在用户进入或离开页面时被触发。

navigator.cookieenabled==true检测浏览器是否启用cookie

（7）onmouseover和onmouseout事件onmousedown、onmouseup以及onclickonfocus

4.js输出html