【黑马程序员济南】前端与移动开发笔记事件特效：day04 - 黑马程序员技术交流社区

[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;

    };

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

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

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

removeEventListener可以移除指定事件

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

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

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

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

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

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