事件

最新推荐文章于 2024-06-17 07:15:00 发布

qingemengyue

最新推荐文章于 2024-06-17 07:15:00 发布

阅读量169

点赞数

分类专栏： HTML javascript

本文链接：https://blog.csdn.net/qingemengyue/article/details/77449936

版权

HTML 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

17 篇文章 2 订阅

订阅专栏

1.捕获和冒泡

（1）冒泡就是从下往上，也就是DOM元素被触法事件时(此时的dom元素为目标元素)，目标元素事件执行后，它的祖先元素所绑定的事件会向上顺序执行。
（2）捕获正相反。
（3）所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。

<div id='one'>
  <div id='two'>
    <div id='three'>
      <div id='four'>
      </div>
    </div>
  </div>
</div>
<script type='text/javascript'>
  var one=document.getElementById('one');
  var two=document.getElementById('two');
  var three=document.getElementById('three');
  var four=document.getElementById('four');
  one.addEventListener('click',function(){
    alert('1');
  },false);
  two.addEventListener('click',function(){
    alert('2');
  },false);
  three.addEventListener('click',function(){
    alert('3');
  },false);
  four.addEventListener('click',function(){
    alert('4');
  },false);
</script>

<div id='one' onclick="alert('1')">11111
  <div id='two' onclick="alert('2')">22222
    <div id='three' onclick="alert('3')">3333
      <div id='four' onclick="alert('4')">4444
      </div>
    </div>
  </div>
</div>

两段代码执行结果均为：

点击one元素，输出1；

点击two元素，输出2 1;

点击three元素，输出 3 2 1；

点击four元素，输出 4 3 2 1；

2.阻止冒泡

e.stopPropagation();

<html>
<div id='one'>11111
  <div id='two'>22222
    <div id='three'>3333
      <div id='four'>44444
      </div>
    </div>
  </div>
</div>
<script type='text/javascript'>
  var one=document.getElementById('one');
  var two=document.getElementById('two');
  var three=document.getElementById('three');
  var four=document.getElementById('four');
  one.addEventListener('click',function(e){
    alert('one');
    e.stopPropagation();
  },false);
  two.addEventListener('click',function(e){
    alert('two');
    e.stopPropagation();
  },false);
  three.addEventListener('click',function(e){
    alert('three');
    e.stopPropagation();
  },false);
  four.addEventListener('click',function(e){
    alert('four');
    e.stopPropagation();
  },false);
</script>
</html>

在ie中

e=window.event;
e.cancleBubble=true;

代码执行结果为：

点击one元素，输出 1；

点击two元素，输出 2 ;

点击three元素，输出 3；

点击four元素，输出 4；

3.一个DOM元素绑定多个事件的执行过程

执行次数：绑定了几个事件便执行几次。

4.target


<script type="text/javascript">
function getEventTrigger(event)
  { 
  x=event.target; 
  alert("The id of the triggered element: " + x.id);
  }
</script>
</head>

<body >

<p id="p1" onmousedown="getEventTrigger(event)">
Click and alert box will show which element triggered the event.</p>

代码执行结果为：The id of the triggered element: p1

qingemengyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件

1.捕获和冒泡（1）冒泡就是从下往上，也就是DOM元素被触法事件时(此时的dom元素为目标元素)，目标元素事件执行后，它的祖先元素所绑定的事件会向上顺序执行。（2）捕获正相反。（3）所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。<div id='one'> <div id='two'> <div id='three'>
复制链接

扫一扫

专栏目录