js模块（常用事件、事件监听器）

常用事件1

• 在事件中，事件需要加上 on 关键字

		.onclick     点击事件
        .onomuseover 鼠标移入事件
        .onchange    改变事件(表单标签，选中状态切换的触发)
        .onmouseout  鼠标移出时间

        .onload             加载事件
        .onreadystatechange 加载事件（ajax中，有状态码返回，比onload更全面）

        .ontransitionend     过渡完成触发事件 
        .onanimationstart    动画开始触发事件
        .onanimationend      动画结束触发事件
        .onanimationieration 动画每次循环触发事件

        window.onscroll             页面滚动触发事件
        window.onresize             浏览器窗口大小改变时触发事件
        window.onhashchange         浏览器地址hash值改变触发事件（#...改变）

事件监听器

常用事件2

• 事件监听器 中，事件 不用加on 关键字

鼠标相关事件：        
        鼠标移入移出事件 mouseover、mouseout
            父级内如果移入子集，会触发移出父级事件

        新鼠标移入移出事件  mouseenter、mouseleave
            父级内如果移入子集，不会触发移出父级事件（这才是正常逻辑撒）

        mousedown     ：鼠标按下事件
        mouseup       ：鼠标抬起事件
        mousemove     ：鼠标移动事件
        
        contextmenu   ：鼠标右键事件
        
        mousewheel     ：滚轮滚动事件chrome
        DOMMouseScroll ：滚轮滚动事件 火狐
        e.wheelDelta  滚轮滚动方向。正数向上，负数向下（Chrome）
        e.detail      滚轮滚动方向。正数向下，负数向上（火狐）


键盘相关事件：   
        keydown  键盘按下事件
        keyup    键盘抬起事件
   

其他常用事件：
        dbclick    双击事件
        focus      获得焦点事件 （想要输入时触发）
        blur       失去焦点事件
        change     状态改变事件  (单选框复选框选中状态改变)
        input      每次输入时触发事件
        submit     提交按钮点击时触发
        reset      重置按钮点击时触发

事件监听器与事件的区别

写事件缺点：项目中同一个按钮，两个人添加的点击事件不一样，那么会出现代码覆盖的情况
事件监听器：不会出现代码覆盖（其中事件不用加on关键字）

1. 添加事件监听：addEventListener(“事件类型”,function(){})
   事件监听的第三个参数：
   1、 false：默认值，不填写。 true：表示为捕获执行
   2、 {once:true} 此事件只能执行一次
   3、 {passive:true} 阻止清除浏览器默认行为
2. 取消事件监听：removeEventListener(“事件类型”，函数名) ------ 要取消事件监听器，只能用函数名不能用函数表达式。因为函数名是唯一的，函数表达式可以重复

<button class="box">点击</button>
var box = document.querySelector(".box");
box.addEventListener("click",function(){alert(1)})
box.addEventListener("click",function(){alert(2)})

var fn1 = function(){ alert(3); }
document.addEventListener("click",fn1);
//取消/删除事件监听必须用函数名
document.removeEventListener("click",fn1);

事件监听中事件执行顺序

1. 冒泡执行：事件监听默认执行顺序：由内向外
   点击里面的事件，会由内向外触发外层事件。点击外层事件，不会触发里面的事件
2. 捕获执行：事件监听第三个参数为true：由外向内
   点击里面的事件，会由外向内触发外层事件。点击外层事件，不会触发里面的事件
3. 阻止冒泡：即点击里面的事件不会触发外层事件
   方式一： e.cancelBubble = true;
   方式二： e.stopPropagation();

	<div style="width:300px;height:300px;background:red">
        <p style="width:200px;height:200px;background:yellow">
            <a href="#" style="border:1px solid blue;padding:10px">点击</a>
        </p>
    </div>
 		var div = document.querySelector("div");
        var p = document.querySelector("p");
        var a = document.querySelector("a");
        a.addEventListener("click",function(e){
            //e.stopPropagation(); //阻止冒泡
            console.log("a冒泡");
         })
          p.addEventListener("click",function(e){
            console.log("p冒泡");
         })
         div.addEventListener("click",function(e){
            console.log("div冒泡");
         })
结果：点a标签：打印顺序：a冒泡-p冒泡-div冒泡
	 点p标签：打印顺序：p冒泡-div冒泡
	 点div标签：打印顺序：div冒泡
如果哪层阻止冒泡，那么点此层，就不会触发外层的事件
捕获执行：打印顺序相反，因为是由外向内执行         

事件代理

• 点击元素，操作他的父元素（祖父、曾祖父也能操作）
• 事件代理不能阻止冒泡

 <ul id="list">
	 <li>
          <h2>小红说:</h2>
          <a href="javascript:;">删除</a>
	</li>
	<li><i>小白<i><li>
 </ul>
 list.addEventListener('click', function (e) {
	// 事件委托/事件代理
	if (e.target.tagName == 'A') {
		var li = e.target.parentNode; //点击元素的父节点，是li标签
	    // console.log(li);
		li.remove();  //然后父元素就被删除了
	}
})

e的使用

 1、获取鼠标位置： 
            e.clientX  e.clientY   相对于可视区左上角的位置（滚动条滚动，可视区还是那么大）
            e.pageX    e.pageY     相对于页面左上角的位置（滚动条滚动，离左上角更远）

2、阻止浏览器默认行为 ：
            e.preventDefault()      阻止浏览器默认行为
                                    浏览器默认行为： 浏览器自动添加的。比如a标签、右键菜单等

3、事件对象：
            e.target         获取点击元素对象（点谁是谁）
            e.currentTarget  获取事件源对象（事件是谁的就是谁的）

4、事件代理：通过判断点击元素对象的标签名 e.target.tagName  删除父节点（事件代理不能取消冒泡）

5、取消冒泡执行：
            方式一：  e.cancelBubble = true;
            方式二：  e.stopPropagation();

6、键盘：
            e.key          按下的键
            e.keyCode      按下的键码
            e.ctrlKey      功能键布尔值(判断是否按下的ctrl键，返回true/false) 
            e.altKey       功能键布尔值(判断是否按下的alt键，返回true/false)

组合键使用

 <p>这是一段不能复制的文字</p>
    <script>
        window.addEventListener("contextmenu", function (e) {  //右键
            e.preventDefault();  //阻止浏览器默认行为（右键、滚动条等）
        })
        window.addEventListener("keydown", function (e) {
            // e.key          按下的键
            // e.keyCode      按下的键码
            // e.ctrlKey      功能键布尔值(判断是否按下的ctrl键，返回true/false) 
            // e.altKey       功能键布尔值(判断是否按下的alt键，返回true/false)
            
            if (e.ctrlKey && e.keyCode == 67) {//如果按了ctrl+c
                console.log("复制了")
                e.preventDefault();     //阻止浏览器默认行为。即ctrl+c不能复制了
            }
        })
    </script>