首页 > 其他 > 详细

Dom事件初步了解

时间:2016-01-14 00:51:52      阅读:269      评论:0      收藏:0      [点我收藏+]

1.事件流

事件流可以分为两种:事件冒泡和事件捕获

1. 事件冒泡就是从目标元素一直冒泡到根元素html(IE和DOM浏览器都有)

2. 事件捕获就是从根元素到目标元素(DOM浏览器支持)

 

2.事件处理

1.HTML的事件处理,如下

<div class="btn" onclick="showME()">点击我</div>

把点击事件放入到标签内部这样不好就是行为和建构耦合在一起了,不好维护

 

2.DOM0级的事件处理

 <div class="btn" id="btn">点击我</div>

<script>

  var btn = document.getElementById("btn");

   btn.onclick = function(){

    //代码

   }

// 取消点击

 //  btn.onclick = null;

</script>

这个是把点击事件和结构分离了,这个不能给一个元素绑定多个点击事件,存在把之前合作同事的代码覆盖掉

3.DOM2级事件处理

<div class="btn" id="btn">点击我</div>

<script>

  var btn = document.getElementById("btn");

   btn.addEventListener(‘click‘,function(){

    //代码

   },false);

  //取消点击事件

  // btn.removeEventListener(‘click‘,function(){},false);

</script>

这样可以给元素绑定多个点击事件。好维护上面这些事DOM浏览器的,IE大家可以去查询一下attachEvent,detachEvent

 

3.Event 了解

DOM浏览器

event.type 属性就是事件类型

event.target 目标元素

event.stopProgation() 方法,是阻止冒泡的

event.preventDefault()方法,是阻止元素事件的默认行为如a标签

 

IE下

event.type 属性是事件类型

event.srcElement 目标元素

event.cancelBubble 属性 阻止冒泡

event.returnValue 属性  false是阻止事件默认行为

 

Dom事件初步了解

原文:http://www.cnblogs.com/kevinlifeng/p/5128809.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!