JQuery中取消事件冒泡以及事件对象的属性

最新推荐文章于 2020-12-05 11:20:44 发布

原创最新推荐文章于 2020-12-05 11:20:44 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery中取消事件冒泡以及事件对象的属性

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文深入探讨了使用JQuery进行事件处理的方法，包括事件绑定、事件对象的使用、事件冒泡的取消及目标元素的获取。通过具体示例，如单击事件、鼠标移动事件和键盘按键事件的处理，展示了如何利用JQuery简化事件监听和响应。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <div id="div1" style="width:300px;height:300px;border:1px solid red">
      <p id="p1">事件冒泡</p>
    </div>
    <input type="text" id="txt1"/>
    <script type="text/javascript">
        $(function () {
            //JQuery中的事件对象event是经过封装的，已经是兼容的，和js里边的event对象是不一样的
            //为p标签注册单击事件
            $("#p1").click(function (evt) {
                //获取当前事件的类型,使用event对象的type属性
                alert(evt.type);
                alert("p标签的单击事件被触发");
                //取消事件冒泡，调用event对象的stopPropagation()方法
                //evt.stopPropagation();
            });
            $("#div1").click(function (evt) {
                alert("div的单击事件bei触发");
                //得到冒泡事件中最先触发事件的元素，使用event.target
                alert(evt.target);
            }).mousemove(function (evt) {
                //得到页面坐标,event对象的pageX和pageY分别得到坐标值
                $("title").prop("text", function () {
                    return evt.pageX + "    " + evt.pageY;
                });
            });
            $("#txt1").keydown(function (evt) {
                //event对象的which属性是获取键盘按下的哪个键
                alert(evt.which);
            });
        });
    </script>
</body>
</html>