事件侦听和删除事件——event对象——默认事件——取消冒泡事件——事件委托——默认触发

事件侦听和删除事件

DOM0级：

• 一个标签的同一事件只能绑定一个事件函数
• 事件可以直接添加在行内
• 各大浏览器都支持，不存在兼容性问题

DOM2级

• 一个标签的同一事件可以绑定多个事件函数

event对象

函数	功能
pageX	光标相对于该网页的水平位置
pageY	光标相对于该网页的垂直位置
screenX	光标相对于该屏幕的水平位置
screenY	光标相对于该屏幕的垂直位置
clientX	光标相对于该网页的水平位置 （当前可见区域）
clientY	光标相对于该网页的垂直位置 （当前可见区域）

默认事件

范围	方法
DOM中：	event.preventDefault() 阻止默认行为
IE中:	event.returnValue=false 返回值=false

取消冒泡事件

项目	Value
标准浏览器下 DOM中 :	event.stopPropagation() 停止传播
IE8及以下：	event.cancelBubble=true 取消冒泡

现在一般是：e.stopImmediatePropagation();//阻止同事件类型后续函数的执行

var div1 =document.querySelector('.div1')
var div2 =document.querySelector('.div2')
var div3 =document.querySelector('.div3')
div1.addEventListener('click',clickHandler1)
div2.addEventListener('click',clickHandler2)
div3.addEventListener('click',clickHandler3,{
    once:true,capture:true})


function clickHandler1(e){
    
   e.stopPropagation();//阻止冒泡
   console.log('div1');
} 
function clickHandler2(e){
    
   e.stopPropagation();//阻止冒泡

   console.log('div2');
   // e.stopImmediatePropagation();//阻止同事件类型后续函数的执行
} 
function clickHandler3(e){
    
   e.stopPropagation();
   console.log('div3');
}  

事件委托

• 将子元素的侦听事件委托交给父元素做侦听，这样，所有子元素触发的事件
• 都会传递冒泡给父元素，减少了内存开销
  那么如何来确认到底是点击了那个来触发事件的呢：

e.target e.srcElement(IE8) 最终点击到目标元素 e.currentTarget this 侦听事件的对象元素

console.log("div1",e.target,e.currentTarget,e.srcElement,this);

默认触发

事件名	功能
change事件	主要针对表单及表单元素,表单元素触发事件会冒泡给form 修改后失焦触发

<form action="">
	<input type="text">
	<input type="checkbox">
	<textarea name="" id="" cols="30" rows="10"></textarea>
	<button type="reset">重置</button>
</form>
<div></div>
<script>

	var input=document.querySelector("[type=text]");
	var checkbox=document.querySelector("[type=checkbox]");
	var form =document.querySelector("form");
	
	input.addEventListener("change",changeHandler);
	checkbox.addEventListener("change",changeHandler);
	form.addEventListener("change",changeHandler);
	
	function changeHandler(e){
    
	    console.log(e)
	}
</script>	

事件名	功能
submit	提交表单
reset	重置表单
以上	都是针对form表单的事件
e.preventDefault();	阻止默认事件的发生（重置/提交）

var form=document.querySelector("form");
// form.addEventListener("submit",submitHandler);
form.addEventListener("reset",submitHandler);
function submitHandler(e){
    
   // e.preventDefault(); 
   console.log(e);
}

事件名	功能
resize事件	主要针对window，而不是textarea
触发	当缩放窗口时触发事件

function resizeHandler(e){
    
// console.log(e)
// 屏幕宽度screen.width
// 窗口宽度 outerWidth 
// 窗口宽度/屏幕宽度*100(原始100%宽度时fontSize的大小)
// 窗口缩小，比例就会缩小，重新根据比例设置文本大小
document.documentElement.style.fontSize=outerWidth/screen.width*100+"px"
}

事件名	功能
select	选中事件
触发	针对文本框中输入的文本内容选中时触发

var input=document.querySelector("[type=text]");
input.addEventListener("select",selectHandler);

function selectHandler(e){
    
	console.log(input.selectionStart);//获取选中文本框内字符的开始下标
	console.log(input.selectionEnd);//获取选中文本框内字符的结束下标
}

事件名	功能
scroll	当滚动条滚动时触发事件

window.addEventListener("scroll",scrollHandler);
function scrollHandler(e){
    
	console.log(document.documentElement.scrollTop)
}

error 错误	load 加载
window加载 DOM树渲染完毕	load事件触发
ajax通信加载 当通信加载完成	load事件触发
加载图片、js、css、视频，	加载完成后触发
当加载失败	触发error事件

事件派发

事件中的this