这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
大家都知道要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。下面这篇文章给大家详细介绍了 JavaScript 中绑定事件的三种方式以及去除绑定的方法,有需要来一起看看吧。
在 JavaScript 中,有三种常用的绑定事件的方法
第一种办法
函数写在结构层里面
非常不好,使页面很混乱,行为与结构得不到分离
- <input type="button" onclick="func();">
绑定事件的第二种办法
好处:行为与结构开始分离
缺点:
第二种绑定方式中只能给一个时间绑定一个处理函数
即.
.
- onclick = fn1;
最终的效果是
- onclick = fn2
- onclick = fn2
- <select name="xueli">
- <option value="">
- 请选择学历
- </option>
- <option value="大学">
- 大学
- </option>
- <option value="中学">
- 中学
- </option>
- <option value="初中">
- 初中
- </option>
- <option value="小学">
- 小学
- </option>
- </select>
- <form action="">
- <p>
- Email:
- <input type="text" name="email">
- 姓名:
- <input type="text" name="ming">
- </p>
- </form>
- document.getElementsByTagName('select')[0].onclick= function (){
- alert('嘻嘻');
- }
- document.getElementsByName('email')[0].onblur=function (){
- alert('哈哈哈');
- }
- window.onload = function(){
- var d = document.getElementById('school');
- function fn1(){
- alert('hello');
- }
- function fn2(){
- alert('world');
- }
- d.onclick = fn1;//赋值操作 最终显示fn2
- d.onclick = fn2;
- }
绑定事件的第三种办法
- //错误写法1
- window.onload = function(){
- var d = document.getElementById('school');
- function fn1(){//this此时指向window
- this.style.background = 'blue';
- }
- function fn2(){//this此时指向window
- this.style.background = 'red';
- }
- //写一个匿名函数
- //最终的出现错误
- d.onclick = function (){
- fn1();
- fn2();
- //fn1 fn2是属性window的 实际上是这样 window.fn1() window.fn2()
- }
- }
下面这种写法没有问题 但是给 DOM 树额外增加了两个变量
- window.onload = function(){
- var d = document.getElementById('school');
- d.fn1 = function (){//fn1是d的属性 最终this此时指向DOM对象
- this.style.background = 'blue';
- }
- d.fn2 = function (){//this此时指向DOM对象
- this.style.background = 'red';
- }
- //匿名函数 调用上面两个函数
- d.onclick = function (){
- this.fn1();
- this.fn2();
- }
- }
不在使用 onclick
- window.onload = function() {
- var d = document.getElementById('school');
- //达到了一次绑定两个函数
- d.addEventListener('click',
- function() {
- alert('blue');
- this.style.background = 'blue'
- });
- d.addEventListener('click',
- function() {
- alert('red');
- this.style.background = 'red'
- });
- }
去除绑定 不能用匿名函数 匿名函数 当时产生 当时消失
- var fn1 = function() {
- alert('blue');
- this.style.background = 'blue'
- };
- var fn2 = function() {
- alert('red');
- this.style.background = 'red'
- };
- function adde() {
- var d = document.getElementById('school');
- d.addEventListener('click', fn1);
- d.addEventListener('click', fn2);
- }
- function reme() {
- var d = document.getElementById('school');
- //d.removeEventListener('click',fn1);//只剩fn1
- d.removeEventListener('click', fn2);
- }
在 IE 下第三种绑定事件的方法
- <div id="school">
- </div>
- <input type="button" value="加事件" onclick="adde();">
- <input type="button" value="减事件" onclick="reme();">
- var fn1 = function() {
- alert('blue');
- this.style.background = 'blue'
- };
- var fn2 = function() {
- alert('red');
- this.style.background = 'red'
- };
- function adde() {
- var d = document.getElementById('school');
- // IE6,7是后绑定的事件先发生
- d.attachEvent('onclick', fn1);
- d.attachEvent('onclick', fn2); //fn2先发生
- }
- function reme() {
- var d = document.getElementById('school');
- //d.deltachEvent('click',fn1);//只剩fn1
- d.deltachEvent('click', fn2);
- }
总结
以上就是 JavaScript 中绑定事件与去除绑定的三种方式,希望本文的内容对大家学习或者使用 Javascript 能有所帮助,如果有疑问大家可以留言交流,谢谢大家对 phperz 的支持。
来源: http://www.phperz.com/article/17/0511/330635.html