JavaScript 学习第十一天 事件

1、事件对象

添加事件的语法：元素.事件=function(){}

事件处理函数：当事件发生的时候调用函数

事件对象event，全局对象，当事件发生的时候，浏览器会将和事件相关的所有信息（事件类型，鼠标位置，事件目标）存储在事件对象中

 document.onclick = function(ev){//
        console.log(window.event||ev); //低版本火狐存在兼容
        var ev = window.event || ev;
        console.log(ev);

        console.log(ev.type); //事件类型
        console.log(ev.target); //事件目标
        console.log(ev.clientX+"-------"+ev.clientY);//获取鼠标位置------相对于屏幕
        console.log(ev.pageX+"-------"+ev.pageY);//获取鼠标位置------相对于屏幕

        console.log(ev.ctrlKey); //true--按了
    }

火狐浏览器：当事件发生的时候，浏览器会将事件对象，通过事件处理函数的第一个参数传入

2、事件绑定

事件绑定

标签.事件添加的事件，如果添加多个后面的会覆盖前面的，但是合作开发必不可少，则需要使用事件绑定。

语法：

标准浏览器：标签.addEventListener(事件类型-不加on,事件处理函数,是否捕获) 默认是false

ie浏览器：标签.attachEvent(事件类型-加on,事件处理函数)

if (oBtn.addEventListener) {
  oBtn.addEventListener("click", fun1);
} else {
  oBtn.attachEvent("onclick", fun1);
}

事件绑定封装

function bind(elem,type,fun) {//elem,type,fun
            if (elem.addEventListener) {
                elem.addEventListener(type, fun);
            } else {
                elem.attachEvent("on"+type, fun);
            }
        }

事件取消

如果是通过标签.onclick 添加的事件，通过标签.οnclick=null取消

function unbind(elem,type,fun){
            if(elem.removeEventListener){
                elem.removeEventListener(type,fun);
            }else{
                elem.attachEvent("on"+type,fun);
            }
        }

3、DOM事件流

DOM事件流：

事件捕获机制：当事件发生的时候，先传递到window，依次往子元素传递，一直传递到事件目标

事件冒泡机制：先从目标元素开始处理事件，处理完以后依次传递给父元素，一直传到window

冒泡阶段开始处理事件，ie没有捕获

阻止事件冒泡

ev.stopPropagation?ev.stopPropagation():ev.cancelBubble = true;

阻止事件默认行为

标签.事件 : return false

事件绑定：ev.preventDefault?ev.preventDefault():ev.returnValue = false