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
<script type="text/javascript">
<!--
function fun(){
alert("你好") ;
}
function fun1(){
alert("你不好") ;
}
function fun2(){
alert("我悄悄的走了") ;
}
//-->
</script>
<body onload = "fun(),fun1()" onunload = "fun2()">
</body>$(document).ready(function(){
// alert("文档加载完毕");
$("#zs").click(function(){
$("#p1").html("<font color=red>张三被点了</font>");
});
$("#zs").dblclick(function(){
$("#p1").html("<font color=red>张三被双击了</font>");
});
$("#t1").focus(function(){
$("#t1").val("获取焦点");
});
$("#t1").blur(function(){
$("#t1").val("失去焦点");
});
$("#d1").mouseover(function(){
$("#d1").html("鼠标移入");
});
$("#d1").mouseout(function(){
$("#d1").html("鼠标移出");
});
});
4.聚焦与离焦事件
onfocus, onblur，onchange
<script type="text/javascript">
<!--
function fun(obj){
obj.style.border = "1px solid red " ;
obj.style.backgroundColor = "#ff66ff" ;
obj.style.color = "green" ;
}
function fun1(obj){
if(obj.value == ""){
alert("内容不得为空") ;
//obj.focus() ; //获得焦点
}
}
//-->
</script>
<body>
<input type="text" name="" onfocus = "fun(this)" onblur = "fun1(this)">
</body>5.键盘事件
onkeypress鼠标按下或按住,onkeyup,onkeydown
<script type="text/javascript">
<!--
function fun(obj,e){
//拿到按键的asc码
obj.value = e.keyCode ;
}
//-->
</script>
<body>
<input type="text" name="" onkeypress = "fun(this,event)">
</body>ymkk.keyup(function(event){ //鼠标移入移出事件
cgymk();
});
var cyk = $(":input[name='cs']").eq(1);
$(cyk).change(function() { //改变事件
cgcyk();
}) 6.提交与重置事件
onsubmit,onreset
<script type="text/javascript">
<!--
function check(form){
//拿到文本框中的内容
var txt = form.username.value ;
//判断内容
if(txt == ""){
document.getElementById("sname").innerHTML = " <font color = red>* 姓名必须填写</font>" ;
form.username.focus() ;
return false;
}
return true ;
}
function fun(form){
alert("重置事件") ;
return true ;
}
//-->
</script>
<body>
<form method="post" action="a.html" onsubmit = "return check(this)" onreset = "return fun(this)">
姓名:<input type="text" name="username"><span id = "sname"></span><br>
<input type="submit" value = "提交">
<input type="reset" value = "重置">
</form>
</body>.7选择与改变事件
<script type="text/javascript">
<!--
function fun(obj){
alert(obj.value) ;
}
function fun1(v){
alert(v) ;
}
function fun2(v,index){
alert(v + ":" + index) ;
}
//-->
</script>
<body>
<input type="text" name="" onselect = "fun(this)" onchange = "fun1(this.value)" >
<select onchange = "fun2(this.value,this.selectedIndex)">
<option value = "china">中国</option>
<option value = "america"> 美国</option>
<option value = "japan">日本</option>
</select>
</body>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();
});
});
<input type="button" value="淡出" id="b3"/>
<input type="button" value="淡入" id="b4"/>
<input type="button" value="淡入淡出开关" id="b5"/>
<input type="button" value="透明度" id="b6"/>
<div id="d1" style="width: 100px;height: 100px;background-color: red;margin: 10px;"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: green;margin: 10px;"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: blue;margin: 10px;"></div>
<input type="button" value="向左移动" id="b9"/>
<input type="button" value="动画效果2" id="b10"/>
<input type="button" value="动画效果3" id="b11"/>
<input type="button" value="向左移动" id="b13"/>
<input type="button" value="停止" id="b14"/>
<div id="d6" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div>
其他触发事件
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
<span style="font-size:14px;">$("a.toggle").click(function () {
$("#mydiv").toggle();
return false; // Prevent browser from visiting `#`
}); </span>这个函数使用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() 方法的对比
<body>
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br><br>
<p>执行 .trigger 后 input 输入框自动获取焦点，触发事件的默认行为，而 .triggerHandler 仅仅
执行了指定的事件浏览器并未执行动作，输入框也没有获取焦点。</p>
<input type="text" value="将获取焦点">
<script>
$( "#old" ).click(function() {
$( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
$( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
$( "<span>获取焦点!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
</body>执行 .trigger 后 input 输入框自动获取焦点，触发事件的默认行为，而 .triggerHandler 仅仅 执行了指定的事件浏览器并未执行动作，输入框也没有获取焦点。
触发事件模拟click:
$("button[name='comQue']").each(function(index,item){
$(this).trigger("click");
)}
触发 <input> 元素的 select 事件：
$("button").click(function(){
$("input").trigger("select");
});传递参数
trigger(tpye[,datea])方法有两个参数，第一个参数是要触发的事件类型，第二个单数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
$("#btn").bind("myClick", function (event, message1, message2) { //获取数据
$("#test").append("p" + message1 + message2 + "</p>");
});
$("#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)//捕获阶段执行
<script>
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);
}
</script>
<body>
<div id="outdiv" style="width:200px;height:200px;border:1px solid red;padding:40px">
<div id="innerdiv" style="width:100px;height:100px;border:1px solid blue">
</div>
</div>
</body>动态生成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
<script>
aa()
function test (a,b) {
alert(b);
a.cancelBubble=true;
var obj=a.srcElement ||a.target;//获取目标事件源，少绑定事件
alert(obj.innerHTML);
alert(b);
}
</script>
<body onclick="test(event,'我是ul')">
<div >
<ul >
<li onclick="test(event,'我是ul')">
第一个
</li>
<li >
第二个
</li>
<li>
第三个
</li>
</ul>
</div>
</body>具体使用
表格点击更改单元格内容
<script>
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
}
}
}
}
}
</script>
<body>
<center>
<table border="1px" width="600px" bordercolor="#aaaaaa" cellpadding="5px" cellspacing="0px" id="tab" >
<caption>学生成绩单</caption>
<tr >
<th width="20%">
姓名
</th>
<th width="20%">
性别
</th>
<th width="20%">
班级
</th>
<th width="20%">
科目
</th>
<th width="20%">
分数
</th>
</tr>
<tr >
<td>
张三
</td>
<td>
男
</td>
<td>
96班
</td>
<td>
数学
</td>
<td>
98
</td>
</tr>
<tr >
<td>
张三
</td>
<td>
男
</td>
<td>
96班
</td>
<td>
数学
</td>
<td>
98
</td>
</tr>
<tr>
<td>
张三
</td>
<td>
男
</td>
<td>
96班
</td>
<td>
数学
</td>
<td>
98
</td>
</tr>
</table>
</center>
</body>
事件的绑定
直接在HTML元素绑定
function aa () {
alert("点击");
}
<input type="button" value="改变" id="one" onclick="aa()">在脚本中绑定
var one=document.getElementById("one");
one.onclick=function () {
alert("点击");
}
one.onclick=aa;
alert(aa)
function aa () {
alert("点击");
}
<input type="button" value="改变" id="one" onclick="aa()">绑定事件另一种方式
<script for="two" event="onclick">
alert("我是DIV2");
</script>同一个事件绑定多个事件处理程序
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<obj[att].length; i++) {
obj[att][i]()
}
}
}
addEvent(one,"onclick",function () {
alert("第四次");
})
delEvent(one,"onclick",function () {
alert("第四次");
})
//如何删除多次绑定的方法
function delEvent (obj,types,fns) {
var att="_"+types;
if(typeof obj[types]!="function"){
return;
}else{
for (var i=0; i<obj[att].length; i++) {
if(obj[att][i]+""==fns+""){
obj[att].splice(i,1);
}
}
return obj;
}
} IE:
对象.attachEvent("事件(on)","处理程序") 添加事件
对象.dettachEvent("事件(on)","处理程序") 删除事件
one.attachEvent("onclick",aa);
one.attachEvent("onclick",bb);
function aa () {
alert("aa");
}
function bb() {
alert("bb");
}
one.detachEvent("onclick",bb)
one.attachEvent("onclick",function () {
alert("cc");
});
one.detachEvent("onclick",function () {
alert("cc");
}); FF
对象.addEventListener("事件(on)","处理程序") 添加事件
对象.removeEventListener("事件(on)","处理程序") 删除事件
one.addEventListener("click",bb,false)
one.addEventListener("click",aa,false)
one.addEventListener("click",function () {
alert("cc");
},false)
one.removeEventListener("click",function () {
alert("cc");
},false)
function aa () {
alert("aa");
}
function bb() {
alert("bb");
}
function IEFF (obj,types,fns) {
if(document.all){
return obj.attachEvent("on"+types,fns);
}else{
return obj.addEventListener(types,fns,false);
}
}
}on方法进行绑定
$(".con1 input[type=text]").on('keydown', function (e) {
console.log(e.target)
if(e.keyCode == 13) {
console.log(e.keyCode)
$(this).blur();
}
})keydown事件在绑定时，.con1这个元素还不在DOM中。为了实现对页面第一次渲染完成之后被js动态生成的元素做事件绑定，要用jquery的on()方法：
JQuery的hover方法是mouseenter和mouseleave事件的简略写法罢了
jquery禁用事件
有时候不想用户频繁的进行点击操作，会在点击后对按钮的点击操作进行禁用
第一种方法通过js的disabled对禁用按钮的点击事件
$("#save").click(function(){
$(this).attr("disabled", true);
})contenteditable可设置元素是否可被修改,iscontenteditable返回是否可修改的状态.
isdisabled判断是否为禁止状态.disabled设置禁止状态 第二种方法设置定时器在一个时间段内控制按钮，向下面的在6秒内不能重复点击了
setTimeout(): 隔一段时间调用某个函数(只调用一次)
$("#save").click(function(){
timer = setTimeout(function(){
$("#save").attr("disabled", false);
},6000);
})第三种事件的绑定与解除
var Value = $("#Value").val();
if(Value!=""){
$("#tjButton").removeAttr('onclick');
$("#tjButton p").html("已提交");
}
