码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript - Jquery - 事件

时间:2017-06-05 18:59:30      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:鼠标移动   操作符   over   out   动作   seo   ide   click   eve   

事件(Event)

页面载入事件

ready(x)

x是事件侦听器,由window或document调用。加载完毕会调用x。

技术分享
$(document).ready(function(){
    
})
//可以简写为:$(function(){    
})
//
$(document).ready(aa=function(){
})
//
$(document).ready(aa)
function aa(){ }
View Code

键盘鼠标事件

keyup(x)

x是事件侦听器,键盘按下时或使用鼠标粘贴时会调用x。

技术分享
$(document).keydown(function () {
    alert(‘键盘被按下‘);
});
View Code

绑定事件

bind(type,x))

为JQuery对象绑定事件,type是事件触发方式,x是事件侦听器,在侦听器内部可以访问一个叫做event的事件对象(提供事件信息)。

type可能的值:

load、unload、error、blur、focus、resize、scroll、mouseouser、mousemove、mouseup、mousedown、mouseout、mouseenter、mouseleave、click、dbclick、change、select、submit、keydown、keyup、keypress

技术分享
<body>  
    <div id="box">hello</div>
<script>
    $(document).ready(function () {
        var div = $("#box");
        div.bind("click", aa);
        function aa() {
            alert(event.srcElement.outerText);//print hello
            alert(this.id);//print box
        }
    })
</script>
</body>
View Code

绑定事件可以如下简化,将type作为方法进行调用。

技术分享
$(‘p‘).click( function( ) { } )
$(‘p‘).blur( function( ) { } )
View Code

追加事件

使用.操作符可以为该对象追加事件,它会按注册事件时的顺序执行。

技术分享
$(‘li p‘).bind(‘click‘, function () {
                
}).bind(‘click‘, function () {
                
})
View Code

注销事件

unbind(type,x)

x是可选的事件侦听器,你可以把事件侦听器赋给一个变量x以便于注销事件时提供这个参数。type是可选的事件触发方式。此方法分三种情况:

1.两个参数都不提供会移除该JQuery对象的所有事件

2.只提供type则只移除该JQuery对象的这个事件

3只提供x则只移除该JQuery对象的这个事件

模拟事件

trigger(type,x)

自动触发该对象的事件。 type是事件触发方式类型,x是可选的数组,数组是作为事件侦听器的参数。

技术分享
//模拟的优势在于你可以随时手动控制事件在何时被触发。
$(‘p‘).bind(‘click‘, function () {
                
})
$(‘p‘).trigger(‘click‘); 
//还可以简化为:
$(‘p‘).click();
View Code

如果你自定义了一个事件,可使用此方法触发它,使其得到处理。

技术分享
<body>  
    <div id="box">hello</div>
<script>
    $(document).ready(function () {
        $(#box).bind(myshow, function () {
            alert();
        })
        var test = $("p");
        //作条件测试,使用trigger方法则事件触发与否控制权就在你手里
        if (test) {
            $(#box).trigger(myshow);//去执行该对象的myshow类型的事件
        }
    })
    //因为test得不到JQuery对象,所以这个事件就不会被触发
</script>
</body>
View Code

x作为数组类型的参数提供给事件侦听器

技术分享
$(‘p‘).bind(‘myshow‘, function (msg,msg2 ) {
    
})

$(‘p‘).trigger(‘myshow‘, [120, 680]);
View Code

附:当trigger执行submit事件时,浏览器也将触发submit事件。这会造成不想要的结果。此时可以使用triggerHandler方法避免浏览器的默认动作或使用事件对象的preventDefault或直接在事件处理函数中return false。

切换事件

toggle ( clickx , clicky , ……) 

为对象绑定多个click事件,clickx是第一次click时的事件侦听器,clicky是第二次click时的事件侦听器。结束后会从新开始。

hover ( clickx , clicky , ……) 

为对象绑定多个hover事件,clickx是第一次hover时的事件侦听器,clicky是第二次hover时的事件侦听器。结束后会从新开始。

事件对象

每个事件侦听器都维护了一个JQuery事件对象(event),你可以在方法内部获取它以便取出事件的信息。

技术分享
$(document).ready(function () {
    $(‘#box‘).bind(‘myshow‘, function () {
        eventMessage = event.type;//获取事件触发方式
    })
})
View Code

或在事件侦听器的参数里指定这个event作为参数以便适应它

技术分享
$(document).ready(function () {
    $(‘#box‘).bind(‘myshow‘, function (e) {
        eventMessage = e.type;//获取事件触发方式
    })
})
View Code

属性

type 

获取事件触发方式,诸如click、mouseover、keydown

relatedTarget

如果是mouseover事件,获取鼠标是从哪个DOM元素里移动过来的。即返回鼠标从哪个DOM元素中来的。

如果是mouseout事件,获取鼠标移动到了哪个DOM元素里。即返回鼠标到哪个DOM元素中去。

技术分享
$(document).ready(function () {
    $(‘#box‘).bind(‘mouseover‘, function (e) {
        alert(e.relatedTarget.innerHTML);
    })

    $(‘#box‘).bind(‘mouseout‘, function (e) {
        alert(e.relatedTarget.innerHTML);
    })
})
View Code

pageX

获取事件发生时鼠标离客户区的左边距。

pageY

获取事件发生时鼠标离客户区的左边距。

which 

获取事件发生时鼠标按下的是左、中、右键中的哪个键,对应的值是1、2、3,或键盘按下的是哪个键。 

方法

stopPropagation(x)

x是布尔值,是否组织冒泡。

preventDefault(x)

x是布尔值,是否阻止浏览器默认动作。

target

获取触发事件的DOM元素对象。

originalEvent

获取事件原始对象,鼠标类事件发生时,有效传递了一个MouseEvent对象,MouseEvent派生自event构造器,如果MouseEvent不满足你要获取的事件信息,你可以通过此方法获取event对象。

mataKey

是否按下了ctrl键。

事件命名空间

如果一个JQuery对象绑定了N多的事件,注销时你得一个一个注销,使用事件命名空间就可以一次性注销它们。

技术分享
$(‘p‘).bind(‘mouseover.Result‘, function () {
    
})

$(‘p‘).bind(‘click.Result‘, function () {
    
})

$(‘p‘).bind(‘focus.Result‘, function () {
    
})

$(‘p‘).unbind(‘.Result‘)
View Code

如果一个JQuery对象绑定了N多相同类型的事件,在满足某个条件时你只愿意它触发其中的一个事件,也可以使用命名空间来完成

技术分享
<p>test</p>
    <form>
        <input id=‘btn‘ type="submit" value=‘click‘ />
    </form>

$(document).ready(function () {
    //未定义命名空间的事件
    $(‘p‘).bind(‘click‘, function () {

    })

    //定义了命名空间的事件
    $(‘p‘).bind(‘click.Result‘, function () {

    })

    $(‘#btn‘).click(function () {
        $(‘p‘).trigger(‘click!‘)//click!表示匹配所有不包含在命名空间里的click事件
    })
})
View Code

 

Javascript - 学习总目录

Javascript - Jquery - 事件

标签:鼠标移动   操作符   over   out   动作   seo   ide   click   eve   

原文地址:http://www.cnblogs.com/myrocknroll/p/6944854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!