jquery event

一、事件机制:

事件在触发后被分为两个阶段,一个是捕获(Capture),另一个则是冒泡(Bubbling); 大多数浏览器并不是都支持捕获阶段,jquery也不支持。因此在事件触发后,往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。

 

二、事件冒泡:

在jquery中,可以通过stopPropagation()方法阻止事件的冒泡过程外,还可以通过语句return false实现停止事件的冒泡过程。

<body>
    <div class="one" style="width: 200px; height: 200px; background: red;">
        <div class="two" style="width: 150px; height: 150px; background: green;">
            <div class="three" style="width: 50px; height: 50px; background: blue;">
            </div>
        </div>
    </div>
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $(.one).click(function (e) {
            alert(one);
        });
        $(.two).click(function (e) {
            alert(two);
        });
        $(.three).click(function (e) {
            //阻止事件冒泡
            e.stopPropagation(); 
            alert(three);
        });
    })
</script>

 

三、页面载入事件:

javascritp的页面载入事件onload()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发,在这种情况下,如果页面中的图片过多或图片过大,那么有可能要等onload()方法执完毕,用户才能进行其他的操作;

jquery的页面载入事件ready()方法,只要页面的dom模型加载完毕,就会触发ready()方法。

jquery中ready()方法的工作原理:在jquery脚本加载到页面时,会设置一个isReady的标记,用于监听页面加载的进度,当然遇到执行ready()方法时,通过查看isReady值是否被设置,如果未被设置,那么就说明页面并未加载完成,在此情况下,将未完成的部分用一个数组缓存起来,当全部加载完成后,再将未完成的部分通过缓存一一执行。

<script src="scripts/jquery.min.js"></script>
<script>
    //写法一
    $(document).ready(function () {
        alert(1);
    });
    //写法二,简洁明了,使用较为广泛
    $(function () {
        alert(2);
    });
    //写法三
    jQuery(document).ready(function () {
        alert(3);
    });
    //写法四
    jQuery(function () {
        alert(4);
    });
</script>

 

四、绑定事件:

(1) 直接绑定事件;

<body>
    <input type="button" name="name" value="clickme" id="clickme" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function myfunction() {
        $("#clickme").click(function () {
            alert("clicked");
        })
    })
</script>

(2) 使用bind()方法进行事件的绑定;

bind()功能是为每个选择元素的事件绑定处理函数,其语法如下:

bind(type,[data],fn )

参数type为一个或多个类型的字符串,如"click"或"change",也可以自定义类型:可以被参数type调用的类型包括blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error;

参数data是作为event.data属性值传递给事件对象的额外 数据对象;

参数fn是绑定到每个选择元素的事件中的处理函数;

<body>
    <input type="button" name="name" value="clickme" id="clickme" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function myfunction() {
        $("#clickme").bind("click", function () {
            alert("clicked");
        })
    })
</script>

如果要在一个元素中绑定多个事件,可以将事件用空格隔开;

<body>
    <input type="button" name="name" value="clickme" id="clickme" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function myfunction() {
        $("#clickme").bind("click mouseover", function () {
            alert("clicked");
        })
    })
</script>

 

五、切换事件:

所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换;

在jquery中,有两个方法用于事件的切换:

(1) hover()

调用jquery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换,该方法在实现运用中,也可以通过jquery中的事件mouseenter与mouseleave进行替换。

hover()功能是当鼠标移动到所选的元素上面时,执行指定的第一个函数;当鼠标移出这个元素时,执行指定的第二个函数,其语法如下:

hover( over,out)

参数over为鼠标移到元素时触发的函数;

参数out为鼠标移出元素时触发的函数;

<body>
    <input type="button" name="name" value="hoverme" id="hoverme" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function myfunction() {
        $("#hoverme").hover(function () {
            $(this).css("background", "red");
        }, function () {
            $(this).css("background", "#ddd");
        })
    })
</script>

(2) toggle()

toggle() 方法切换元素的可见状态。

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

语法:$(selector).toggle( [speed],[callback],[switch] )

(1) 参数speed:

可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。

可能的值:毫秒 (比如 1500)"slow""normal""fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数,则无法使用 switch 参数。

(2) 参数callback:

可选。toggle 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

(3) 参数switch:

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

True - 显示所有元素

False - 隐藏所有元素

如果设置此参数,则无法使用 speed 和 callback 参数。

<body>
    <p>Hello World!</p>
    <input type="button" name="name" value="toggle" id="toggle" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $("#toggle").click(function () {
            $("p").toggle(1000);
        })
    })
</script>

 

六、移除事件:

在jquery中,通过unbind()方法移除绑定的所有事件或指定某一个事件。

unbind()的功能是移除元素绑定的事件,其调用的语法格式为:

unbind([type],[fn] )

参数type为移除的事件类型,

参数fn为需要移除的事件处理函数;

如果该方法没有参数,则移除所有绑定的事件;

如果带有参数type,则移除该参数所指定的事件类型;

如果带有参数fn,则只是移除绑定时指定的函数fn。

<body>
    <p>Hello World!</p>
    <input type="button" name="name" value="bind" id="bind" />
    <input type="button" name="name" value="unbind" id="unbind" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $("#bind").click(function () {
            $("p").bind("click", function () { alert("binded") })
        })
        $("#unbind").click(function () {
            $("p").unbind("click")
        })
    })
</script>

 

七、其他事件:

(1) 方法one()

one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:

one(type,[data],[fn] )

参数type为事件类型,即需要触发什么类型的事件;

参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象;

参数fn为绑定事件时所要触发的函数。

<body>
    <p>Hello World!</p>
    <input type="button" name="name" value="one" id="one" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $("#one").one("click", function () {
            alert("click");
        })
    })
</script>

(2) 方法trigger()

trigger()方法的功能是在所选择的元素上触发指定类型的事件,其调用的语法格式为:

trigger(type,[data] )

参数type为触发事件的类型;

参数data为可选项,表示在触发事件时,传递给函数的附加参数。

<body>
    <p>Hello World!</p>
    <input type="button" name="name" value="click" id="click" />
</body>
<script src="scripts/jquery.min.js"></script>
<script>
    $(function () {
        $("#click").click(function () {
            alert("click");
        })
        $("p").click(function () {
            $("#click").trigger("click");
        })
    })
</script>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。