#hello，JS：10 -02事件对象和事件代理

一、事件的IE兼容性

在老版的IE浏览器中，
不支持：addEventListener和removeEventListener 两种事件绑定的方法
支持（可实现）：attachEvent和detachEvent 两种方法，同时接收两个相同参数
a、事件处理程序名称
b、事件处理程序方法
由于IE支持事件冒泡，所以添加的程序会被添加到冒泡阶段，使用attachEvent可以添加事件处理程序：

<input id="btnClick"  type="button" value="Click Here" />

<script>
   var btnClick = document.getElementById('btnClick')
   var handler = function(){
          alert(this.id)
}
   btnClick.attachEvent('onclick',handler);
</script>
  • attachEvent只能在冒泡阶段监听事件，只有两个参数：(事件类型，事件处理函数)
  • ie中的this：它所得到的并不是当前元素，而是window对象，返回值则为undefined

二、跨浏览器的事件处理程序

了解不同的浏览器下处理事件处理程序的区别
在添加事件处理程序事addEventListener和attachEvent主要有几个区别：
1、参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

2、第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

3、事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

4、为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

三、事件对象

image

如刚才例子http://js.jirengu.com/hahid/1/edit?html,js 中在控制台上打印出事件，事件内都是一些对象（带有属性和值），可以从这堆属性中观察到一些重要的参考（只是部分例举），如：

altKey:false  //表示在点击事件的时候，没有点alt键
bubbles:true  //表示这个事件是冒泡
clientX:39
clientY:18   //表示它的一个位置
toElement:button#btn   //说明当前传递的元素

介绍几个常用属性：

  • stopPropagation()
    如图：
    [图片上传失败...(image-187d5b-1534131542419)]
    阻止冒泡继续？
    在dom事件流中，分别会在捕获和冒泡阶段都绑定事件，先捕获后冒泡进行输出。假设我们现在不管捕获，只管冒泡，并给body绑定一个监听事件，当它听到事件做了一件事：一点stopPropagation()就停止冒泡，即点击div之后，body监听到消息，后面的页面元素渲染就不再处理。即将事件冒泡停止，不会再上传消息。捕获也亦然。
  • preventDefault()
    浏览器的默认事件如何阻止？
    某些元素拥有默认事件，为浏览器的默认行为。如a链接点击时则会跳转、如form表单中table=submit，当点击该按钮时，浏览器会把它所在的form表单做一次提交。假设想阻止其默认行为，则可以通过绑定事件：preventDefault()阻止其行为。之后再做一些校验或判断，用JS 做当前页面跳转。即在跳转这一层级可以做些事：
    假设制定一个域名的a链接才能跳转（而页面则是用户可自行写链接）先阻止其默认时间，再获取当前herf的值、hostname（域名）

假设表单提交，用户校验，校验成功之后，就手动去做一些跳转

  • e.stopPropagation( ) 取消事件进一步捕获或冒泡
    事件冒泡和事件捕获的应用场景 
//选中元素
var container = document.querySelector('.container')

var box = document.querySelector('.box')

var target = document.querySelector('.target')

//绑定事件
container.addEventListener('click', function(e){
  console.log('container 捕获 click...')
},true)

box.addEventListener('click', function(e){
  console.log('box 捕获 click...')
},true)

target.addEventListener('click',function(e){
  console.log('target 捕获 click...')
},true)


container.addEventListener('click', function(e){
  console.log('container 冒泡 click...')
},false)

box.addEventListener('click', function(e){
  e.stopPropagation()
  console.log('box 冒泡 click...')
},false)

target.addEventListener('click',function(e){
  console.log('target 冒泡 click...')
},false)

如图：


image

多个阻止函数来阻止冒泡事件


image
  • e.preventDefault( ) 阻止事件默认行为
    链接：阻止事件默认行为
    刚开始是这样的：没有跳转，只有一直输出：
    image

代码：

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
      <title>阻止默认事件</title>
    </head>
       <body>
          <a href="http://baidu.com">baidu</a>
        </body>
   </html>

<script>
    document.querySelector('a').onclick = function(e){
           e.preventDefault()
           console.log(this.href)
}
</script>

接着看图所示，添加一个if判断，再点击baidu链接，控制台只输出一次地址，页面则出现百度的网页：


image

代码：

//html同上

<script>
document.querySelector('a').onclick = function(e){
  e.preventDefault()
  console.log(this.href)
  if(/baidu.com/.test(this.href)){
    location.href = this.href
  }
}//函数表示：如果这个链接是baidu.com,那就跳转
</script>

假如html代码中

 <a href="http://baidu.com">baidu</a>

改为：

 <a href="http://baid.com">baidu</a>

最后页面和控制台都不会有任何反应。而这就是e.preventDefault( ) 阻止事件默认行为

四、常用HTML事件及演示

例子链接：常见事件使用演示

五、事件代理

链接：事件代理的一些尝试
首先，我们为两个box绑定两个事件，先绑定box1，如图：

image

通过选择参数$('.box')作为box1的当前元素，所以再去绑定事件之后，则只会出现第一个box1文本内容。
但是，我们尝试地使用函数$$(selector)绑定两个元素的事件，再点击box1和box2没有任何输出，如图：
image

通过页面控制台检验：

$$('.box')
 -->  NodeList(2) [div.box, div.box]//1、确实出现了所选的两个元素，但是要确认有没有onclick
      0: div.box
      1: div.box
      length: 2
      __proto__: NodeList   //3、我们所看到NodeList，是一个类数组对象，里面的属性值并没有onclick和addEventListener
$$('.box').onclick   //2、于是测试之后undefined，即绑定事件只能针对单个去绑定事件
 -->  undefined
image

那如何解决两个元素同时绑定事件呢？还是从控制台nodelist的对象中寻找可用的参数去解决，即有forEach遍历两个元素，实现两个都绑定了事件，即：

//html同上

<script>
function $$(selector){
  return document.querySelectorAll(selector)
}
$$('.box').forEach(function(node){
  node.onclick = function(){
     console.log(this.innerText)
  }
})
</script>

图：


image

那么，我们有没有更简单的方法实现当前所有元素都绑定了事件？看html即可以知道，我们可以直接绑定父元素container，即

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
     <div class="container">
     <div class="box">box1</div>
     <div class="box">box2</div>
     <div class="hello">hello</div>
   </div>
  
</body>
</html>

<script>
function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}
$('.container').onclick = function(e){
  if(e.target.classList.contains('box')){
    console.log(e.target.innerText)
  }
}//表示：如果我点击了一个元素（e.target），它的classList包含了'box'，
//那么它就输出这个元素的文本内容。具有语义化
</script>

再想到更多的场景，如有一个按钮，如何绑定这个按钮实现这样一个需求：当点击这个按钮的时候，则会在父元素下再添加一个box。这个如何实现？如图：


image

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
     <div class="container">
     <div class="box">box1</div>
     <div class="box">box2</div>
     <div class="box">box3</div>
     <div class="hello">hello</div>
   </div>
  <button id="add">add</button>
  <!--需求：当点击这个按钮的时候，则会在父元素下再添加一个box-->
</body>
</html>


<script>
function $(selector){
  return document.querySelector(selector)
}

function $$(selector){
  return document.querySelectorAll(selector)
}

$('.container').onclick = function(e){
  if(e.target.classList.contains('box')){
    console.log(e.target.innerText)
 }
}//事件代理的核心所在

//表示：如果我点击了一个元素（e.target），它的classList包含了'box'，那么它就输出这个元素的文本内容。具有语义化


var i=4  //这是因为之前有box3了
$('#add').onclick = function(){
  var box = document.createElement('div')//创建一个box元素
  box.classList.add('box')//创建的当前元素去添加一个class叫做box
  box.innerText ='box' + (i++)//表示每点击一次i就增加一个
  $('.container').appendChild(box)//最后将box这个元素添加进.container里面
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,912评论 1赞 11
  • 《JavaScript 闯关记》之事件
    JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 5,039评论 3赞 11
  • JS中DOM0,DOM2,DOM3级事件模型解析
    声明：本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下（...
    angryyan阅读 11,956评论 1赞 6
  • JavaScript中的事件处理机制
    以下文章为转载，对理解JavaScript中的事件处理机制很有帮助，浅显易懂，特分享于此。 什么是事件？ 事件(E...
    jxyjxy阅读 8,215评论 1赞 10
  • javascript事件
    JavaScript 与 HTML 之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬...
    threetowns阅读 2,806评论 0赞 0

友情链接更多精彩内容