Event事件

1.事件对象(event)
事件 : 对元素的某种操作
事件对象 : 当对元素进行某个事件操作时,会产生一个对象,这个对象就是 事件对象。
兼容:有些低版本浏览器不支持

obj.onmousemove = function(e){
					var e = e||event;
}

2.鼠标事件对象的属性
PageX/PageY :距离浏览器页面最左端/最顶端的的距离。
ClientX/ClientY:在本屏的网页内,距离可视窗口的内部偏移量。
OffsetX/OffsetY:距离你点击的对象的上/左边的距离。

button属性
鼠标事件的button属性:控制用户按键 左键、滚轮、右键。
一些高版本浏览器中的数值:
左键:0;
滚轮:1;
右键:2;
iE6/7/8:
左键:1;
滚轮:4;
右键:2;

兼容函数:

function getButton(evt){
	    var e = evt || event;
	    if( evt ){   //高版本浏览器
	        return e.button;
	    }else if( window.event ){   //id低版本
	        switch( e.button ){
	            case 1 : return 0;
	            case 4 : return 1;
	            case 2 : return 2;
	        }
	    }
	}

3.键盘事件(keyup、keydown、keypress)
①:使用onkeyup 和onkeydown 时keycode 是不区分大小写的,会将小写字母自动转为大写字母。
②:使用onkeypress时区分大小写
兼容:event.keycode || event.which

组合键ctrlkey、shiftkey、altkey (按住时返回true)
使用时判断if(ctrlkey &&keycode == 13(回车键)){}
这句话的意思就是同时按住ctrl 和Enter 会执行代码。
当按下键盘Enter 时有的浏览器显示换行(10),有的浏览器显示回车(13);多热键组合时,大部分浏览器支持较差。

4.事件流
当触发某个事件时,事件由子元素向父元素触发或者由父元素向子元素触发的过程,成为事件流。
事件流有两种形式:
事件冒泡:子元素向父元素触发,同样的事件会向父级元素触发,这个过程成为冒泡,一般主要会研究 onClick ,onmouseover ,onmouseout. //onload,onfocus,onblur 不会产生冒泡行为。
事件捕获:由父元素向子元素触发。

阻止事件冒泡:e.stopPropagation(); IE中的写法:e.cancleBubble = true;
兼容写法:

e.stopPropagation? e.stopPropagation()  :  e.cancleBubble = true; 

5.事件监听
给某个元素监听某种事件(给元素添加事件)。
事件绑定方式:
① obj.事件 = function (){}
② input type = ‘button’ onclick = ‘fn()’ (未加<>)
③ 事件监听方法 addEventListener
事件源. addEventListener(“事件” , function(){} , 布尔值);//注意:事件必须去掉on 栗子:click, mousemove。 布尔值默认是false 表示冒泡,true 表示事件捕获。
事件监听的好处:可以通过事件监听方法实现捕获行为,可以为同一个元素添加多个同样的事件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值