JavaScript事件

  • 2019-06-15
  • 154
  • 0
  • 0

一、默认事件

阻止默认事件,主流浏览器使用preventDefault(),IE8及其以下,设置returnValue属性,false取消默认事件,true不取消默认事件。

document.onselectstart = function(e) {
    e = e || window.event;
    //取消默认行为
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    console.log('文本选中')
};

document.oncontextmenu = function(e){
    e = e || window.event;
    //取消默认行为
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    console.log('右键菜单')
}

二、滚轮事件

  1. IE/Chrome使用onmousewheel,滚轮属性event.wheelDelta,向上为120,向下为-120。
  2. Firefox使用DOMMouseScroll,必须使用addEventListener()添加,滚轮属性event.detail向上为-3,向下为3。
//鼠标滚轮事件
function mousewheelEvent(ele,fn,boole){

    //判断是否为IE浏览器
    if(ele.addEventListener){
        //判断是否为火狐浏览器
        if(ele.onmousewheel === undefined){//火狐
            ele.addEventListener('DOMMouseScroll',fn,boole);
        }else{//谷歌
            ele.addEventListener('mousewheel',fn,boole);
        }
    }else if(ele.attachEvent){//ie浏览器
        ele.attachEvent('onmousewheel',function(){
            fn.call(ele);
        });
    }
}

mousewheelEvent(document,function(){
    console.log(this);
});

三、表单事件

  1. 获取焦点事件,onfocus获取焦点事件 <input><textarea> 以及 <select> <a/> 元素。
obj.focus() //给指定的元素设置焦点,主动触发。
  1. 失去焦点事件,onblur失去焦点事件<input><textarea> 以及 <select> <a/> 元素。
obj.blur() //取消指定元素的焦点,主动触发。
  1. onchange内容改变触发 <input><textarea> 以及 <select> 元素。
  2. onsubmit 提交事件,submit() 提交表单 。
  3. onreset重置事件,reset()重置表单。
var oForm = document.querySelector('.user-reg'),
    oUserName = oForm.querySelector('input[name=username]'),//使用css选择器的方式获取
    oPassword = oForm.querySelector('input[name=psw]'),
    oNum = oForm.querySelector('input[name=num]'),
    oDes = oForm.querySelector('textarea'),
    oLike = oForm.querySelector('select'),
    oBtnBox = oForm.querySelector('.form-btn'),
    oBtns = oBtnBox.querySelectorAll('button');

//监听一个获取焦点事件
oUserName.addEventListener('focus',function(){
    console.log('获取焦点');
    //this.value 就是input控件输入的值
    if(this.value.length >= 10){
        //主动失去焦点
    }
});
oUserName.focus();//主动触发

//失去焦点事件
oUserName.addEventListener('blur',function(){
    console.log('失去焦点');
});

//监听年龄的改变事件
oNum.addEventListener('change',function(){
    //年龄必须是数字
    if(parseInt(this.value)){
        this.value = parseInt(this.value);
    }else {
        this.value = 0;
        alert("请输入整型");
    }
    //this.value = parseInt(this.value) || 0;
    console.log('改变事件');
});

//提交事件
oForm.addEventListener('submit',function(e){
    //取消默认行为
    e.preventDefault();
    console.log('提交了');
});

//重置事件
oForm.addEventListener('reset',function(e){
    //取消默认行为
    e.preventDefault();
    console.log('重置表单')
});

四、键盘事件

  1. 不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能够接收键盘事件,document能够响应。
  2. keydown:用户在键盘上按下某按键时发生,一直按着某按键则会不断触发(opera浏览器除外)。
  3. keypress:用户按下一个按键,并产生一个字符时发生(也就是不管类似shift、alt、ctrl之类的键,就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发)。一直按着某按键则会不断触发。
  4. keyup:用户释放某一个按键时触发。
  5. event.keyCode : 数字类型,键盘按键的值,键值。
  6. ctrlKey,shiftKey,altKey 布尔值,当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false。
//键盘按下
oDes.addEventListener('keydown',function(){
    console.log('键盘按下');
    console.log(e.keyCode);
});

//键盘输入
oDes.addEventListener('keypress',function(){
    console.log('键盘输入')
});

//键盘释放
document.addEventListener('keyup',function(e){
    console.log('文档键盘松开');
});

五、事件委托

  1. e.target 主流浏览器下,触发事件最底的标签节点,返回的即使一个标签节点。
  2. e.srcElementIE浏览器下。
var index = null;
var oBox = document.querySelector('.box');

oBox.onclick = function(e) {
    e = e || window.event;

    //不存在就证明是ie
    if(e.target === undefined){
        e.target = e.srcElement;
    }

    //是li标签节点就添加class类名
    if(e.target.nodeName == 'LI'){
        if(index != null){
            index.className = '';
        }
        e.target.className="on";
        index = e.target;               
    }else{
        console.log('不是li标签');
    }
}

评论

还没有任何评论,你来说两句吧