Event(事件)

最新推荐文章于 2021-07-07 09:57:53 发布

heyuhan0000

最新推荐文章于 2021-07-07 09:57:53 发布

阅读量299

点赞数 1

分类专栏： JavaScript

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

event（事件）：

1. 什么是事件：事件是可以被JavaScript侦测到的行为

1.2 现代浏览器和古代浏览器（IE8之前的浏览器）获取元素并绑定事件监听器

<body>
  <div class="wrapper" id="ie"></div>
</body>
<script type = "type="text/javascript"">
			//事件处理函数
			// 对于 Chrome 、FireFox 、IE 8+ 来说，所有的 事件监听器( EventListener ) 的第一个参数都是 事件 实例
            // 对于 IE 8 - 来说，并不是这样，而是需要通过 window 对象上绑定的 event 来获取这个 事件 实例
		    var listener = function(){
	                var e = arguments[ 0 ] || window.event ;   //获取事件对象


	               //Event.srcElement和Event.target作用一样
	               //srcElement是非标准API (适用于不断作死的IE浏览器)
	                var t = e.target || e.srcElement ;  //获取事件源目标(通俗来讲就是事件产生之地)
	                alert( t );
	            };
// 针对 现代浏览器 获取元素并绑定 事件监听器 ( listener )
            // document.querySelector( ".wrapper" ).addEventListener( "click" , listener , true );
            
// 针对 古代浏览器 获取元素 并绑定 事件处理函数( listener )
            var w = document.getElementById( "ie" );
            w.onclick = listener ;
</script>

1.2.1鼠标事件

鼠标状态	状态说明
onclick	当用户点击某个对象时调用的事件
ondblclick	当用户双击某个对象时调用的事件
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
mouseenter	在鼠标光标从元素外部移动到元素范围之内时触发。这个事件不冒泡
mouseleave	在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡

注：click = mousedown + mouseup, dblclick = click*2(短时间内两次单击)
执行顺序：mouseover=>mouseenter; mouseout => mouseleave

1.2.2键盘事件

1.2.3表单事件

状态	状态说明
onselect	输入框文本被选中
onblur	元素失去焦点时触发
onfocus	素获得焦点时触发
onreset	重置按钮被点击
onsubmit	确认按钮被点击
oninput	输入字符时触发

1.2.4 UI事件

状态
onload	页面元素（包括图片多媒体等）加载完成后
onbeforeunload	用户退出页面
onresize	窗口或框架被重新调整大小

2. Evlent对象(通俗的来讲就是让某个事件产生的对象。如键盘，鼠标)

2.1 获取Evlent对象：

alert( arguments[ 0 ] ) ; // 现代浏览器都支持

alert( window.event ); // 针对 IE 系列尤其是 IE 8 以前的上古浏览器(作死时代的浏览器)

获取event对象的兼容写法: var  e = arguments[ 0 ] ||  window.event;

3 事件传播

3.1事件源对象(事件源对象为触发事件的元素)

标准：event.target;
IE8-：event.srcElement;

兼容性写法：

var target = event.target || event.srcElement

3.2 事件冒泡

document.querySelector( ".outer" ).addEventListener( "click" , listener , false ); // false 表示冒泡     
document.querySelector( ".wrapper" ).addEventListener( "click" , listener , false ); // false 表示冒泡
document.querySelector( ".inner" ).addEventListener( "click" , listener , false ); // false 表示冒泡

3.3事件监听与捕获（反冒泡）

document.querySelector( ".outer" ).addEventListener( "click" , listener , true ); // true 表示捕获    
document.querySelector( ".wrapper" ).addEventListener( "click" , listener , true ); // true 表示捕获
document.querySelector( ".inner" ).addEventListener( "click" , listener , true ); // true 表示捕获