js事件基础

1、三个阶段

事件在嵌套容器中，是经历三个阶段，

第一个捕获阶段，从外向内

第二个目标阶段，到达目标

第三个冒泡阶段，从内向外

默认收到事件的顺序是冒泡阶段

2、addEventLIstener的第三个参数

可以直接设置第三个参数为一个true，表示捕获阶段触发：捕获阶段触发的目的可以设置在嵌套容器中谁先被触发

div1.addEventListener('click',clickHandler1,true);

也可以设置为{once:true,capture:true}

• once:true只能触发一次事件，然后这个事件就会被删除：点击一次就触发一次,点击那个盒子，触发哪个盒子
• capture:true 表示捕获阶段触发

div1.addEventListener('click',clickHandler1,{once:true,capture:true});

3、stopPropagation停止冒泡

停止事件的继续传递，可以在捕获和冒泡阶段使用，捕获阶段事件禁止传递给子元素，冒泡阶段事件禁止传递给父元素

e.stopPropagation();

4、事件委托

1）事件委托：子元素的事件委托给父元素侦听

2）为什么要事件委托？

每个元素侦听会占有内存。把事件委托给父元素，这样可以保证只侦听一个，减少内存的占有

因为每个元素侦听，都会触发对应的函数，就会执行多个函数，而事件委托只会执行一个函数

• e是事件传递的Event对象
• DOM事件传递时会自带一些属性 target,currentTarget,srcElement(没有)
• target，srcElement(IE兼容)是事件实际触发的目标对象
• currentTarget，this是事件侦听的对象,谁侦听，this就是谁

        div1.addEventListener('click', clickHandler1);
		function clickHandler1(e) {
		    //e是事件传递的Event对象
		    // console.log(e.target,e.currentTarget,e.srcElement,this);
		    console.log(e);
		}

3）系统事件（click）可以通过自定义抛发事件触发

var evt = new Event();
div1.dispatchEvent(evt);

4）默认事件的抛发不会向父容器冒泡

{bubbles:true}设置当前自定义事件允许向父容器冒泡

var evt = new Event('click',{bubbles:true});
div3.dispatchEvent(evt);

5、阻止事件默认行为

• 1.提交表单 默认提交表单会自动跳转页面，阻止以后不会跳转
• 2.重置表单 默认会清空表单里的数据，阻止后不会清除
• 3.容器中文本 默认可以选中文本，mousedown事件时，阻止后不能选中文本
• 4.图片拖拽 默认拖拽中会产生禁拖标志 mousedown事件时，不会产生禁拖标志
• 5.单击右键菜单时  默认会有浏览器的菜单  contextmenu阻止后不会有菜单
• 6.滚动条
• 7、stopImmediatePropagation阻止后续行为

6、三个事件的方法

e.stopPropagation阻止冒泡

e.preventDefault组织默认行为

e.stopImmediatePropagation阻止后续事件行为