jquery关于事件操作

scralet-moon

于 2018-12-05 15:31:31 发布

阅读量136

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43682329/article/details/84837154

版权

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

事件绑定

1.基本绑定

$(element).click(function(){})

$(element).dblclick(function(){})



加载完毕事件

$(document).ready(function(){})

$(function(){})

2.方法绑定

$(element).bind('click', function(){})//绑定事件

$(element).unbind();//解除事件绑定

3.动态绑定

$(element).live('click', function(){})

需注意，live方法在高版本的jquery中移出了,在使用时请注意版本

事件触发

当我们想要去触发某个元素的事件时可以使用 trigger,注意需指定元素的事件类型

$(element).trigger('click')

事件冒泡和默认行为

事件冒泡

当触发一个元素的事件时,会 自动触发该元素的父级和先辈级的同类型事件,造成事件并发,导致页面混乱,我们称为事件冒泡

此时我们可以在元素的事件处理函数中返回一个false 来进行阻止,注意这个方法仅限于在jquery中使用

默认行为

在页面中有些元素是具备默认行为的,例如a链接的单击,表单的提交,都会进行跳转或提交,这些我们成为默认行为

但是在绑定上事件后,它首先会先执行事件,再去执行默认行为,而有时我们只想让其触发事件,但不执行默认行为时,

我们可以在该元素的事件中返回一个false来进行阻止默认行为

<a href="http://www.baidu.com">百度</a>


$('a').click(function(){

    //阻止默认行为
    return false;
})

    a href ="" 默认打开的还是当前页面，会刷新一下重新打开。
    a href ="#" 浏览器地址栏网址后面会多显示1个#。不会刷新页面，会回到页面顶部。
    <a href="javascript:void(0)"  onclick="my()" >点点</a>  让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。
    javascript:是伪协议，表示url的内容通过javascript执行。
    void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作.

获得当前鼠标的位置和按键

我们有鼠标和键盘按键的事件,在触发事件时如果我们想要获取鼠标的位置或键盘按键信息时,

首先需要在当前的事件中传递一个事件对象 e

$(element).click(function(e){
    //能够获取鼠标的x轴和y轴坐标,坐标位置相对于浏览器窗口
    var x = e.clientX;
    var y = e.clientY;

    //能够获取鼠标的x轴和y轴坐标,坐标位置相对于文档
    var _x = e.pageX;
    var _y = e.pageY
})
$(element).keydown(function(e){
    //可以打印e对象,或者直接使用该对象中的keyCode属性来获取按键信息
    var key = e.keyCode;
    console.log(key);
})

三级联动



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <script src='./jquery-1.8.3.js'></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // event 事件对象 用来记录鼠标和键盘信息
        $('div').click(function(e){
            console.log(e);
        })
        $('div').mousemove(function(e){
            console.log(e.clientX,e.clientY);
        })

        // 键盘事件 按下
        $(window).keydown(function(e){
            console.log(e);
        })
        // 键盘抬起事件
        $(window).keyup(function(){
            alert('键盘抬起了');
        })
    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-1.8.3.js"></script>
    <style>
        *{padding:0;marin:0;}
        .item1{
            width: 100px;
            height: 100px;
            background:red;
            position:absolute;
        }
    </style>
</head>
<body>
    <div class="item1"></div>
    <script>
        $('.item1').mousedown(function(){
            // console.log('111');
            // 鼠标移动
            $(window).mousemove(function(e){
                // 获取鼠标的位置
                var X=e.clientX;
                var Y=e.clientY;

                // 获取元素宽高的一半
                var nW=$('.item1').width()/2;
                var nH=$('.item1').height()/2;

                // 获取鼠标相对于元素的而为之
                var NL=X-nW;
                var NT=Y-nH;

                // 让元素移动到鼠标的位置
                $('.item1').css({left:NL,top:NT})
            })

            // 鼠标抬起事件
            $('.item1').mouseup(function(){
                $(window).unbind('mousemove');
            })

        })
    </script>
</body>
</html>