JQuery笔记11：JQuery 事件

最新推荐文章于 2017-11-14 12:00:00 发布

zhanzkw

最新推荐文章于 2017-11-14 12:00:00 发布

阅读量482

点赞数

分类专栏： JQuery 文章标签： jquery function html javascript 百度工作

本文链接：https://blog.csdn.net/studyalllife/article/details/6763746

版权

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

常用事件：

（1）：JQuery 中的事件绑定： $("#btn").bind("click",function(){}) ，这是click内部做的工作，每次都这么调用太麻烦，平时不这么用，所以 jQuery 可以用 $("#btn").click(function(){}) 来进行简化。

（2）：合成事件：hover ()函数。【知道就行，这种方法可读性不好，自己写的时候不用这样变态】
语法： hover(enterfn,leavefn) ，当鼠标放在元素上时调用enterfn 方法，当鼠标离开元素的时候调用 leavefn 方法。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            /* $("p").mouseenter(function(){$(this).text("您来啦！");});
            $("p").mouseleave(function(){$(this).text("您慢走！");});*/

            $("p").hover(function(){$(this).text("您来啦！");},function(){$(this).text("您慢走！");});
        });
        
    </script>
</head>
<body>
<p>店小二：</p>
</body>
</html>

（3）：事件冒泡： JQuery 中也像 JavaScript 一样是事件冒泡

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#tb").click(function () { alert("tb被点击了"); });
            $("#td").click(function () { alert("td被点击了"); });
            $("#tr").click(function () { alert("tr被点击了"); });
            $("#p").click(function () { alert("p被点击了"); });
        });
        
    </script>
</head>
<body>
<table id="tb">
<tr id="tr"><td id="td"><p id="p">点击这里</p></td></tr>
</table>
</body>
</html>

如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数： e ， e 就是事件对象。通过e就可以拿到事件相关的信息。
调用事件对象的 stopPropagation() 方法终止冒泡。 e. stopPropagation();

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#tb").click(function () { alert("tb被点击了"); });
            $("#td").click(function (e) { alert("td被点击了"); e.stopPropagation(); });//往上不再冒泡，泡泡到此处被捅破了
            $("#tr").click(function () { alert("tr被点击了"); });
            $("#p").click(function () { alert("p被点击了"); });
        });
        
    </script>
</head>
<body>
<table id="tb">
<tr id="tr"><td id="td"><p id="p">点击这里</p></td></tr>
</table>
</body>
</html>

（4）：阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault() 方法和 window.event.returnValue=false 效果一样。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("a").click(function (e) { alert("百度被攻击了，打不开！"); e.preventDefault(); });
        });
    </script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

其他不常用事件：

<1>：e的其他属性：
1：pageX 、 pageY

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#td").click(function (e) { alert(e.pageX+":"+e.pageY); });
        });
        
    </script>
</head>
<body>
<table id="tb">
<tr id="tr"><td id="td"><p id="p">点击这里</p></td></tr>
</table>
</body>
</html>

2：target 指的是最原始的冒泡开始的触发事件的元素，冒泡的起始，对应于Dom中的srcElement
和this区别：this指的是当前监听的是谁，这个this就是谁。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

           $("#tr").click(function (e) { alert("下面是tr的：");alert($(this).html()); alert($(e.target).html()); });
            $("#p").click(function (e) { alert("下面是p的："); alert($(this).html()); alert($(e.target).html()); });

        });
        
    </script>
</head>
<body>
<table id="tb">
<tr id="tr"><td id="td"><p id="p">点击这里</p></td></tr>
</table>
</body>
</html>

3： which：判断鼠标是那个键按下的，如果是鼠标事件获得按键（ 1 左键， 2 中键， 3 右键）。 altKey 、 shiftKey 、 ctrlKey 获得 alt 、 shift 、 ctrl 是否按下，为 bool 值。 keyCode 、 charCode 属性发生事件时的keyCode （键盘码，小键盘的 1 和主键盘的 keyCode 不一样）、charCode （ ASC 码）。

<2>：移除事件绑定： bind() 方法即可移除元素上所有绑定的事件，如果 unbind("click") 则只移除 click 事件的绑定。 bind:+= ； unbind:-=
<3>：一次性事件：如果绑定的事件只想执行一次随后立即 unbind 可以使用 one() 方法进行事件绑定：

zhanzkw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery笔记11：JQuery 事件

常用事件：（1）：JQuery 中的事件绑定： $("#btn").bind("click",function(){}) ，这是click内部做的工作，每次都这么调用太麻烦，平时不这么用，所以 jQuery 可以用 $("#btn").click(function(){})
复制链接

扫一扫

专栏目录