jQuery绑定和触发事件

在人生的道路上,不管是潇洒走一回,或者是千山独行,皆须是自己想走的路,虽然,有的人并不是很快就能找到自己的方向和道路,不过,只要坚持到底,我相信,就一定可以找到自己的路,只要找到路,就不必怕路途遥远了。

导读:本篇文章讲解 jQuery绑定和触发事件,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

jQuery操作事件无非就是绑定事件,触发事件,解绑定事件.原生js中的通过DOM编程和在标签上的事件属性绑定事件,

jQuery中,我们可以使用

事件的绑定:bind(),live()(1.8及之前可用),on()(1.9之后推荐使用),one()

事件解绑定:unbind()

事件的触发:行为触发, jQuery方法触发

bind 方法绑定事件,在jQuery中,事件的名称 = 原始名称去掉 on
例如
onclick ——》 click
onmouseover ——》 mouseover

案例

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
             #d1{
                  width: 200px;
                  height: 200px;
                  border: 1px solid red;
             }
         </style>
         <script type="text/javascript"   src="js/jquery.min.js"   ></script>
         <script>
            function fun1(){
            	/*$("#d1").bind('mouseover',function(){
            		$("#d1").css("background-color","yellow")
            	})
            	
            	$("#d1").mouseleave(function(){
            		$("#d1").css("background-color","green")
            	})*/
            	
            	/*
            	 one:绑定一次事件
            
            	 * */
            	$("#d1").one('mouseover',function(){
            		$("#d1").css("background-color","yellow")
            	})
            	
            	$("#d1").one('mouseleave',function(){
            		$("#d1").css("background-color","green")
            	})
            }
            
            function fun2(){
            	//$("#d1").unbind()	//解除绑定的所有事件
            	
            	$("#d1").unbind("mouseover")   // 接触绑定的指定事件
            	
            }
            
            function fun3(){
            	$("#i1").focus()
            }
            function fun4(){
            	console.log("获得了焦点")
            }
         </script>
    </head>
    <body>
         <div id='d1'>
         	
         </div>
         <input type="button"   value="添加事件" onclick="fun1()" />
         <input type="button"   value="解除绑定" onclick="fun2()" />
         <br />
         <input type="text"  id='i1' onfocus="fun4()"/>
         <input type="button"   value="触发事件" onclick="fun3()" />
    </body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/123425.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!