码迷,mamicode.com
首页 > 其他好文 > 详细

事件的一些简单了解

时间:2017-08-12 23:57:31      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:了解   img   同名   属性   tar   window   参数   div   onkeyup   

事件深入了解
1):当点击在一个元素时,单击事件不仅仅发生在这个元素上,同时也点击了他的父元素以及祖先元素,甚至是整个页面。
2):DOM分三级事件绑定
     1:dom0级事件绑定
          dom.onclick = fun( )只能监听冒泡,不能监听捕获。注意ie9,chrome里面的冒泡,一直到window对象,
          但是ie678只到document对象。且没有window对象。
          这种事件处理程序里面的this指的是时间源,没有兼容性问题,DOM0级可以将事件监听直接写在标签中,但工作中不允许这样用。
          DOM0级相同元素不能同时添加多个相同事件,会被覆盖。
     2:DOM1级,与0级没有区别
     3:DOM2级事件绑定
     addEventListener()
     参数1:事件 click mouseover 不加on
     参数2:事件处理程序。
     参数3:冒泡 false  捕获 true。DOM2级可以同一个元素添加多个事件,不会冲突。事件处理程序里面的this指的是事件源本身。
 ie678浏览器绑定事件,
     attachEvent(),只有两个参数。
     参数一:onclick onmouseover  必须加on
     参数2:事件处理程序,function。不能监听冒泡或者捕获。这个事件处理程序中的this值得不是事件源,而是window。
     同一个元素添加多个事件,执行的顺序是从后到前面。
     4:经典轮子(兼容性能力检测:计算后样式,运动框架,className,addEvent)
     兼容性处理。jquery中用的都是dom2级,自带轮子(兼容性),jquery事件同名不会被覆盖。
三:事件对象
event
任何事件处理函数中,浏览器js引擎都会默认往里面传递一个实参,就是事件对象
box.onclick = function(event){console.dir(event);}
技术分享
             console.log(event);
            //返回true代表这个事件是否冒泡
            console.log(event.bubbles);
            //返回被点击的事件
            console.log(event.target);
            //事件源的id
            console.log(event.currentTarget.id);
            //被点击事件的id
            console.log(event.target.id);
            //事件类型
            console.log(event.type);
            //被点击事件的id
            console.log(event.srcElement.id);
            //this指代真正的事件源
            console.log(this);
event.stoppropagation();阻止冒泡,只执行到当前
event.preventDefault();阻止默认事件
event中常用的几个位置属性
属性                                                 参照
clientX clientY                            浏览器左上角
x                                                左上角
layerX layerY                              当前事件源左上角
pageX pageY                             当前文档左上角
offsetX offsetY                          当前事件源左上角
screenX screeY                          屏幕左上角
event判断敲击的是那个键盘。
event.keyCode. event.which //onkeydown,:键盘按下   onkeyup.键盘抬起  onkeypress键盘按下抬起
var ev = e||window.event;//为了兼容ie678;
event在ie678里面存在问题,这里不是实参,是window的一个属性,直接使用实参形式不可用window.event
event在ie678里面没有preventDefault( )方法,使用event.returnValue = false;来阻止默认事件。
if (event.preventDefault) {
  event.preventDefault();
  }else{
  event.returnValue = false;
}
event属性target
获取当前点击的元素,但是在ie678里面不兼容,所以在ie678里面使用srcElement
var target = event.target ||event.srcElement;

事件的一些简单了解

标签:了解   img   同名   属性   tar   window   参数   div   onkeyup   

原文地址:http://www.cnblogs.com/flyboy-fb/p/7351797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!