在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能有所帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月30日
2024年11月30日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]