js事件绑定,事件监听,事件委托

原创 2018年04月17日 00:59:56

首先要对 DOM 元素绑定事件函数.

1.直接绑定DOM元素

<input type="button" value="click me" onclick="fn()">
 
<script>
function fn(){
 console.log("绑定DOM元素")
}
</script>

2.在script中获取DOM元素进行绑定

<input type="button" value="click" id="btn">
 
<script>
document.getElementById("btn").onclick = function(){
 console.log("js获取DOM元素")
}
</script>

3.绑定事件监听函数

<input type="button" value="click me" id="btn1">   IE8以下不支持
 
<script>
document.getElementById("btn1").addEventListener("click",fn);
function fn(){
 console.log("事件监听")
}
</script>

3. 绑定事件监听函数IE中

<input type="button" value="click" id="btn2">
 
<script>
document.getElementById("btn2").attachEvent("onclick",fn);
function fn(){
 console.log("IE事件监听")
}
</script> 

事件监听的优点: 正常事件绑定,之后执行后面的事件函数 例:

<button id="btn1">点击</button>
<script>
var btn =document.getElementById("btn1")
btn.onclick = function() {
   console.log(1) // 不执行
}
btn.onclick = function () {
   console.log(2) // 执行
} 

事件监听: 

<button id="btn1">点击</button>
document.getElementById("btn1").addEventListener("click",hello1);
document.getElementById("btn1").addEventListener("click",hello2);
function hello1 () {
   console.log(2);// 执行
}
function hello2 () {
   console.log(3); // 执行
}

也可以单独删除对应的绑定

btn1.removeEventListener("click",hello2);

事件委托就是利用事件冒泡的原理,加在父元素或者祖先元素

最原始写法:

<ul>
  <li id="list1"></li>
  <li id="list2"></li>
  <li id="list3"></li>
</ul>
<script>
var list1= doucment.getElementById("list1")
var list2= doucment.getElementById("list2")
var list3= doucment.getElementById("list3")
list1.onclick = function () {
   console.log(list1)
}
list2.onclick = function () {
   console.log(list2)
}
list3.onclick = function () {
   console.log(list3)
}
</script>

事件委托写法: 

<ul id="list">
 <li id="list1" >list1</li>
 <li id="list2" >list2</li>
 <li id="list3" >list3</li>
</ul>
 
<script>
var list1= document.getElementById("list1");
var list2= document.getElementById("list2");
var list3= document.getElementById("list");
 
document.addEventListener("click",function(event){
 var target = event.target;
 if(target == list1){
    alert("list1");
 }else if(target == list2){
    alert("list2");
 }else if(target == list3){
    alert("list3");
 }
})

ArcGIS for JS基础课程

1、简单介绍应用Arcmap进行制图; 2、简单介绍Arcserver发布数据服务和功能服务; 3、基础的讲解ArcGIS for JS的配置,API查看以及graphic,graphiclayer扩展实现统计图等,实现基础的地图操作与展示;
  • 2015年05月10日 18:06

js中事件绑定3种方法以及事件委托

事件绑定首先,我先来介绍我们平时绑定事件的三种方法。 1.嵌入dom按钮 function open(){ alert(1) } 2.直接绑定按钮 document.getElementB...
  • blueblueskyhua
  • blueblueskyhua
  • 2017-04-23 14:06:56
  • 4312

JS中的事件委托机制

简要介绍:基于JS的事件冒泡,可以以JS事件委托的方式,在父元素上,给父元素的子元素绑定事件,同时减少事件绑定的时间复杂度。1.传统的事件监听HTML结构: 1 2 3 ...
  • liwusen
  • liwusen
  • 2017-01-03 17:10:18
  • 1492

【JavaScript】事件委托

前言:阻止事件冒泡,这句话经常听到,也会经常用到。其实事件冒泡也是有用处的,其中一个就是事件委托啦!一、简单事件绑定例子&amp;lt;body&amp;gt; &amp;lt;ul&amp;gt; ...
  • w390058785
  • w390058785
  • 2018-04-20 14:15:42
  • 24

JS 中的事件绑定、事件监听与事件委托

事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。 在JavaScr...
  • ZGhekuiwu
  • ZGhekuiwu
  • 2016-12-21 13:35:27
  • 11309

JavaScript 事件委托

转自:http://www.html-js.com/article/JavaScript-JavaScript-the-event-delegate-to-implement-event-can-be...
  • hi_kevin
  • hi_kevin
  • 2014-07-14 11:10:55
  • 3836

对于原生js中的事件委托解析

js中事件委托,以及事件委托可以使用的原理。
  • yaojxing
  • yaojxing
  • 2017-06-02 22:08:25
  • 900

深入理解JS事件委托

概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各...
  • zls986992484
  • zls986992484
  • 2017-03-12 22:47:57
  • 541

JS 委托事件

参考文章 https://juejin.im/entry/59ad709e6fb9a024a3712692?utm_source=gold_browser_extension 1.委托代理是...
  • ldyeyuguo1346
  • ldyeyuguo1346
  • 2017-11-21 09:39:02
  • 65

JS 事件委托

给所有btn绑定事件,可是当动态生成btn时的标签没有绑定事件,这个时候就要用到事件委托了... 原生js里面var container = document.getElementById("con...
  • qq_34481114
  • qq_34481114
  • 2017-07-07 15:21:29
  • 198
收藏助手
不良信息举报
您举报文章:js事件绑定,事件监听,事件委托
举报原因:
原因补充:

(最多只允许输入30个字)