javascript绑定事件办法有哪些

web前端|js教程 javascript绑定事件办法有哪些

javascript,事件绑定

web前端-js教程

ce6.3源码,vscode es6检测,ssh的ubuntu,如何清理tomcat的,爬虫营养粉,php ldap登录验证,谷歌seo导入其他网站评论,php网站源码中的文字修改,网校建站模板lzw

javascript绑定事件的方法

双喜网络公司广告源码,ubuntu用起来很卡,怎么用外部的tomcat,爬虫代码418,执行系统命令php,seo推广和信息流推广的异同lzw

首先，我先来介绍我们平时绑定事件的三种方法。

共享链源码,用vscode开发前端好吗,ubuntu禁止屏保,修改tomcat日志等级,pyt拍摄爬虫,php 时间插件,多语种插件谷歌seo,企业网站后台管理模板,模板文件&quotlzw

1.直接在标签中绑定事件

function open(){	alert(1)}

2.使用JavaScript对象绑定事件

document.getElementById('btn').onclick = function(){	alert(1)}

3.事件监听

document.getElementById('btn').addEventListener('click',function(){	alert(1)})//兼容IEdocument.getElementById('btn').attachEvent('click',function(){	alert(1)})

扩展资料：###事件委托

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只制定一个事件处理程序，就可以管理某一类型的所有事件。例如click事件一直会冒泡到document层。也就是我们可以只指定onclick事件处理程序，而不必给每个事件分别添加处理程序。

下面我们来看一个阿里巴巴笔试题的例子。

javascript绑定事件办法有哪些

样式以及DOM结构

    * {     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;   } 		  序号
姓名
性别
电话号码
省份
操作
	
        1
张三
男
13788888888
浙江
删除
     2
李四
女
13788887777
四川
删除
     3
王二
男
13788889999
广东
删除

**不用事件委托。**而这种方法造成的代价是，性能的大量浪费。如果是成千上万条数据，页面将会严重卡顿，甚至崩溃。

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();

使用事件委托，只绑定一次事件，大大减少了性能的损耗。也是在需要大量事件处理程序中一种非常好的解决方式。

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();

事件绑定