事件绑定高级应用

事件绑定

IE方式

attachEvent(事件名称，函数)，绑定事件处理函数

datachEvent（事件名称，函数），解除绑定

DOM方式

addEventListener（事件名称，函数，捕获）

removeEventListener(事件名称，函数，捕获)

何时使用时间绑定

绑定事件和this

绑定匿名函数，会无法删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById(‘btn1‘);

    /*oBtn.onclick=function ()
    {
        alert(this);
    };*/

    //IE    事件绑定        this->window
    /*oBtn.attachEvent(‘onclick‘, function (){
        alert(this==window);
    });*/

    //FF
    oBtn.addEventListener(‘click‘, function (){
        alert(this);
    }, false);
};
</script>
</head>

<body>
<input id="btn1" type="button" value="aaa" />
</body>
</html>

绑定IEthis问题

高级拖拽

复习拖拽原理

距离不变

三个事件， down move up

封装成函数

限制范围

对位置进行判断

例1 不能拖出窗口的Div

例2 不能拖出指定对象的div

磁性吸附

高级拖拽（2）

图片拖拽

阻止默认事件

文字选中

阻止默认事件

ie下拖动问题

事件捕获

碰撞检测

碰撞检测原理-----九宫格

拖拽中的碰撞检测

高级拖拽（3）

与DOM的配合

带框的拖拽

保留原有的位置拖拽

弹出层

拖拽改变Div的大小

自定义滚动条

拖拽

只有横向的拖拽

限制范围------范围的大小

计算比例---当前值/最大值

控制其他对象，

控制物体的大小

控制物体的透明度

控制文字的滚动

鼠标滚轮

鼠标滚轮事件

事件

mousewheel

DOMMousescroll

》DOM事件 只能绑定，阻止默认事件--preventDefault

属性

IE下  wheelDelta

DOM下  detail

应用到自定义滚动条---给谁加事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下滑动的索引值</title>
<style>
#div1 {width:200px; height:200px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下滑动的索引值</title>
<script>
//处理函数监听兼容事件
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent(‘on‘+sEvent, fn);
        }
    else
    {
        obj.addEventListener(sEvent, fn, false);
        }
}
window.onload=function()
{
    var oDiv=document.getElementById(‘div1‘);
        myAddEvent(oDiv, ‘mouseWheel‘, onMouseWheel);
        myAddEvent(oDiv, ‘DOMMouseScroll‘, onMouseWheel);

function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        //iE    下付，上正
        //wheelDalta

        //ff
        //detail 下正， 上负

        var bDown=true;
        alert(bDown);

        if(oEvent.wheelDelta)
        {
            if(oEvent.wheelDelta<0)
            {
                bDown=true;
                }
            else{
                bDown=false;
                }
            }
         else
         {
             if(oEvent.detail>0)
             {
                 bDown=true;
                 }
             else
             {
                 bDown=false;
                 }
             }
             alert(bDown);
        }
        myAddEvent(oDiv, ‘mouseWheel‘, onMouseWheel);
        myAddEvent(oDiv, ‘DOMMouseScroll‘, onMouseWheel);
    }
</script>
</head>

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

滚动索引设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red;}
</style>
<script>
//捕获函数处理兼容
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {

        obj,attachEvent(‘on‘+sEvent, fn);
        }
    else
    {

        obj.addEventListener(sEvent, fn, false);
        }
}
window.onload=function()
{
    var oDiv=document.getElementById(‘div1‘);
    function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        var bDown=true;
        //上下索引值兼容
        bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
        //处理索引值
        if(bDown)
        {
            oDiv.style.height=oDiv.offsetHeight+10+‘px‘;
            }
        else{
            oDiv.style.height=oDiv.offsetHeight-10+‘px‘;
            }
        //阻止默认事件兼容
        if(oEvent.preventDefault)
        {
            oEvent.preventDefault();
            }
        return false;
        }
    myAddEvent(oDiv, ‘mousewheel‘, onMouseWheel);
    myAddEvent(oDiv, ‘DOMMouseScroll‘, onMouseWheel);
    }

</script>
</head>

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

滚动事件处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条2</title>
<style>
#parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {width:300px; height:300px; filter:alpha(opacity:0); opacity:0; background:yellow; }
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById(‘div1‘);
    var oParent=document.getElementById(‘parent‘);
    var oDiv2=document.getElementById(‘div2‘);
    oDiv.onmousedown=function(ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;

        document.onmousemove=function(ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            if(l<0)
            {
                l=0
                }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWdith;
                }
                oDiv.style.left=l+‘px‘;
            //算速度
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            oDiv2.style.filter=‘alpha(opacity:‘+100*scale+‘)‘;
            oDiv2.style.opacity=scale;
            document.title=scale;
            };
        document.onmouseup=function()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
        }
        };

</script>
</head>

<body><div id="parent">
    <div id="div1">
</div>
</div>
    <div id="div2">
    </div>
</body>
</html>

滚动改变亮度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {width:0px; height:0px; background:yellow;}
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById(‘div1‘);
    var oParent=document.getElementById(‘parent‘);
    var oDiv2=document.getElementById(‘div2‘);
    oDiv.onmousemove=function(ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        document.onmousemove=function(ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            if(l<0)
            {
                l=0
                }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWdith;
                }
                oDiv.style.left=l+‘px‘;
            //算速度
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            oDiv2.style.width=scale*300+‘px‘;
            oDiv2.style.height=scale*300+‘px‘;
            document.title=scale;
            }
                    document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
        }
    }
</script>
<title>滚动条</title>
</head>

<body><div id="parent">
    <div id="div1">
</div>
</div>
    <div id="div2">
    </div>
</body>
</html>

滚动改变大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {width:200px; height:300px; border:1px solid black; position:relative; overflow:hidden;}
#div3 {position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent(‘on‘+sEvent, fn);
    }
    else
    {
        obj.addEventListener(sEvent, fn, false);
    }
}

window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oParent=document.getElementById(‘parent‘);
    var oDiv2=document.getElementById(‘div2‘);
    var oDiv3=document.getElementById(‘div3‘);

    function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        var bDown=true;

        bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;

        if(bDown)
        {
            setLeft(oDiv.offsetLeft+10);
        }
        else
        {
            setLeft(oDiv.offsetLeft-10);
        }

        if(oEvent.preventDefault)
        {
            oEvent.preventDefault();
        }

        return false;
    }

    myAddEvent(oParent, ‘mousewheel‘, onMouseWheel);
    myAddEvent(oParent, ‘DOMMouseScroll‘, onMouseWheel);
    myAddEvent(oDiv2, ‘mousewheel‘, onMouseWheel);
    myAddEvent(oDiv2, ‘DOMMouseScroll‘, onMouseWheel);

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;

            setLeft(l);
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };

    function setLeft(l)
    {
        if(l<0)
        {
            l=0;
        }
        else if(l>oParent.offsetWidth-oDiv.offsetWidth)
        {
            l=oParent.offsetWidth-oDiv.offsetWidth;
        }

        oDiv.style.left=l+‘px‘;
        var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);

        oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+‘px‘;

        document.title=scale;
    }
};
</script>
</head>

<body>
<div id="parent">
    <div id="div1">
    </div>
</div>
<div id="div2">
    <div id="div3">
         所有可能让你变得更好的努力，在一开始就被你扼杀了。如果你一直没有尝试迈出第一步，怎么可能掌握栽培绿植的方法，怎么可能享受到跑步之后大汗淋漓的酣畅……难道害怕自己没有经验，害怕中途突然出现的变故，害怕事到最后依然不尽如人意的结局，或者仅仅是怕输、怕被嘲笑，就不敢尝试了吗？
  我们每个人都有自己的梦想，都有想要达成的目标，都有希望成为的样子，但在这个过程中，总会出现各种干扰。与其畏缩不前，何不趁青春年少，大胆一试？许多事情，不是因为做不到才让人失去了信心，而是因为失去了信心，才变得难以做到
  想起之前看到杨澜在书中写到她对迈克尔·乔丹的采访，这位被誉为“飞人”的伟大运动员说：“我起码有9000次投球不中，我输过不下300场比赛，有26次人们期待我投入制胜一球而我却失误了。我的一生中失败一个接着一个，这就是为什么我能够成功。我从未害怕过失败，我可以接受失败，但我不能接受没有尝试。”乔丹说，面对所有的伤痛和困境，他的法宝就是父母从小教育他的那句话：“谁都会遇到倒霉事，你的任务是想办法把坏事变成好事。
  人这一生总有很多的残缺，我不是为了追求完美而活着，我是为了弥补残缺而更好的活着。为了自己，为了父亲，也为了很多很多的关心我的人。

　　人这一生总会遇到很多的不如意，我不是为了逃避而活着，我是为了好好地面对而更好的活着。

　　人这一生总是会让命运作弄，一次又一次，周而复始，我不是为了认命而活着，我是为了坚持，为了信仰，为了梦想而更好的活着。

　　即便曾经一度垂死挣扎，而今，乌云散去，风雨平息，一切又是新的开始，即便生活再艰难，人生再无奈。为了自己，为了父亲，为了很多很多关心我的人。为了信仰，为了希望，为了梦想。我想好好的活着。
    </div>
</div>
</body>
</html>

鼠标配合滚动文本

本节重点

拖拽---封装

拖拽----限制范围

拖拽----磁性吸附

拖拽---图片

拖拽---DOM

碰撞检测

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;

            if(l<50)
            {
                l=0;
            }
            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth-50)
            {
                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            }

            if(t<50)
            {
                t=0;
            }
            else if(t>document.documentElement.clientHeight-oDiv.offsetHeight-50)
            {
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }

            oDiv.style.left=l+‘px‘;
            oDiv.style.top=t+‘px‘;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
};
</script>
</head>

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

拖拽磁性吸附

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.box {position:absolute; border:1px dashed black;}
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        var oNewDiv=document.createElement(‘div‘);

        oNewDiv.className=‘box‘;
        oNewDiv.style.width=oDiv.offsetWidth+‘px‘;
        oNewDiv.style.height=oDiv.offsetHeight+‘px‘;

        document.body.appendChild(oNewDiv);

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;

            oNewDiv.style.left=oEvent.clientX-disX+‘px‘;
            oNewDiv.style.top=oEvent.clientY-disY+‘px‘;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;

            oDiv.style.left=oNewDiv.style.left;
            oDiv.style.top=oNewDiv.style.top;

            document.body.removeChild(oNewDiv);
        };
    };
};
</script>
</head>

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

带框拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.box {position:absolute; border:1px dashed black;}
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        var oNewDiv=document.createElement(‘div‘);

        oNewDiv.className=‘box‘;
        oNewDiv.style.width=oDiv.offsetWidth-2+‘px‘;
        oNewDiv.style.height=oDiv.offsetHeight-2+‘px‘;
        oNewDiv.style.left=oDiv.offsetLeft+‘px‘;
        oNewDiv.style.top=oDiv.offsetTop+‘px‘;

        document.body.appendChild(oNewDiv);

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;

            oNewDiv.style.left=oEvent.clientX-disX+‘px‘;
            oNewDiv.style.top=oEvent.clientY-disY+‘px‘;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;

            oDiv.style.left=oNewDiv.style.left;
            oDiv.style.top=oNewDiv.style.top;

            document.body.removeChild(oNewDiv);
        };
    };
};
</script>
</head>

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

带框拖拽2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
#div3 {width:100px; height:100px; background:green; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    drag(‘div1‘);
    drag(‘div2‘);
    drag(‘div3‘);
};

function drag(id)
{
    var oDiv=document.getElementById(id);

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;

            oDiv.style.left=oEvent.clientX-disX+‘px‘;
            oDiv.style.top=oEvent.clientY-disY+‘px‘;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
}
</script>
</head>

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

<div id="div2">
</div>

<div id="div3">
</div>
</body>
</html>

拖拽封装

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:11px; height:11px; background:url(drag_ico.gif); position:absolute; bottom:0; right:0; cursor:nw-resize;}
#div2 {width:200px; height:150px; background:#CCC; position:relative;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var oDiv2=document.getElementById(‘div2‘);

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;

            oDiv2.style.width=oEvent.clientX-disX+oDiv.offsetWidth+‘px‘;
            oDiv2.style.height=oEvent.clientY-disY+oDiv.offsetHeight+‘px‘;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
};
</script>
</head>

<body>
<div id="div2">
    <div id="div1">
    </div>
</div>
</body>
</html>

拖拽改变大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        if(oDiv.setCapture)
        {
            oDiv.onmousemove=fnMove;
            oDiv.onmouseup=fnUp;

            oDiv.setCapture();
        }
        else
        {
            document.onmousemove=fnMove;
            document.onmouseup=fnUp;
        }

        function fnMove(ev)
        {
            var oEvent=ev||event;

            oDiv.style.left=oEvent.clientX-disX+‘px‘;
            oDiv.style.top=oEvent.clientY-disY+‘px‘;
        }

        function fnUp()
        {
            this.onmousemove=null;
            this.onmouseup=null;

            if(this.releaseCapture)
            {
                this.releaseCapture();
            }
        }

        return false;
    };
};
</script>
</head>

<body>
asdfas
<div id="div1">
asdfs
</div>
zcvx
</body>
</html>

拖拽问题解决

时间： 2024-07-28 21:24:04

事件绑定高级应用的相关文章

jQuery事件篇---高级事件

内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一．模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. //点击按钮事件 $('input').click(function () { alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('inp

jQuery-3.事件篇---事件绑定与解绑

on()的多事件绑定 之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理.翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个"on"方法来实现的.jQuery on()方法是官方推荐的绑定事件的一个方法. 基本用法:.on( events ,[ selector ] ,[ data ] ) 最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同 $("#elem").click(funct

jquery 选择器、筛选器、事件绑定与事件委派

一.jQuery简介 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments.events.实现动画效果,并且方便地为网站提供AJAX交互. jQuery的引入 <script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块) <script type="text/javascript"> //写自己的js或者jquery代码 </script>

事件流程以及dom2级事件绑定

事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直到顶层元素(注:高级浏览器的顶层元素是window,ie8以下的浏览器顶层元素是document)  DOM2级事件绑定方式   高级浏览器绑定方式: 元素.addEventListener(type, handler, boolean);             //绑定 type 事件类型字符串

vuejs学习笔记（1）--属性，事件绑定，ajax

属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });

VBSCRIPT事件绑定(隐式)

很多新版的浏览器都开始不支持VBSCRIPT 所以系统开始不断地有script错误,开始比较多地接触VBSCRIPT vbscript 和javascript 事件绑定的类似方法为 vbscript:   txt_id.Attributes("onblur") = "vbscript:trim_space(me)" javascript:txt_id.Attributes("onblur") = "javascript:trim_spa

vuejs学习笔记（2）--属性，事件绑定，ajax

属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });

jQuery之元素操作及事件绑定

1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ("selector").attr("属性名",值):=>setAttribute("属性名",值):*(*无法访问不再开始标签中存在的prop属性:例:checked,selected,disabled): ②prop读:("se

JavaScript事件绑定

浏览器事件概述 技术一般水平有限,有什么错的地方,望大家指正. 当我们在浏览网页的时候,浏览器可以在视觉上为我们展示出页面还可以在行为上响应用户的操作,浏览器响应用户的操作就是通过事件来完成的,浏览器提供了事件注册接口和事件监听接口这样浏览器就可以接收用户的行为并且进行处理了.浏览器已经提供很多的事件包括页面加载.鼠标事件以及键盘事件等,我们只需要定义好事件处理函数即可,当用户的操作触发这些事件时就会执行我们预先定义好的处理函数.一个行为的完整过程如下: 浏览器在交互的过程中基本的功能就是通过事