jquery事件的使用

jquery事件汇总

$("p").click();    　　//单击事件
$("p").dblclick();    //双击事件
$("input[type=text]").focus()  //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()   //元素失去焦点时,触发 blur事件
onfocus=”this.blur()” //.防止用户对文本框中输入文本:
https://blog.csdn.net/it_loser/article/details/51542999?utm_source=copy 
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()     //当鼠标指针位于元素上方时触发事件
$("p").mouseout()    　//当鼠标指针从元素上移开时触发事件
$(window).keydown()    //当键盘或按钮被按下时触发事件
$(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()     //当按钮被松开时触发事件
$(window).scroll()     //当用户滚动时触发事件
$(window).resize()     //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change()    //当元素的值发生改变时触发事件
$("input").select()    //当input 元素中的文本被选择时触发事件
$("form").submit()     //当提交表单时触发事件
$(window).unload()     //用户离开页面时

一、jquery触发事件

1.鼠标移动事件 onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定 onmouseover : 鼠标悬停事件 onmouseout : 鼠标移出事件 onmousedowm onmouseup 2. 鼠标点击事件 onclick ondblclick 3.加载与卸载事件 onload ,onunload，onbeforeunload

$(document).ready(function(){
		// alert("文档加载完毕");
		
		$("#zs").click(function(){
			$("#p1").html("张三被点了");
		});
		
		$("#zs").dblclick(function(){
			$("#p1").html("张三被双击了");
		});
		
		$("#t1").focus(function(){
			$("#t1").val("获取焦点");
		});
		
		$("#t1").blur(function(){
			$("#t1").val("失去焦点");
		});
		
		$("#d1").mouseover(function(){
			$("#d1").html("鼠标移入");
		});
		
		$("#d1").mouseout(function(){
			$("#d1").html("鼠标移出");
		});
	});

4.聚焦与离焦事件 onfocus, onblur，onchange

5.键盘事件 onkeypress鼠标按下或按住,onkeyup,onkeydown

ymkk.keyup(function(event){ //鼠标移入移出事件
		cgymk();
	}); 
	var cyk = $(":input[name='cs']").eq(1);
	$(cyk).change(function() { //改变事件
		cgcyk();
	})

6.提交与重置事件 onsubmit,onreset

.7选择与改变事件

jquery的动效

一、基本动效

$("p").show()    　　　　//显示隐藏的匹配元素
$("p").show("slow");    //参数表示速度,("slow","normal","fast"),也可为900毫秒
$("p").hide()    　　　　//隐藏显示的元素
$("p").toggle();   　　 //切换 显示/隐藏

二、滑动动效

$("p").slideDown("900");    //用900毫秒时间将段落滑下
$("p").slideUp("900");    　//用900毫秒时间将段落滑上
$("p").slideToggle("900");  //用900毫秒时间将段落滑上，滑下

三、淡入淡出动效

$("p").fadeIn("900");    　　  //用900毫秒时间将段落淡入
$("p").fadeOut("900");    　　 //用900毫秒时间将段落淡出
$("p").fadeToggle("900");    　//用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6);    //用900毫秒时间将段落的透明度调整到0.6

具体使用

animate方式实现动态效果

	$(document).ready(function(){
		$("#b1").click(function(){
			$("#p1").show();
		});
		
		$("#b2").click(function(){
			$("#p1").hide();
		});
		
		$("#b3").click(function(){
			$("#d1").fadeOut();
		});
		
		$("#b4").click(function(){
			$("#d1").fadeIn();
		});
		
		$("#b5").click(function(){
			// $("#d1").fadeToggle();
			// $("#d1").fadeToggle("slow");
			$("#d1").fadeToggle(10000);
		});
		
		$("#b6").click(function(){
			$("#d1").fadeTo("slow",0.1);
			$("#d2").fadeTo("slow",0.5);
			$("#d3").fadeTo("slow",0.9);
		});
		
		$("#b7").click(function(){
			$("#d4").slideDown("slow");
		});
		
		$("#b8").click(function(){
			$("#d4").slideUp("slow");
		});
		
		$("#b9").click(function(){
			$("#d5").animate({left:'500px'},'slow');
		});
		
		$("#b10").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,
				height:'150px',
				width:'150px'
				},'slow');
		});
		
		$("#b11").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,
				height:'+=150px',
				width:'+=150px'
				},'slow');
		});
		
		$("#b12").click(function(){
			$("#p2").show(function(){
				alert("出来了！");
			});
		});
		
		$("#b13").click(function(){
			$("#d6").animate({left:'500px'},'slow');
		});
		
		$("#b14").click(function(){
			$("#d6").stop();
		});
	});

其他触发事件

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。


$("a.toggle").click(function () { 
    $("#mydiv").toggle(); 
    return false; // Prevent browser from visiting `#` 
});

这个函数使用toggle来显示或者隐藏#mydiv，然后阻止浏览器继续访问href中指定的链接

var posts = $("div.post"); 
  posts.click(function () { 
  // Remove active from all div.post 
  posts.removeClass("active"); 
  // Add it back to this one 
  $(this).addClass("active"); 
});

在用户点击了一个div.post元素（或者任何一个它的子元素）时，给它加上一个active类，我就需要给div.post增加了一个click回调

实现展开和收起切换（toggleClass("active")

$(".sidebar-menu>li").click(function(){
    console.log('sidebar menu li~~')
    $(this).toggleClass("active");
    $(this).siblings().removeClass("active")
});

trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。

该方法与triggerHandler() 方法类似，不同的是 triggerHandler() 不触发事件的默认行为。

与方法相比triggerHandler() 的不同之处:

它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

triggerHandler()与trigger() 方法的对比


 
.trigger( "focus" )
.triggerHandler( "focus" )
执行 .trigger 后 input 输入框自动获取焦点，触发事件的默认行为，而 .triggerHandler 仅仅
	执行了指定的事件浏览器并未执行动作，输入框也没有获取焦点。

 

$( "#old" ).click(function() {
  $( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
  $( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
  $( "获取焦点!" ).appendTo( "body" ).fadeOut( 1000 );
});

执行 .trigger 后 input 输入框自动获取焦点，触发事件的默认行为，而 .triggerHandler 仅仅执行了指定的事件浏览器并未执行动作，输入框也没有获取焦点。

触发事件模拟click:

$("button[name='comQue']").each(function(index,item){
$(this).trigger("click");
)}

触发元素的 select 事件：

$("button").click(function(){
    $("input").trigger("select");
});

传递参数

trigger(tpye[,datea])方法有两个参数，第一个参数是要触发的事件类型，第二个单数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

$("#btn").bind("myClick", function (event, message1, message2) { //获取数据
    $("#test").append("p" + message1 + message2 + "");
});
$("#btn").trigger("myClick",["我的自定义","事件"]); //传递两个数据

自定义事件

 //myEvent为自定义事件名

        $("#p1").bind("myEvent",function(str1,str2) {

               alert(str1 + ' ' + str2); 

          });  

         $("#p1").trigger("myEvent",["Hello","World"]); 

//也可以这样写：

　　　 $("#p1").bind("myEvent",function(str1,str2) {

               alert(str1 + ' ' + str2); 

          }).trigger("myEvent",["Hello","World"]);

触发 input 元素的 select 事件：

$("button").click(function(){
    $("input").trigger("select");
});

事件流

当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定。顺序相应该元素的触发事件，事件传播的顺序叫做事件流程。

事件流的分类

1.冒泡型事件(所有的浏览器都支持) 由明确的事件源到最不确定的事件源依次向上触发。

2.捕获型事件(IE不支持 w3c标准火狐) 不确定的事件源到明确的事件源一次向下触发。 addEventListener(事件，处理函数，false)//冒泡阶段执行 addEventListener(事件，处理函数，true)//捕获阶段执行


  window.onload=function  () {
     var div1=document.getElementById("outdiv");
	 var div2=document.getElementById("innerdiv");
	 div1.addEventListener("click",function  (e) {
	     alert(this.id);
         e.stopPropagation(); 
	 },true);
	  div2.addEventListener("click",function  () {
	     alert(this.id);
	 },true);
  }

动态生成iframe页面

		var strUrl = Leopard.getContextPath() +
		"/DoMyServlet?className=ExcelPoiAction&methodName=createExcel&btnCode=empdata&forWard=isFile&namesalt="+namesalt+"&func="+_func
	    +"&pbean="+encodeURI(encodeURI(strwhere))+"&btnCode"+empexcel;
		var ifm;
		if (document.getElementById("empexcel_iframe") == undefined) {
			ifm = document.createElement("IFRAME");
			ifm.setAttribute("id", "empexcel_iframe");
			ifm.setAttribute("name", "empexcel_iframe");
			ifm.style.height = "0";
			ifm.style.width = "0";
			ifm.style.display = "block";
			ifm.src = "";
			document.body.appendChild(ifm);
			document.getElementById("empexcel_iframe").attachEvent(
					"onload",
					function() {
						window.frames['empexcel'].document.getElementById("empexcel").click();
					});
		} else {				ifm = document.getElementById("empexcel_iframe");			}
		ifm.src = strUrl;

3.阻止事件流 IE: 事件对象.cancelBubble=true; FF: 事件对象.stopPropagation();

具体使用

添加相同的事件，但是处理方式不同。添加组织事件流，停止事件传播

4.目标事件源的对象 IE：事件对象.srcElement FF:事件对象.target


  aa()
   function test (a,b) {
    alert(b);
    a.cancelBubble=true;
    var obj=a.srcElement ||a.target;//获取目标事件源，少绑定事件
    alert(obj.innerHTML);
	alert(b);
   }





   
       
	   第一个
	   
	    
	   第二个
	   
	   
	   第三个

具体使用

表格点击更改单元格内容


   window.onload=function  () {
     var tab=document.getElementById("tab");
     tab.ondblclick=function  (e) {
	   var ev=e||window.event;
       var tdobj=ev.srcElement||ev.target;
	    if(tdobj.nodeName=="TH"){
		   return;
		}
	   var tdtext=tdobj.innerHTML;
	       tdobj.innerHTML="";
	   var inputs=document.createElement("input");
	   inputs.type="text";
	   //alert(tdobj.offsetWidth)
	   //inputs.size=8;
	    inputs.style.width=tdobj.offsetWidth-15+"px";
		//去掉文本域的边框
	    inputs.style.borderWidth="0px"
        tdobj.appendChild(inputs);
       	 
		 inputs.value=tdtext;
		inputs.focus();

		inputs.onblur=inputs.ondblclick=inputs.onkeydown=function  (e) {
		  var ev=e||window.event;
		  if(ev.type=="blur" ||ev.type=="dblclick" ||(ev.type=="keydown" && ev.keyCode==13)){
		     var val=this.value;
		     tdobj.removeChild(inputs);
			 if(val==""){
			 tdobj.innerHTML=tdtext;
			 }else{
			   tdobj.innerHTML=val
			 }
		  }
		}
     }
   }






   学生成绩单
   
       
	     姓名
	   
	     
	     性别
	   
	     
	     班级
	   
	   
	     科目
	   
	    
	     分数
	   
   

      
       
	     张三
	   
	     
	     男
	   
	     
	     96班
	   
	   
	    数学
	   
	    
	     98
	   
   
     
       
	     张三
	   
	     
	     男
	   
	     
	     96班
	   
	   
	    数学
	   
	    
	     98
	   
   
     
       
	     张三
	   
	     
	     男
	   
	     
	     96班
	   
	   
	    数学
	   
	    
	     98

事件的绑定

直接在HTML元素绑定

function aa () {
  alert("点击");
}

在脚本中绑定

var one=document.getElementById("one");
one.onclick=function  () {
  alert("点击");
	}

one.onclick=aa;
alert(aa)
function aa () {
  alert("点击");
}

绑定事件另一种方式


    alert("我是DIV2");

同一个事件绑定多个事件处理程序

  function fn1 () {
     alert("第一次");
  }
  function fn2 () {
      alert("第二次")
  }
  //one.onclick=fn1;
  //one.onclick=fn2;//第二个变量把第一个变量的值覆盖了


1.解决办法一
 /*
    one.onclick=function  () {
	   fn1();
	   fn2();
    }

解决办法二
 /*
   function addevent (obj,types,fns) {
     if(typeof obj[types]!="function"){
	    obj[types]=fns;
	 }else{
	    var old= obj[types];
        obj[types]=function  () {
         old();
		 fns();
		}
	 }
   }

 addevent(one,"onclick",function  () {
      alert("第三次");
   })

 function addEvent (obj,types,fns) {
	  var att="_"+types;
       if(!obj[att]){
	       obj[att]=[];
	   }
	    for (var i in obj[att]) {
		  if(obj[att][i]+""==fns+""){//函数的比较是否相等
		    return false;
		  }
	    }
	   obj[att].push(fns);
	   if(typeof obj[types]=="function"){
	       var old=obj[types];
	   }
	   obj[types]=function  () {
	        old();
	      for (var i=0; i

jquery事件的使用

最近更新

热门博客

[ 申请 ]友情链接：