注册事件 事件对象 浏览器的默认行为 阻止默认行为的方法

一、注册事件

1.传统方式 onclick

2.事件监听

• 标准浏览器

• 元素.addEventListener(‘事件类型’，事件处理函数)
• 元素.removeEventListener(‘事件类型’，事件处理函数)

• ie低版本

• 元素.attachEvent(‘on事件类型’，事件处理函数)
• 元素.detachEvent(‘on事件类型’，事件处理函数)

二、事件对象

• 在事件处理函数的里面有一个系统帮我设定的形参，这个形参就是事件对象,我们不需要传递实参进去，在绑定的事件发生的时候，浏览器会自动传递实参进去
• 当事件发生后，跟事件相关的一系列信息数据都集合在事件对象，事件对象有很多的属性和方法，就像一个接线员一样记录我们事件发生的详细信息
• 事件对象形参大部分以e，event，evn
• 在火狐浏览器中事件对象只能使用e
• ie低版本 兼容性问题 window.event

三、事件对象常用的属性和方法

• target 返回触发事件的元素对象，点击了哪个元素就返回哪个元素 目标元素
• 触发事件的元素和绑定事件的元素不一定是一个
• 事件对象里的target属性有兼容性
• 标准浏览器 事件对象.target
• ie低版本 事件对象.srcElement
• target的兼容性写法

var target = e.target || e.srcElement;

• currentTarget 指的是事件源 事件绑定在谁身上就返回谁 用兼容性问题，ie6，7，8 不认识
• 一般在事件处理函数中使用this表示事件源
• type事件类型
• 事件对象.type 属性 返回事件类型

四、浏览器的默认行为

• a连接点击后的自动跳转，就是a链接的默认行为
• 表单提交按钮点击后自动提交，就是提交按钮的默认行为
• 页面中能够框选文字，自带的框选的效果，背景颜色
• 单击鼠标右键，自动弹出菜单

五、阻止默认行为的方法

• 事件对象.preventDefault() prevent 阻止 default 默认

• 要阻止什么事件类型的默认行为，就将 事件对象.preventDefault() 写在对应的事件类型中
• 要阻止浏览器的默认行为，要在同类型的事件里阻止
• 事件监听注册的事件只能使用 事件对象.preventDefault()

1.传统的注册事件的方式阻止默认行为

• 阻止默认行为，方式1 标准浏览器

• e.preventDefault();

• 阻止默认行为，方式2 ie低版本

• e.returnValue=false;

• 阻止默认行为，方式3 没有兼容性问题

• return false;

• return 后的语句就不执行了，只局限于传统注册事件的方式

阻止默认行为的兼容性写法

    if(e.preventDefault){
        //标准浏览器
        e.preventDefault()

    }else{
        //ie低版本
        e.returnValue=false;
    }

2.事件监听方式注册的事件阻止默认行为

a.addEventListener('click',function(e){
    e=e||window.event
    //事件监听方式注册的事件，阻止默认行为只用这一种方式
    e.preventDefault();
})

3.阻止框选文字的默认行为

• 元素.onselectstart

        div.onselectstart = function (e) {
            e = e || window.event;
            console.log('框选中文字了')
            alert('请登录后再复制')
            //---阻止框选文字的默认行为
            e.preventDefault();
        }

4.阻止鼠标右键出现菜单

• 元素.oncontextmenu

        window.oncontextmenu = function (e) {
            e = e || window.event;
            console.log('鼠标右键菜单');
            e.preventDefault();
        }