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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
href下载文件根据id取url并下载
May 28 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
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
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
php实现图片压缩处理
2020/09/09 PHP
js类 from qq
2006/11/13 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
Python selenium如何设置等待时间
2016/09/15 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python2 对excel表格操作完整示例
2020/02/23 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
极简的HTML5模版
2015/07/09 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
应聘自荐信
2013/12/14 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
授权委托书怎么写
2014/04/03 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
vue实现列表垂直无缝滚动
2022/04/08 Vue.js