【黑马程序员济南】 前端与移动开发就业班笔记事件特效：Day04

可拖拽特效

常用事件：

onmouseover 鼠标经过

onmouseout 鼠标离开

onmousedown 鼠标按下

onmouseup   鼠标弹起      

onmousemove 鼠标移动

在拖动区域按下鼠标后，在文档中移动鼠标，盒子跟着鼠标坐标走。

鼠标在文档中弹起后，将事件清空。

盒子的位置要进行调整，当鼠标按下时，记录鼠标在盒子中的位置，鼠标移动计算盒子位置的时候减去。

应用到案例中：

[JavaScript] 纯文本查看 复制代码

        /**
        *@author 传智播客
        */
    //找人
    var d_box = document.getElementById("d_box");//盒子
    var drop = document.getElementById("drop");//拖动条
    //需求：鼠标在拖动条上按下 可以拖拽 鼠标移动的时候 让d_box跟着鼠标移动
    drop.onmousedown = function (event) {
        var event = event || window.event;
        //获取鼠标在页面中的位置
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //获取鼠标在按下的那一瞬间在盒子中的位置
        var boxX = pageX - d_box.offsetLeft;
        var boxY = pageY - d_box.offsetTop;
        //鼠标在页面上移动 让d_box跟着鼠标移动
        document.onmousemove = function (event) {
            var event = event || window.event;
            //获取鼠标在页面上的位置
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
            //让d_box跟着鼠标移动
            d_box.style.left = pageX - boxX + "px";
            d_box.style.top = pageY - boxY + "px";
            //清除选中文字
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
    };

    //鼠标弹起 盒子就不应该跟着了
    document.onmouseup = function () {
        document.onmousemove = null;
    };

清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges(): document.selection.empty();

正常浏览器支持：window.getSelection()

IE678以下支持：document.selection 　

注册事件的两种方式

[JavaScript] 纯文本查看 复制代码

element.addEventListener(“事件类型”,”事件处理函数”,”是否使用捕获”)
addEventListener的好处是不会将其他事件覆盖，但是有兼容性问题
removeEventListener可以移除指定事件
addEventListener便于管理事件队列 但一般用on的就可以了比较简单

事件的三个阶段

事件冒泡：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

1捕获阶段   事件从最上一级标签开始往下查找，直到捕获到事件目标(target)

2目标阶段   执行当前对象的事件处理程序

3冒泡阶段   事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签

冒泡顺序的顺序

IE6.0:

div-> body -> html -> document

其他浏览器:

div-> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

阻止事件冒泡

w3c的方法是event.stopPropagation()

IE则是使用event.cancelBubble= true

事件目标

判断当前对象

[Java] 纯文本查看 复制代码

/**
 *@author 传智播客
 */
火狐谷歌等   event.target
IE678           event.srcElement
var targetId =  event.target ?  event.target.id : event.srcElement.id; 

注册事件的两种方式

onclick

几乎所有的浏览器都支持但是在同一个对象身上的事件 会相互覆盖。

Add Event Listener

现代浏览器支持，IE9+

可以给同一个对象的同一个事件注册多个事件处理函数（监听者），通过 添加事件监听器 的方式注册事件 不会相互抵消 但是有兼容问题

鼠标事件和键盘事件

常用鼠标事件：

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

onmousedown鼠标按下 onmouseup鼠标弹起onmouseclick=onmousedown+onmouseup

常用键盘事件：

keydown、keypress、keyup

onkeydown键盘按下 onkeyup键盘弹起onkeypress=onkeydown+onkeyup

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

常用表单事件：

onfocus 获取焦点，onblur 失去焦点，oninput 在输入的时候执行，onchange 失去焦点后如果表单元素的内容发生了改变

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830

【黑马程序员济南】 前端与移动开发就业班笔记事件特效：Day04

可拖拽特效

常用事件：

onmouseover 鼠标经过

onmouseout 鼠标离开

onmousedown 鼠标按下

onmouseup   鼠标弹起      

onmousemove 鼠标移动

在拖动区域按下鼠标后，在文档中移动鼠标，盒子跟着鼠标坐标走。

鼠标在文档中弹起后，将事件清空。

盒子的位置要进行调整，当鼠标按下时，记录鼠标在盒子中的位置，鼠标移动计算盒子位置的时候减去。

应用到案例中：

[JavaScript] 纯文本查看 复制代码

        /**
        *@author 传智播客
        */
    //找人
    var d_box = document.getElementById("d_box");//盒子
    var drop = document.getElementById("drop");//拖动条
    //需求：鼠标在拖动条上按下 可以拖拽 鼠标移动的时候 让d_box跟着鼠标移动
    drop.onmousedown = function (event) {
        var event = event || window.event;
        //获取鼠标在页面中的位置
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //获取鼠标在按下的那一瞬间在盒子中的位置
        var boxX = pageX - d_box.offsetLeft;
        var boxY = pageY - d_box.offsetTop;
        //鼠标在页面上移动 让d_box跟着鼠标移动
        document.onmousemove = function (event) {
            var event = event || window.event;
            //获取鼠标在页面上的位置
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
            //让d_box跟着鼠标移动
            d_box.style.left = pageX - boxX + "px";
            d_box.style.top = pageY - boxY + "px";
            //清除选中文字
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
    };

    //鼠标弹起 盒子就不应该跟着了
    document.onmouseup = function () {
        document.onmousemove = null;
    };

清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges(): document.selection.empty();

正常浏览器支持：window.getSelection()

IE678以下支持：document.selection 　

注册事件的两种方式

[JavaScript] 纯文本查看 复制代码

element.addEventListener(“事件类型”,”事件处理函数”,”是否使用捕获”)
addEventListener的好处是不会将其他事件覆盖，但是有兼容性问题
removeEventListener可以移除指定事件
addEventListener便于管理事件队列 但一般用on的就可以了比较简单

事件的三个阶段

事件冒泡：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

1捕获阶段   事件从最上一级标签开始往下查找，直到捕获到事件目标(target)

2目标阶段   执行当前对象的事件处理程序

3冒泡阶段   事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签

冒泡顺序的顺序

IE6.0:

div-> body -> html -> document

其他浏览器:

div-> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

阻止事件冒泡

w3c的方法是event.stopPropagation()

IE则是使用event.cancelBubble= true

事件目标

判断当前对象

[Java] 纯文本查看 复制代码

/**
 *@author 传智播客
 */
火狐谷歌等   event.target
IE678           event.srcElement
var targetId =  event.target ?  event.target.id : event.srcElement.id; 

注册事件的两种方式

onclick

几乎所有的浏览器都支持但是在同一个对象身上的事件 会相互覆盖。

Add Event Listener

现代浏览器支持，IE9+

可以给同一个对象的同一个事件注册多个事件处理函数（监听者），通过 添加事件监听器 的方式注册事件 不会相互抵消 但是有兼容问题

鼠标事件和键盘事件

常用鼠标事件：

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

onmousedown鼠标按下 onmouseup鼠标弹起onmouseclick=onmousedown+onmouseup

常用键盘事件：

keydown、keypress、keyup

onkeydown键盘按下 onkeyup键盘弹起onkeypress=onkeydown+onkeyup

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

常用表单事件：

onfocus 获取焦点，onblur 失去焦点，oninput 在输入的时候执行，onchange 失去焦点后如果表单元素的内容发生了改变

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830