JavaScript关于监听器的小结
日期：2014-05-16 浏览次数：20473 次
JavaScript关于监听器的总结
谈及JavaScript的监听器首先谈到的应该是传统的绑定监听器的方法
要绑定一个监听器有2种方法，一种是静态绑定，一种是动态绑定。
所谓的静态绑定就是我们在具体的一个元素中，定义一个比如:onclick
的属性，让后让它指向一个具体的事件处理的方法,如:<input type="text"
id="first" name="first" onclick="first()"/>
动态绑定就是将方法指针交给比如onclick让他直接执行这个方法比如：
<script type="javascript/text">
document.getElementById("testOne").onclick=first;
关于这两个方法，为什么有动态方法和静态方法之分：
区别：关于静态绑定，它是一个指针执行一个具体的方法，仅仅只是这个指针
执行这个方法了，让后是这个方法的执行，而对于动态绑定，是将方法指针赋值给
了onclick，也就是说onclick指向的就是该方法体了，而静态绑定是一个指针指向
另外一个方法，让后该方法的方法指针指向方法。为了证明这点，我们可以写一个
具体的例子去证明他：
<html>
<body>
<script>
function first(){
var obj=document.getElementById("first");
alert(obj==this)
}
</script>
<input type="button" value="点击我" id="first" name="first" onclick="first()"/>
</body>
</html>
运行这个之后我们看到是false,但是在IE中如果将this调换在==的前面来返回的确是true;在其他的
浏览器中不会，可以说算是IE的一个小BUG吧， 从上面这个例子证明了，静态绑定与动态的具备。
后来人们又想到，我们能不能给一个属性，添加多个监听器，但是这是可以实现的，具体是怎么
做的如下：
首先你的得到你要添加的那个属性的事件对象，如：var obj=document.getElementById("first");
然添加，在IE中用这样的方法：obj.attachEvent("onclick",函数); 删除用detachEvent("onclick",函数)
在其他的浏览器中用: obj.addEventLisener("onclick",函数， true/false); 删除用：
obj.removeEventLisener("onclick",函数,true/false);
我们在编写HTML的时间不可能只针对某一种浏览器于是可以采用if来判断：
if(document.attachEvent){
obj.attachEvent(....);
}
else if(document.addEventListener){
obj.addEventListener(...);
}
采用上面这样通过一个属性来判断是不是当前浏览器支持的，如果不支持就执行下面的，解决了兼容问题
像这样通过一个属性的返回值，我们也常用来判断执行那一条添加。
在事件处理的过程之中，我们往往还看重的处理后的返回值，通过返回值，我们可以改变比如表达什么的
默认行为，例如一个表单，他默认的提交是TRUE，也就是不管怎么样，都要提交，但是有很多的时间
我们不希望把不必要的数据提交过来，比如，注册用户名为非法字符的实际，我们在客服端已经廉政了其不符合要求
这时，我们就可以在处理事件的程序返回false来改变表达的默认行为了。从而达到不符合要求的数据不提交服务器
谈及到监听器，就不得不说的Event对象了，事务对象是在事务发生的时间创建的，而在IE和其他浏览器
他们的Event对象是有区别的，对于IE来说，Event对象时属于window的一个对象,意味着我们要得到这个对象必须用
var obj = window.event; 而在其DOM ，规定event对象必须作为一个参数传递到事件处理程序中，也就是说
var obj=arguments[0],对于这样，我们可以在绑定监听器的时间就传一个event对象，然后不管哪个浏览器都
可以使用这个EVENT对象了，需要注意的是，绑定监听的实际传的event不是一个形参,名字必须是event这个事件对象
是浏览器帮我们创建的。
最后谈及的就是event对象的属性和行为，在IE中与DOM的不同点：
在IE中得到事件元素用的是oevent.scrElement, DOM中：oevent.target
得到当前的字符的编码：IE: keyCode; Dom : charCode;
阻止事件的默认行为: IE: returnValue() ; DOM: preventDefault();
终止冒泡传递： IE ：cancelbubble ； DOM：stopProgation;
谈及JavaScript的监听器首先谈到的应该是传统的绑定监听器的方法
要绑定一个监听器有2种方法，一种是静态绑定，一种是动态绑定。
所谓的静态绑定就是我们在具体的一个元素中，定义一个比如:onclick
的属性，让后让它指向一个具体的事件处理的方法,如:<input type="text"
id="first" name="first" onclick="first()"/>
动态绑定就是将方法指针交给比如onclick让他直接执行这个方法比如：
<script type="javascript/text">
document.getElementById("testOne").onclick=first;
关于这两个方法，为什么有动态方法和静态方法之分：
区别：关于静态绑定，它是一个指针执行一个具体的方法，仅仅只是这个指针
执行这个方法了，让后是这个方法的执行，而对于动态绑定，是将方法指针赋值给
了onclick，也就是说onclick指向的就是该方法体了，而静态绑定是一个指针指向
另外一个方法，让后该方法的方法指针指向方法。为了证明这点，我们可以写一个
具体的例子去证明他：
<html>
<body>
<script>
function first(){
var obj=document.getElementById("first");
alert(obj==this)
}
</script>
<input type="button" value="点击我" id="first" name="first" onclick="first()"/>
</body>
</html>
运行这个之后我们看到是false,但是在IE中如果将this调换在==的前面来返回的确是true;在其他的
浏览器中不会，可以说算是IE的一个小BUG吧， 从上面这个例子证明了，静态绑定与动态的具备。
后来人们又想到，我们能不能给一个属性，添加多个监听器，但是这是可以实现的，具体是怎么
做的如下：
首先你的得到你要添加的那个属性的事件对象，如：var obj=document.getElementById("first");
然添加，在IE中用这样的方法：obj.attachEvent("onclick",函数); 删除用detachEvent("onclick",函数)
在其他的浏览器中用: obj.addEventLisener("onclick",函数， true/false); 删除用：
obj.removeEventLisener("onclick",函数,true/false);
我们在编写HTML的时间不可能只针对某一种浏览器于是可以采用if来判断：
if(document.attachEvent){
obj.attachEvent(....);
}
else if(document.addEventListener){
obj.addEventListener(...);
}
采用上面这样通过一个属性来判断是不是当前浏览器支持的，如果不支持就执行下面的，解决了兼容问题
像这样通过一个属性的返回值，我们也常用来判断执行那一条添加。
在事件处理的过程之中，我们往往还看重的处理后的返回值，通过返回值，我们可以改变比如表达什么的
默认行为，例如一个表单，他默认的提交是TRUE，也就是不管怎么样，都要提交，但是有很多的时间
我们不希望把不必要的数据提交过来，比如，注册用户名为非法字符的实际，我们在客服端已经廉政了其不符合要求
这时，我们就可以在处理事件的程序返回false来改变表达的默认行为了。从而达到不符合要求的数据不提交服务器
谈及到监听器，就不得不说的Event对象了，事务对象是在事务发生的时间创建的，而在IE和其他浏览器
他们的Event对象是有区别的，对于IE来说，Event对象时属于window的一个对象,意味着我们要得到这个对象必须用
var obj = window.event; 而在其DOM ，规定event对象必须作为一个参数传递到事件处理程序中，也就是说
var obj=arguments[0],对于这样，我们可以在绑定监听器的时间就传一个event对象，然后不管哪个浏览器都
可以使用这个EVENT对象了，需要注意的是，绑定监听的实际传的event不是一个形参,名字必须是event这个事件对象
是浏览器帮我们创建的。
最后谈及的就是event对象的属性和行为，在IE中与DOM的不同点：
在IE中得到事件元素用的是oevent.scrElement, DOM中：oevent.target
得到当前的字符的编码：IE: keyCode; Dom : charCode;
阻止事件的默认行为: IE: returnValue() ; DOM: preventDefault();
终止冒泡传递： IE ：cancelbubble ； DOM：stopProgation;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
