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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
javascript 数组排序函数
2009/08/20 Javascript
javascript Object与Function使用
2010/01/11 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
angular多语言配置详解
2019/05/16 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Python中__name__的使用实例
2015/04/14 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
python生成ppt的方法
2018/06/07 Python
对pandas中Series的map函数详解
2018/07/25 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
入党思想汇报
2014/01/05 职场文书
《钱学森》听课反思
2014/03/01 职场文书
教师节活动主持词
2014/04/02 职场文书
温馨提示标语
2014/06/26 职场文书
MySQL Router的安装部署
2021/04/24 MySQL