本文摘自PHP中文网,作者青灯夜游,侵删。
绑定方法:1、直接在标签中使用“onclick”属性绑定事件;2、使用“对象.onclick=function(){事件}”语句绑定事件;3、使用“对象.attachEvent('click',function(){事件})”语句绑定事件。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
javascript绑定事件的方法
首先,我先来介绍我们平时绑定事件的三种方法。
1.直接在标签中绑定事件
1 2 3 4 5 6 7 | <button onclick= "open()" >按钮</button>
<script>
function open(){
alert(1)
}
</script>
|
2.使用JavaScript对象绑定事件
1 2 3 4 5 6 | <button id= "btn" >按钮</button>
<script>
document.getElementById( 'btn' ).onclick = function (){
alert(1)
}
</script>
|
3.事件监听
1 2 3 4 5 6 7 8 9 10 | <button id= "btn" >按钮</button>
<script>
document.getElementById( 'btn' ).addEventListener( 'click' , function (){
alert(1)
})
document.getElementById( 'btn' ).attachEvent( 'click' , function (){
alert(1)
})
</script>
|
扩展资料:###事件委托
对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只制定一个事件处理程序,就可以管理某一类型的所有事件。例如click事件一直会冒泡到document层。也就是我们可以只指定onclick事件处理程序,而不必给每个事件分别添加处理程序。
下面我们来看一个阿里巴巴笔试题的例子。
样式以及DOM结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <style>
* {
padding: 0;
margin: 0;
}
.head, li div {
display: inline-block;
width: 70px;
text-align: center;
}
li .id, li .sex, .id, .sex {
width: 15px;
}
li .name, .name {
width: 40px;
}
li .tel, .tel {
width: 90px;
}
li .del, .del {
width: 15px;
}
ul {
list-style: none;
}
.user- delete {
cursor: pointer;
}
</style>
</head>
<body>
<div id= "J_container" >
<div class= "record-head" >
<div class= "head id" >序号</div><div class= "head name" >姓名</div><div class= "head sex" >性别</div><div class= "head tel" >电话号码</div><div class= "head province" >省份</div><div class= "head" >操作</div>
</div>
<ul id= "J_List" >
<li><div class= "id" >1</div><div class= "name" >张三</div><div class= "sex" >男</div><div class= "tel" >13788888888</div><div class= "province" >浙江</div><div class= "user-delete" >删除</div></li>
<li><div class= "id" >2</div><div class= "name" >李四</div><div class= "sex" >女</div><div class= "tel" >13788887777</div><div class= "province" >四川</div><div class= "user-delete" >删除</div></li>
<li><div class= "id" >3</div><div class= "name" >王二</div><div class= "sex" >男</div><div class= "tel" >13788889999</div><div class= "province" >广东</div><div class= "user-delete" >删除</div></li>
</ul>
</div>
</body>
|
**不用事件委托。**而这种方法造成的代价是,性能的大量浪费。如果是成千上万条数据,页面将会严重卡顿,甚至崩溃。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function Contact(){
this .init();
}
Contact.prototype.init = function (){
var userdel = document.querySelectorAll( '.user-delete' );
for ( var i=0;i<lis.length;i++){
( function (j){
userdel[j].onclick = function (){
userdel[j].parentNode.parentNode.removeChild(userdel[j].parentNode);
}
})(i);
}
}
new Contact();
|
使用事件委托,只绑定一次事件,大大减少了性能的损耗。也是在需要大量事件处理程序中一种非常好的解决方式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function Contact(){
this.init();
}
Contact.prototype.init = function (){
var lis = document.querySelector( '#J_List' );
lis.addEventListener( 'click' , function (e){
var target = e.target || e.srcElement;
if (!!target && target.className.toLowerCase()=== 'user-delete' ) {
}
})
}
new Contact();
|
【相关推荐:javascript学习教程】
以上就是javascript绑定事件的方法有哪些的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
如何设计算法?常见的算法范式介绍
javascript怎么验证是否为数字
javascript如何执行上下文
javascript怎么让数组倒序
javascript数据类型分为哪两类
javascript删除字符串最后一个字符
javascript数组什么意思
js常用正则表达式总汇
javascript中解析parseint()的怪异行为
javascript如何实现定时跳转页面
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript绑定事件的方法有哪些