事件操作

2022-01-03  本文已影响0人  键盘已附魔
微信图片_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事件流。
注意:

事件对象

微信图片_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
})

事件委托

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;
            }
        })
上一篇 下一篇

猜你喜欢

热点阅读