JavaScript事件的委派与事件的绑定
事件的委派
在很多需求中，通常元素是动态创建添加到一个父元素中的，这时候我们点击新增的元素是没有反应的
<script type="text/javascript">
window.onload = function(){
var u1 = document.getElementById("u1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var li = document.createElement("li"); //创建一个li
li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
u1.appendChild(li); //点击按钮以后添加超链接，将li添加到ul中
}; /*
* 为每一个超链接都绑定一个单击响应函数
* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
* 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
*/
//获取所有的a，这样其实后面新增的li点击没效果
var allA = document.getElementsByTagName("a");
//遍历
for(var i=0 ; i<allA.length ; i++){
allA[i].onclick = function(){
alert("我是a的单击响应函数！！！");
};
}
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
<li>
<p>我是p元素</p>
</li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
点击新建的超链接，不会有任何反应，没有触发到点击事件。这时候我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
可以尝试将其绑定给元素的共同的祖先元素
指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素（这个就是冒泡的好处），从而通过祖先元素的响应函数来处理事件
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
<script type="text/javascript">
window.onload = function(){
var u1 = document.getElementById("u1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var li = document.createElement("li"); //创建一个li
li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
u1.appendChild(li); //点击按钮以后添加超链接，将li添加到ul中
};
// 为ul绑定一个单击响应函数
u1.onclick = function(event){
event = event || window.event;
//如果触发事件的对象是我们期望的元素，则执行否则不执行
if(event.target.className == "link"){
console.log(this) // this是ul这个元素
console.log(event.target) // event中的target表示的触发事件的对象
alert("我是ul的单击响应函数");
}
};
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
<li>
<p>我是p元素</p>
</li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
这时候点击新建的超链接就有效果了
事件的绑定
使用 对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
<body>
<button id="btn01">点我一下</button>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01");
//为btn01绑定一个单击响应函数
btn01.onclick = function(){
alert(1);
}; //为btn01绑定第二个响应函数
btn01.onclick = function(){
alert(2);
};
};
</script>
执行结果第二个绑定的响应函数覆盖了第一个绑定的函数，使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，addEventListener()，通过这个方法也可以为元素绑定响应函数
参数：第一个参数：事件的字符串，不要on。第二个参数：回调函数，当事件触发时该函数会被调用。第三个参数：是否在捕获阶段触发事件，需要一个布尔值，一般都传false
<body>
<button id="btn01">点我一下</button>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01"); btn01.addEventListener("click",function(){
alert(1);
},false); btn01.addEventListener("click",function(){
alert(2);
},false);
};
</script>
执行结果可以看到，两个绑定的响应函数都触发了，这个方法不支持IE8及以下的浏览器，但可以使用attachEvent()方法
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反
参数：第一个参数：事件的字符串，要on。第二个参数：回调函数
<body>
<button id="btn01">点我一下</button>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01"); btn01.attachEvent("onclick",function(){
alert(1);
});
btn01.attachEvent("onclick",function(){
alert(2);
});
btn01.attachEvent("onclick",function(){
alert(3);
});
};
</script>
执行结果是先执行了第三个绑定的响应函数，依次第二个，第一个。执行顺序和addEventListener()相反
在以上两个方法中，的this指向不一样。addEventListener()中的this，是绑定事件的对象
<body>
<button id="btn01">点我一下</button>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01"); btn01.addEventListener("click",function(){
console.log(this); // this是绑定事件的对象：<button id="btn01">点我一下</button>
},false);
};
</script>
attachEvent()中的this，是window
<body>
<button id="btn01">点我一下</button>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01"); btn01.attachEvent("onclick",function(){
console.log(this); //this是window
});
};
</script>
那么我们可以写一个方法来兼容这两种方法：先判断是否支持addEventListener方法，如果支持就执行这种方式，如果不支持就执行attachEvent方法，并且统一this的指向
<body>
<button id="btn01">点我一下</button>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01"); bind(btn01 , "click" , function(){
console.log(this);
});
}; /*
* 参数：
* obj 要绑定事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数
*/
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
/*
* this是谁由调用方式决定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
// 在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
JavaScript事件的委派与事件的绑定的更多相关文章
- javascript闭包传参和事件的循环绑定
今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...
- javascript事件委托和jQuery事件绑定on、off 和one
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- javascript 事件委托 和jQuery事件绑定on、off 和one
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- javaScript事件（一）事件流
一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
随机推荐
- SQL Server使用ROW_NUMBER进行快速分页查询
DECLARE @pageSize INTDECLARE @pageIndex INT --第4页,每页显示10条数据SET @pageSize = 10SET @pageIndex = 4 SELE ...
- CF898A Rounding
题意翻译 给你一个数字,将其“四舍六入”,末尾为5舍去或进位都可,求最终的数字. 题目描述 Vasya has a non-negative integer n n n . He wants to r ...
- java中的奇葩 “:”
一.经常使用java的人有没有发现java也可以将汉字作为标识符出现呢? 在Java语言中,标识符是以字母.下划线(_)或美元符($)开头,由字母.数字.下划线(_)或美元符($)组成的字符串 真的输 ...
- MAC 系统 各种操作
Part1:MAC如何打开活动监控器 1.第一种方法: 2.第二种方法 然后直接拖到dock中 Part2:Terminal 中的操作 一.如何开启apache 在终端输入sudo apachectl ...
- csharp:SQLite and Access using C# code read data
SQLite sql script: CREATE TABLE BookKindList ( BookKindID INTEGER PRIMARY KEY AUTOINCREMENT, BookKin ...
- BZOJ4598: [Sdoi2016]模式字符串(点分治 hash)
题意 题目链接 Sol 直接考虑点分治+hash匹配 设\(up[i]\)表示\(dep \% M = i\)的从下往上恰好与前\(i\)位匹配的个数 \(down\)表示\(dep \% M = i ...
- JS获取第二个横杠后面的内容
假设数据为: let str = "zheng-shize-zsz"; 获取第一个横杠的位置: str.indexOf("-") 1. 那获取第二个横杠怎么写呢 ...
- 【转】老生常谈-从输入url到页面展示到底发生了什么
今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...
- react父子组件各自生命周期函数加载的先后顺序
理解记忆总结: 父组件即将挂载(最外层的父组件都还没准备进入,其内部的子组件当然更没进入了) -> 子组件即将挂载 -> 子组件挂载完成(父内部都没完成,父当然不能算完成) -> ...
- Qt Quick程序的发布
要将程序发布出去,首先需要使用release方式编译程序,然后将生成的.exe可执行文件和需要的库文件发在一起打包进行发布. 要确定需要哪些动态库文件,可以直接双击.exe文件,提示缺少那个dll文件 ...