转换学开发，代码100天——2018-05-06

今天学习JavaScript的绑定事件。因为浏览器的原因绑定事件需要考虑兼容性问题。

attachEvent     IE浏览器 ，ie9以上事件执行顺序与绑定顺序相同；ie9以下事件执行顺序与绑定顺序相反

btn.attachEvent("onclick",function(){
   alert("a");
});
detachEvent

btn.detachEvernt("onclick",function(){
   alert("a");
});
addEventListener FF及chrome浏览器

btn.addEventListener("click",function(){
     alert("a");
});
removeEventListener

btn.renoveEventListener("onclick",function(){
   alert("a");
});

如对一个按钮添加多个事件：

<script type="text/javascript">

        window.onload = function(){

            var btn = document.getElementById("btn");

            addMyEvent(btn,"click",function()

            {

                alert("a");

            });

            addMyEvent(btn,"click",function()

            {

                alert("b");

            });

        }

        function addMyEvent(obj,ev,fn){

            if (obj.attachEvent) {

                obj.attachEvent("on"+ev,fn);

            }

            else{

                obj.addEventListener(ev,fn);

            }

        }

    </script>

补充：将上一篇文章中的拖拽事件改成线框拖拽效果

按下鼠标，拖动物体时：

松开鼠标后：

<!DOCTYPE html>

<html>

<head>

    <title>javascript 拖拽</title>

    <style type="text/css">

    #div1{

        width: 100px;

        height: 100px;

        background: red;

        position: absolute;

    }

    .Box{

        border: 1px dashed black;

        position: absolute;

    }

</style>

<script type="text/javascript">

    window.onload = function(){

        var oDiv = document.getElementById("div1");

        var disX =0;

        var disY =0;

        oDiv.onmousedown = function(ev){

            //创建虚线框

            var oBox = document.createElement("div");

            oBox.className = "Box";

            oBox.style.width = oDiv.offsetWidth+"px";

            oBox.style.height = oDiv.offsetHeight+"px";

            oBox.style.left = oDiv.offsetLeft+"px";

            oBox.style.top = oDiv.offsetTop+"px";

            document.body.appendChild(oBox);

            var oEvent = ev||event;

            disX = oEvent.clientX-oDiv.offsetLeft;

            disY = oEvent.clientY-oDiv.offsetTop;

            if (oDiv.setCapture) {

            //鼠标移动事件

            oDiv.onmousemove = mouseMove;

            oDiv.onmouseup = mouseUp;

            oDiv.setCapture();//ie专用

            return false;

        }else{

               //鼠标移动

               document.onmousemove =mouseMove;

               document.onmouseup = mouseUp;

                return false;

               }

              //鼠标按下事件

              function mouseMove(ev){

                   var oEvent  = ev||event;

                   var l = oEvent.clientX-disX;

                   var t = oEvent.clientY-disY;

                   oBox.style.left = l+"px";

                   oBox.style.top = t+"px";

               };

            //鼠标抬起事件

            function mouseUp()

            {

                this.onmousemove = null;

                this.onmouseup = null;

                if (this.setCapture)

                {

                    this.releaseCapture();//ie专用

                }

                oDiv.style.left = oBox.offsetLeft+"px";

                oDiv.style.top = oBox.offsetTop+"px";

                document.body.removeChild(oBox);

            };

            };

         }

        </script>

    </head>

    <body>

        <div id="div1"></div>

    </body>

    </html>

day51—JavaScript绑定事件的更多相关文章

  1. JavaScript绑定事件的方法[3种]

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HT ...

  2. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  3. javascript绑定事件

    本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type ...

  4. javascript绑定事件addEventListener与attachEvent

    1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ o ...

  5. JavaScript 绑定事件时传递数据

    var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...

  6. javaScript绑定事件委托 demo

    事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...

  7. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  8. JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数

    下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...

  9. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

随机推荐

  1. vue项目1-pizza点餐系统7-路由之控制滚动行为

    一.在home组件中设置具体信息,设计样式 <template> <div class="row"> <div id="home" ...

  2. HTML面试问题收集（1）

    1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScr ...

  3. CentOS7 安装 Mysql5.6.40

    CentOS7.5二进制安装MySQL-5.6.40 安装之后登陆不上,mysql.user 表是空的时: Mysql User表为空 mysql创建用户报错ERROR 1364 (HY000): F ...

  4. MongoDB与python 交互

    一.安装pymongo 注意 :当同时安装了python2和python3,为区分两者的pip,分别取名为pip2和pip3. 推荐:https://www.cnblogs.com/thunderLL ...

  5. CSS初识

    CSS:层叠样式表,控制网页数据样式显示,使得数据的表现和内容分离 CSS的引入方式 使用元素内嵌样式表:例<a style=”font-size:40px”></a>表示在a ...

  6. PAT Advanced 1007 Maximum Subsequence Sum (25 分)

    Given a sequence of K integers { N​1​​, N​2​​, ..., N​K​​ }. A continuous subsequence is defined to ...

  7. Qt带参数的信号和槽

    在Qt的开发过程中,信号带参数是很常见的,在使用带参数的信号槽时,有以下几点需要注意. 当信号和槽函数的参数数量相同时,它们的参数类型要完全一致. 信号和槽函数的声明: signals: void i ...

  8. redis 五大类型 、持久化方式以及主从(哨兵模式)

    一.redis 五大类型: redis 键 keys * exists key的名字,判断某个key 是否存在 move key db 当前数据库就没有了,被移除了 ttl key 查看还有多少秒过期 ...

  9. this 指向图

  10. CH0805 防线 (二分值域，前缀和，特殊性质)

    $ CH~0805~ $ 防线 (二分值域,前缀和,特殊性质) $ solution: $ 注意博主所给题面的输出和原题有些不同 这道题当时想了很久很久,就是想不到怎么写.果然还是太 $ vegeta ...