jQuery--事件对象的属性

1、event.type()--获取事件类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='jquery-3.2.1.min.js'></script>
    <script type="text/javascript">
        $(function(){
            $('a').click(function(event) {
                alert(event.type);  //获取事件类型，弹出click
                return false; //阻止a链接跳转（阻止默认行为）
            });
        });
    </script>
</head>
<body>
    <a href="#">jQuery</a>
</body>
</html>

2、event.preventDefault--阻止事件默认行为

3、event.stopProtagation()--阻止事件冒泡

4、event.target()--获取触发事件的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='jquery-3.2.1.min.js'></script>
    <script type="text/javascript">
        $(function(){
            $('a').click(function(event) {
                alert(event.target.href);  //获取触发事件的a元素的href值
                return false; //阻止a链接跳转（阻止默认行为）
            });
        });
    </script>
</head>
<body>
    <a href="http://www.baidu.com">jQuery</a>
</body>
</html>

5、event.pageX()和event.pageY()--获取到光标相当于页面的X坐标和Y坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='jquery-3.2.1.min.js'></script>
    <script type="text/javascript">
        $(function(){
            $('a').click(function(event) {
                alert(event.pageX+','+event.pageY);  //获取事件的a元素的位置
                return false; //阻止a链接跳转（阻止默认行为）
            });
        });
    </script>
</head>
<body>
    <a href="http://www.baidu.com">jQuery</a>
</body>
</html>

6、event.which()--在鼠标的单击事件中，获取鼠标的左右中键；在键盘事件中获取键盘的按键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='jquery-3.2.1.min.js'></script>
    <script type="text/javascript">
        $(function(){
            $('a').mousedown(function(event){
                alert(event.which);  //左键1，右键3，中键1
                return false;
            });
        });
    </script>
</head>
<body>
    <a href="#">jQuery</a>
</body>
</html>

 

posted @ 2017-05-18 17:08  影子疯  阅读(159)  评论(0)  编辑  收藏  举报