JavaScript中绑定事件的三种方式及去除绑定


Posted in Javascript onNovember 05, 2016

在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能有所帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
javascript常见用法总结
May 22 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
Ajax与服务器(JSON)通信实例代码
Nov 05 #Javascript
Javascript 普通函数和构造函数的区别
Nov 05 #Javascript
Javascript 函数的四种调用模式
Nov 05 #Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 #Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 #Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 #Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
通过实例了解JS 连续赋值
2019/09/24 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python3 读写文件换行符的方法
2018/04/09 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
工商企业管理专业自荐信范文
2014/04/12 职场文书
承诺书样本
2014/08/30 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
社区党务工作总结2015
2015/05/19 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js