JQ之小白计划五（事件的举例）

雨点打透心脏的1/2处 2022-05-03 11:26 190阅读 0赞

### 1：绑定事件 ###

--------------------

1.1点击事件

1.2 鼠标事件

1.3事件简写

简单补充：focus() 当元素获得焦点时，发生 focus 事件。 blur()  当元素失去焦点时，发生 blur 事件。

### 2：合成事件 ###

--------------------

2.1合成事件hover

2.2合成事件toggle（复制可看效果）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>合成事件</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
    <style type="text/css">
    	*{margin:0;padding:0;}	
    	 body { font-size: 13px; line-height: 130%; padding: 60px }
    	 #panel { width: 300px; border: 1px solid #0050D0 }
    	.head { height:24px;line-height:24px;text-indent:10px;background: #F296B2; cursor: pointer;width:100%; }
    	.content { padding: 10px; text-indent:24px; border-top: 1px solid #red;display:block;display:none; }
    	.highlight{ background:#F7C942; }//添加或者删除的样式
    </style>
    
    <script type="text/javascript">
    $(function(){
            $("#panel h5.head").toggle(function(){
    			$(this).addClass("highlight");
    			$(this).next().show();
    	},function(){
    			$(this).removeClass("highlight");
    			$(this).next().hide();
    	});
    })
    </script>
    </head>
    <body>
    <div id="panel">
    	<h5 class="head">我是标题</h5>
    	<div class="content">
    		 我是内容 我是内容 我是内容 我是内容  
    		 我是内容 我是内容 我是内容 我是内容
    	</div>
    </div>
    </body>
    </html>

2.3效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_27_color_FFFFFF_t_70][]

### 3：事件冒泡和默认行为 ###

--------------------

在DOM中默认情况下，事件是会冒泡的，即同样的事件会沿着DOM树逐级触发。

如下：点击“内层span元素”会触发外层和body的click事件

有时这是我们不希望的行为，可以在事件处理函数中阻止它。

// 事件处理函数的第一个参数是一个事件对象
    $('#foo').click(function(event){
        event.stopPropagation();//  阻止事件冒泡
        // do sth.
    });

浏览器对用户事件的默认行为是另一个需要考虑的事情，尤其是`<a>`标签的`click`事件。 当用户点击`<a>`标签时，首先调用所有的事件处理函数，然后执行默认行为：页面跳转或者定位。 同样地，我们可以阻止它：

$('a').click(function(event){
        event.preventDefault();//阻止默认行为 ( 表单提交 )
        // do sth.
    });

在实践中，我们常常让事件处理函数`return false`来阻止冒泡和默认行为， 可以认为`return false`做了三件事情：

1.  `stopPropagation()`；
2.  `preventDefault()`；
3.  立即结束当前函数并返回。

$('a').click(function(event){
        // do sth.
        return false;
    });

故上述例子可改为如下以停止冒泡：

故表单可以改为如下以阻止默认行为（表单提交）

### 4：其它 ###

--------------------

事件类型多个

参考:锋利的jquery和[https://harttle.land/2015/06/26/jquery-event.html][https_harttle.land_2015_06_26_jquery-event.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_27_color_FFFFFF_t_70]: /images/20220503/2ef00ee43b9044eeb23a01bbc7f32037.png
[https_harttle.land_2015_06_26_jquery-event.html]: https://harttle.land/2015/06/26/jquery-event.html