JS笔记 事件

一.注册事件监听器

使用 元素.addEventListener(“事件如click”，function（）{ 事件内容 })

<button>按钮</button>

<script>
     var btn = document.querySelector("button");
     btn.addEventListener("click",function(){
         alert("sb");
     })
</script>

注：1. 可添加多个事件
2. 第二个参数是函数名，传入时不需要小括号

二.删除事件

1. 使用元素.onclick = null

<button>按钮</button>

    <script>
        var btn = document.querySelector("button");
        btn.onclick = function() {
            alert("sb");

            btn.onclick = null;
        }
    </script>

注：这个方法时只能用于当前老的添加事件方法

2. 使用removeEventListener（“事件”，监听函数），这个监听函数最好 不要用匿名函数的方法写（就是上面的）

<button>按钮</button>

    <script>
        var btn = document.querySelector("button");
        
        btn.addEventListener("click",tanchu);

        function tanchu() {
            alert("sb");
            btn.removeEventListener("click", tanchu);
        }

       
    </script>

三.事件执行过程

1. 使用新的注册监听事件函数时，第三个参数如果填true，就是捕获阶段，从父亲到孩子，也就是先执行父亲的监听函数，再执行孩子的监听函数
2. 如果使用false（默认），就是冒泡阶段，从孩子到父亲

四.target和this的区别

target指的时触发事件的对象
this指的时绑定时间的对象

比如我们给ul绑定事件，但是点击li触发事件
那么target指的时li，this指的是ul

五.阻止默认和冒泡

在函数function（）的参数表中传入e，在函数中使用e.preventDefault（）

冒泡同理，如果在孩子的事件函数中使用，则是在执行完孩子的操作函数后，后面的冒泡不再执行，也就是父亲的函数不再执行
但是点击父亲后，后面的函数任然会继续冒泡

六.事件委托

如果一个父元素有多个子元素，而且子元素们的监听事件相同
我们可以给父元素绑定这个事件，利用子元素冒泡到复原的原理实现一次绑定所有

<ul>
        <li>点我</li>
        <li>点我</li>
        <li>点我</li>
        <li>点我</li>
        <li>点我</li>
    </ul>

    <script>
        var ul = document.querySelector("ul");
        
        ul.addEventListener("click",tanchu);

        function tanchu(e) {
            e.target.style.backgroundColor = 'pink';
        }

       
    </script>

七.鼠标事件

注：鼠标离开尽量使用mouseleave

1. 不允许点击右键弹出菜单，使用‘contextmenu’
   
2. 阻止鼠标选中，使用‘selectstart’

---

3. mouseover和mouseenter的区别
   mouseover经过自己会触发事件，经过子盒子还会触发事件
   mouseenter只有经过自己会触发事件

---

实例

跟随鼠标

css

img {
    position: absolute;   // 相对于浏览器的位置
}

JS

<img src="images/p.png" alt="">

<script>
    var pic = document.querySelector("img");
    document.addEventListener("mousemove", function(e) {   // 给页面添加事件
        var x = e.pageX;
        var y = e.pageY;

		// 改变与浏览器的相对位置
        pic.style.left = x + 'px';
        pic.style.top = y + 'px';

        console.log(pic.style.left + " " + pic.style.top);

})
     
</script>

八.键盘事件

1. 普通事件
   
   

2. 判断按下哪个键盘
   使用e.keyode来确定按下的是哪个键
   
   注：up和down不区分大小写
   press区分大小写

九.其他事件

1. scroll，一滚动就触发的事件