JQuery 事件

Posted 2020-08-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 事件相关的知识，希望对你有一定的参考价值。

javascript和html之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时，浏览器会自动生成一个事件。

常见事件包括：当浏览器加载页面完成后，用户点击按钮，鼠标移动，键盘点击等。

jQuery增加并扩展了基本的事件处理机制。

技术分享

事件绑定

方法结构：bind(type[,data],fn); 参数： type 事件类型名称，类型包括：blur，focus，load，resize，scroll，unload，click，dblclick,mousedown,mouseup,mousemove,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等

[,data] 传递的参数（可选），作为event.data属性传递给事件的额外数据对象。

fn 处理事件的函数例如：bind("click",function(){ });

注：jQuery事件相当于JavaScript中的事件少了on，例如JavaScript中的onclick，jQuery中就为click。

<script>
        $(function () {
           //可以对一个事件进行多次绑定，
            $("#name").bind("click", function () {
                $(this).next().append("你好吗？<br />");
            }).bind("click", function () {
                $(this).next().append("好！<br />");
            }).bind("click", function () {
                $(this).unbind("click");   //解绑事件
            });
          //绑定不同的事件

　　　　　　$(".head").bind("mouseover", function () {
　　　　　　　　　　　　$(this).next().show();
　　　　　　　　}).bind("mouseout", function () {
　　　　　　　　　　$(this).next().hide();
　　　　　　});


        });
    </script>

1.hover()方法

语法结构： hover(enter,leave);

hover()方法用于模拟光标悬停事件，当光标移动到元素上时，促发触发一个函数enter，当光标移出这个元素时，会触发第二个函数leave。

2.toggle()方法

语法结构： toggle（fn1,fn2,…fnN）; toggle()方法用于模拟鼠标连续单击事件，第一次触发第一个方法fn1，当下次继续点击同一元素，则触发制定的第2个方法fn2，如果有多个方法则依次触发，直到最后一个，然后在从头开始。

3.toggle()方法

toggle()方法在jQuery中还有另外一个作用切换元素可见性

事件冒泡

在页面上可以有多个事件，也可以多个元素响应一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件。

只单击内<span>元素，就会触发外部<div>元素和 <body>元素上的绑定的click事件。这是由事件冒泡引起的。

停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数执行。在jQuery中提供了

 $(function () {
            // 为span元素绑定click事件
            $(‘span‘).bind("click", function (e) {
                var txt = $(‘#msg‘).html() + "<p>内层span元素被点击.<p/>";
                $(‘#msg‘).html(txt);
                //e.stopPropagation();
                return false;    //阻止事件冒泡
            });
            // 为div元素绑定click事件
            $(‘#content‘).bind("click", function (e) {
                var txt = $(‘#msg‘).html() + "<p>外层div元素被点击.<p/>";
                $(‘#msg‘).html(txt);
                e.stopPropagation();   //阻止事件冒泡
            });
            // 为body元素绑定click事件
            $("body").bind("click", function () {
                //var txt = $(‘#msg‘).html() + "<p>body元素被点击.<p/>";             
　　　　　　　　  //$(‘#msg‘).html(txt);

　　　　　　　　　　$("#msg").append("<p>body元素被点击.<p/>");
            });

})

阻止默认行为

当点击超链接，或点击按钮时，都会触发对应元素的默认行为，这里可以通过event.preventDefault(); //阻止默认行为 ( 表单提交 )也可以使用return false;来阻止表单提交。

以上是关于JQuery 事件的主要内容，如果未能解决你的问题，请参考以下文章

原生js如何绑定a连接点击事件？

jQuery应用代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）