js网页特效（四）事件

1.事件

（1）事件对象的兼容性写法

var event = event || window.event;

event对象常用属性

属性         作用
-----------------------------------------------------
data        返回拖拽对象的URL字符串（dragDrop）
width       该窗口或框架的高度
height      该窗口或框架的高度
pageX       光标相对于该网页的水平位置（ie无）
pageY       光标相对于该网页的垂直位置（ie无）
screenX     光标相对于该屏幕的水平位置
screenY     光标相对于该屏幕的垂直位置
target      该事件被传送到的对象
type        事件的类型
clientX     光标相对于该客户区的水平位置 
clientY     光标相对于该客户区的垂直位置

三个事件的重要坐标：

clientX clientY
当前窗口的左上角为基准点

pageX pageY
以当前文档的左上角为基准点

screenX screenY
当前屏幕的左上角为基准点

注意：
IE678不支持pageX和pageY 但是我们可以采取另一种方式
client和documentElement.scroll在IE678中都支持

var pageY = event.pageY || event.clientY +
            document.documentElement.scrollTop;
var pageX = event.pageX || event.clientX + 
            document.documentElement.scrollLeft;

示例代码：

document.onclick = function (event) {
        //var event = event || window.event;
    var event = eventUtil.getEvent(event);

        console.log("client: " + event.clientX + "--" + event.clientY);//浏览器
        //page有兼容问题 client没有 我们可以用client来计算page
  //var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        //var pageX = getPageX(event);
    var pageX = eventUtil.getPageX(event);

  //var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
    var pageY = getPageY(event);

    console.log("page: " + event.pageX + "--" + event.pageY);//页面

    console.log("screen: " + event.screenX + "--" + event.screenY);//屏幕
};

常用事件：

    onmouseover  鼠标经过
    onmouseout  鼠标离开
    onmousedown  鼠标按下
    onmouseup    鼠标弹起      
    onmousemove  鼠标移动

其他内容：

1.清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges()  
                    : document.selection.empty();  //三目运算
正常浏览器支持：window.getSelection() 
IE678以下支持：document.selection

2.判断文字选中

 window.getSelection ? window.getSelection().toString() 
                : document.selection.createRange().text;//三目运算符

（2）事件注册的两种方式

element.addEventListener(“事件类型”,”事件处理函数”,”是否使用捕获”)

特点：

addEventListener的好处是不会将其他事件覆盖，但是有兼容性问题

removeEventListener可以移除指定事件

addEventListener便于管理事件队列但一般用on的就可以了比较简单

（3）事件冒泡的三个阶段

1捕获阶段
2目标阶段   //执行当前对象的事件处理程序
3冒泡阶段

阻止事件冒泡：

//兼容性写法
function stopPropagation(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

事件兼容性总结（封装函数）：

function getEvent(event) {
//事件的兼容性
return event || window.event;
}

//page的兼容性
function getPageX(event) {
return event.pageX || event.clientX + document.documentElement.scrollLeft;
}
function getPageY(event) {
return event.pageY || event.clientY + document.documentElement.scrollTop;
}

//冒泡事件的兼容性问题
function stopPropagation(event) {
if (event.stopPropagation) {
    event.stopPropagation();
} else {
    event.cancelBubble = true;
}
}

//获取目标事件兼容性的问题
function getTarget(event) {
return event.target || event.srcElement;
}

//对兼容性封装的函数
var eventUtil = {
getEvent: function (event) {
    return event || window.event;
},
getPageX: function (event) {
    return event.pageX || event.clientX + document.documentElement.scrollLeft;
},
getPageY: function (event) {
    return event.pageY || event.clientY + document.documentElement.scrollTop;
},
stopPropagation: function (event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
},
getTarget: function (event) {
    return event.target || event.srcElement;
}
};

2.鼠标事件和键盘事件

常用鼠标事件：

mousedown、mouseup、mousemove、mouseover、mouseout、click、dblclick

onmousedown鼠标按下 onmouseup鼠标弹起

onmouseclick=onmousedown+onmouseup

常用键盘事件：

keydown、keypress、keyup onkeydown键盘按下 onkeyup键盘弹起

onkeypress=onkeydown+onkeyup

onkeydown onkeyup 输出的是键盘码 onkeypress输出的是ASCII码表

最后编辑于：2017.12.05 07:01:13