Jquery 事件处理 1

   1. 界面初始化事件

普通js代码是用window.onLoad 事件或者用body的onLoad属性,在jquery里取代他的是$(document).ready()函数。

        window.onLoad事件彼此之间是会相互覆盖的,后面写的就会覆盖前面的事件。而ready函数却可以同时存在多个,按照先后顺序执行。如果onLoad事件和ready同时存在会怎么样呢,在jQuery1.8.2 测试结果,两种办法的事件都会执行,ready绑定的事件先执行。

       有的人说ready函数会被屏蔽,可能是版本不同吧。

      $(document).ready()函数可以简写成$();


     http://blog.sina.com.cn/s/blog_6e437c5b0106euzi.html

2. 事件绑定,为Jquery对象绑定事件。

     函数:bind(type,[data],fn)

     bind()方法能够为匹配元素的某个事件绑定一个事件处理函数,这个事件可以是存在的 如click,dbclick等等,也可以是自己乱起的,不存在的,如:巴嘎雅路bagayalu,caonima,wocao等等,只不过这个时候,浏览器无法识别这个事件,需要用别的方法来激活她,或者触发她,下面稍后会说。 

    绑定click事件 如下:

$(function(){
	$("div").bind("click",function(){
	    alert($(this).text());
	});
	
	$("div").click(function(){
	    alert("click");
	});
});

我们为每个div都绑定一个click事件,同时用click函数也为div添加处理函数。这个时候div本身的click事件会打出click,绑定的函数会打印出div的内容,这两个函数的执行是按照代码的先后顺序来的, 放在前面的先执行

           在用bind绑定事件的时候,是可以向处理函数传递数据的。即第二个参数的用途。

           参数值以对象的形式进行传递的。然后在处理函数中可以通过 event.data 属性值来获取该值。      

$(function(){
	
	$("div").bind("click",{aaa:"abc  "},function(event){ // event为参数的名字,形参,随意取
	   alert(event.data.aaa+$(this).text());
	});

});

这样当点击div的时候会打出 aaa   + div的内容 

绑定事件后可以用unbind([type],[data]) 方法解除绑定。

其中第一个参数表示要删除绑定的事件名,第二个参数表示删除的附带参数 --》不懂第二个怎么用

例:$("div").unbind("click");

	$("div").bind("click",{aaa:"abc  "},function(a){
	   alert(a.data.aaa+$(this).text());
	});
	$("div").click(function(){
		alert("abc");
		$("div").unbind("click");
	});

注意: unbind方法会将bind方法添加的事件清除掉,同时也会把click函数添加的事件清楚掉。因此点击一次div之后在点击的什么都不打出。

 jQuery还提供了另一个方法:one(type,[data],fn)。这个方法和bind用法是一样的,但是绑定函数只会执行一次。


下面开始说怎么激活自己随意定义的事件。

使用函数 trigger(type,[data])。

$(function(){
	
	$("div").bind("wocao",function(){
	   alert($(this).text()+"wocao");
	});
	
	$("div").trigger("wocao");
});
如上,我们自定义一个事件,界面加载完成后,会调用trigger方法来触发bind绑定的事件,所有会直接弹出消息框。
当然我们可以把trigger放在其他的事件中,当其他的事件激发的时候,激发自定义事件,

$("div").bind("me", function () {
    alert($(this).text());
});
$("div").bind("mouseover",function(){
    $("div").trigger("me");
});
        这样在鼠标移过div的时候来激发自定义的事件。----有点不明白,我们把事件的处理直接写在mouseover的事件处理函数里就可以了,干嘛非要这么麻烦,菜鸟啊,不懂其深意,求指教。


在下面这个示例中,每当单击按钮一次,则将会触发trigger()方法绑定的focus 事件,同时浏览器默认的 focus 事件也将被触发一次,则“<span>单击一次!</span>”HTML 源代码被增加两次。

<input type="text" value=""/>
<button id="ok">ok</button>
<script language="javascript" type="text/javascript">
      $("input").focus(function(){
           $("<span>单击一次!</span>").appendTo("body");
      });
      $("#ok").click(function(){
           $("input").trigger("focus");
      });
</script>

如果把其中的trigger()替换为triggerHandler(),则单击时只执行一次插入操作(代码如下所示),系统默认的focus 事件没有被自动触发。

$("#ok").click(function(){ $("input").triggerHandler("focus");    });

真的很奇怪,用div的click事件做同样的试验,不用triggerHandler 也只执行一次。

或许是被点击对象本身含有这个事件的时候,浏览器才会默认调用之。


你可能感兴趣的:(Jquery 事件处理 1)