事件操作

微信图片_20220102152600.jpg
微信图片_20220102152832.jpg
微信图片_20220102153022.jpg

var div = document.querySelector('div');
var btn = ducument.querySelector('button');
//传统注册事件方法
btn.onclick = function () {
    console.log("点击了");
}
//事件类型是字符串，加引号，不带on
//同一个元素可以添加多个事件监听程序
div.addEventListener('click',function () {
    console.log('点击了');
});
div.addEventListener('mousemove',function () {
    console.log('鼠标移动了');
})

注册事件兼容性解决方案

//注册事件兼容性解决方案
function addEventListener(element,evenName,fn) {
    //判断当前浏览器是否支持addEventListener方法
    if (element.addEventListener) {
        element.addEventListener(evenName,fn)//第三个参数，默认是false
    }else if (element.attachEvent) {
        element.attachEvent('on'+evenName,fn);
    }else {
        element['on' + eventName] = fn;
    }

删除事件

div.removeEventListener('click',fn);

删除事件兼容性解决方案

div.removeEventListener('click',fn);
//注册事件兼容性解决方案
function removeEventListener(element,evenName,fn) {
    //判断当前浏览器是否支持removeEventListener方法
    if (element.removeEventListener) {
        element.removeEventListener(evenName,fn)//第三个参数，默认是false
    }else if (element.detachEvent) {
        element.detachEvent('on'+evenName,fn);
    }else {
        element['on' + eventName] = null;
    }
}

微信图片_20220102155913.jpg

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程既是DOM事件流。
注意：

• JS代码中只能执行捕获或者默哀跑中的一个阶段
• onclick 和 attachEvent只能得到冒泡阶段
• addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序，如果是false，（默认是false），表示在事件冒泡阶段调用时间处理程序。
• 实际开发中很少用事件捕获，更加关注事件冒泡
• 有些事件是没有冒泡的（onblur，onfuocus，onmouseenter，onmouseleave）

事件对象

微信图片_20220102161651.jpg 微信图片_20220102161746.jpg 微信图片_20220102162853.jpg

阻止按钮跳转

   var a = document.querySelector('a');
        //阻止默认行为，让链接不跳转
        a.addEventListener('click', function(e) {
                e.preventDefault();//DOM标准写法
            })
            //传统方式
        a.onclick = function(e) {
            //普通浏览器
            e.preventDefault();
            //低版本浏览器ie678
            e.returnvalue;
            //我们可以用return false 阻止默认行为，没有兼容性问题，特点，后面的代码不执行了
            return false;
        }

阻止冒泡

                e.stopPropagation();//停止传播，标准写法
                e.cancelBubble = true;//取消泡泡，非标准写法IE678
                //兼容性写法
                if (e && e.stopPropagation) {
                    e.stopPropagation();
                }else{
                    window.event.cancelBubble = true;
                }

this和target

 //e.target返回的是触发事件的对象（元素），this返回的是绑定事件的对象（元素）
var div = document.querySelector('div');
div.addEventListener('click',function (e) {
    console.log(e.target);
    console.log(this);
})

var ul = document.querySelector('ul');
ul.addEventListener('click',function (e) {
console.log(e.target);//点击的是li，e.target就指向li
console.log(this);   //绑定事件的是ul，所以this指向ul
})

事件委托

• 原理：把事件监听器放在父节点上，利用冒泡原理的影响设置每个子节点
• 案例：给ul注册点击事件，利用事件对象的target找到当前的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
• 作用：只操作了一次DOM，提高性能。

var ul = document.querySelector('ul');
       ul.addEventListener('click', function(e) {
           e.target.style.backgroundColor = 'red';

       })

微信图片_20220102212350.jpg

禁用右键菜单选中文字

//禁用右键菜单
        document.addEventListener('contextmeun', function(e) {
            e.preventDefault();
        })

        //禁止选中文字
        document.addEventListener('selecetstart', function(e) {
            e.preventDefault();
        })

微信图片_20220102212903.jpg 微信图片_20220102213202.jpg 微信图片_20220102213311.jpg

用户按下了s键，搜索框获得焦点

var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) {
                search.focus();
            }
        })

自动放大搜索框内容显示在搜索框上方

 var search = document.querySelector('input');
        var con = document.querySelector('con');
//在案件抬起时
        search.addEventListener('keyup', function() {
            if (this.value === '') {
                con.style.display = none;
            } else {
//没有内容就隐藏，有内容就赋值给上方大盒子并取消隐藏
                con.style.display = block;
                con.innerText = this.value;
            }
        })
//失去焦点隐藏
        search.addEventListener('blur',function (e) {
            con.style.display = none;
        })
        //获得焦点显示
        search.addEventListener('focus',function () {
            if (this.value !== '') {
                con.style.display = block;
            }
        })