Jquery中的事件

Posted 2020-11-02 zhouyeqin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery中的事件相关的知识，希望对你有一定的参考价值。

Jquery中的事件

ü JQuery中用什么方法来来实现事件的绑定？

bind(type,[,data],fn)

ü JQuery中合成事件的方法有哪个？

Hover()

ü JQuery中最基本的动画方法有几个？是什么方法？

show(),hide()

ü JQuery中怎样自定义动画方法？

animate()

ü JQuery中专门用于交互的其他方法有哪些？

toggle()、slideToggle()、fadeTo()

一、绑定事件

在文档装载完后，如果打算为元素绑定事件来完成某些操作，就可以用到Bind()方法来匹配元素进行特定的绑定事件

二、合成事件

jQuery有个合成事件的方法，hover()类似于ready()方法，它们都属于jQuery中的自定义方法

Hover(enter,leave)方法的语法：

Enter:当光标移动到该元素是发生

Leave:光标移除是发生

注意：hover()方法准确的说是代替了jQuery()中的bind(“mouseenter”)和bind(“mouseleave”)

<!DOCTYPE html>

<html>

<head>

#panel{

width:400px;

height:400px;

border:1px solid black

}

.head{

height:30px;

background:pink;

border:1px solid black

}

.content{

border:1px solid balck;

display:none

}

</style>

$(function(){

//绑定事件:点击head内容显示

/* $(".head").bind("click",function(){

$(this).next(".content").show(2000);

}); */

//合成事件hover:根据光标显示或隐藏内容

/* $(".head").hover(function(){

$(this).next(".content").show();

},function(){

$(this).next(".content").hide();

}); */

//toggle：显示隐藏依次起作用

/* $(".head").bind("click",function(){

$(".content").toggle();

}); */

});

</script>

</head>

<body>

<h5 class="head">什么是jQuery</h5>

jQuery是一套封装js的框架，它的语法简单，使用方便。

如果完全自己编写js代码的话可能会出现很多问题，比如浏览器问题

</div>

</body>

</html>

三、事件冒泡

页面上可以有多个事件，也可以有多个元素响应同一个事件元素之间的嵌套点击最里层的元素就会触发每一个单击事件，且每一个元素都会按一定的顺序响应。

<!DOCTYPE html>

<html>

<head>

<title>事件的冒泡.html</title>

$(function(){

$("body").click(function(){

alert("body click");

});

$("div").click(function(){

alert("div click");

//return false;

});

$("span").click(function(event){

alert("span click");

//停止事件冒泡(一)

//return false;

//停止事件冒泡

//event.stopPropagation();

});

</script>

</head>

<body>

外层div元素<br>

<span style="background:pink">span内层元素</span><br>

外层div元素<br>

</div>

</body>

</html>

四、事件对象的属性（作用）

JQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。首先我们来了解一下这些方法、属性和他的作用：

(1)event.type属性:是用于获取事件的类型,例如：click

(2)event.preventDefault()方法:在jQuery中，提供preventDefault()方法来阻止元素的默认行为。

(3)event.stopPropagation()方法:在事件中我们可以用stopPropagation()方法来停止事件

(4)event.target属性:获取绑定事件的DOM元素

(5)event.relatedTarget属性:获取移入移出目标点离开或进入的那个DOM元素

(6)event.pageX属性/event.pageY属性:这个方法的作用是获得光标相对于页面的x坐标和y坐标

(7)event.which属性:获取鼠标的左中右键（1,2,3），在键盘事件中获取键盘的按键

(8)event.metaKey属性:键盘事件中获取<ctrl>按键

(9)event.originalEvent属性:是指向原始的事件对象

<!DOCTYPE html>

<html>

<head>

<title>事件对象的属性.html</title>

$(function(){

/* $("a").click(function(e){

//1获取事件的类型

alert(e.type);

//停止默认事件

//return false;

e.preventDefault();

}); */

//2提供preventDefault()方法来阻止元素的默认行为。

/* $("#sub").click(function(e){

var username=$("#username").val();

if(username == ""){

$("#msg").html("<p>用户名不能为空</p>").css({color:"red"});

e.preventDefault();

}

}); */

//3可以用stopPropagation()方法来停止事件---事件的冒泡.html

//4(4)event.target属性

//获取绑定事件的DOM元素

/* $("#a1").click(function(event){

alert(event.target.nodeName);

}); */

//(5)relatedTarget属性

//获取移入移出目标点离开或进入的那个DOM元素

//对于mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。

//对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。

/* $(".div1").mouseover(function(event){

$(this).css({width:"200px",height:"200px"});

alert(event.relatedTarget.nodeName);

}); */

//6event.pageX属性/event.pageY属性

//这个方法的作用是获得光标相对于页面的x坐标和y坐标

/* $("body").click(function(event){

alert("X:"+event.pageX+",Y:"+event.pageY);

}); */

//7event.which属性

//获取鼠标的左中右键（1,2,3），在键盘事件中获取键盘的按键

/* $("body").mousedown(function(event){

alert(event.which);

}); */

/* $("#inp1").keyup(function(event){

alert(event.which);

}); */

//8event.metaKey属性

//键盘事件中获取<ctrl>按键

/* $("body").click(function(event){

//alert(event.ctrlKey);

//alert(event.shiftKey);

alert(event.altKey);

}); */

});

</script>

</head>

<body>

用户名<input type="text" id="username">

</form>

<span>span元素</span><br>

</body>

</html>

五、移除事件unbind（）

功能：将定义的事件移除

首先看看unbind()方法的语法结构：unbind([type][,data]);

第一个参数是事件类型，第2个参数是将要移除的函数，具体说明如下。

（1）如果没有参数，则删除所有绑定的事件。

（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件。

（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

<!DOCTYPE html>

<html>

<head>

$(function(){

/* $("#btn").bind("click",function(){

$("#test").append("<p>绑定函数1</p>");

}).bind("click",function(){

$("#test").append("<p>绑定函数2</p>");

}).bind("mouseover",function(){

$("#test").append("<p>绑定函数3</p>");

}); */

/* $("#del").click(function(){

//1、如果没有参数，则删除所有绑定事件

//$("#btn").unbind();

//2、如果提供了事件类型作为参数，则只删除该类型的绑定事件

//$("#btn").unbind("click");

}); */

//3、如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除

/* $("#btn").bind("click",myFun1=function(){

$("#test").append("<p>绑定函数1</p>");

}).bind("click",myFun2=function(){

$("#test").append("<p>绑定函数2</p>");

}).bind("mouseover",myFun3=function(){

$("#test").append("<p>绑定函数3</p>");

});

$("#del").click(function(){

$("#btn").unbind("mouseover",myFun3);

}); */

});

</script>

</head>

<body>

</body>

</html>

六、事件的模拟操作

<!DOCTYPE html>

<html>

<head>

<title>事件的模拟操作.html</title>

$(function(){

/* $("#btn").bind("click",function(){

$("#test").append("<p>绑定函数1</p>");

}).bind("click",function(){

$("#test").append("<p>绑定函数2</p>");

}).bind("mouseover",function(){

$("#test").append("<p>绑定函数3</p>");

}); */

//自定义事件

/* $("#btn").bind("yuzijieclick",function(){

$("#test").append("<p>绑定函数，自定义</p>");

}); */

//定义带参数的事件

/* $("#btn").bind("yuzijieclick",function(event,data1,data2){

$("#test").append("<p>"+data1+data2+"</p>");

}); */

//定义focus事件

$("input").focus(function(){

$("<p>获得焦点</p>").appendTo("body");

});

//1 事件的模拟：trigger()

//$("#btn").trigger("click");

//2 自定义事件的触发：trigger()

//$("#btn").trigger("yuzijieclick");

//3 触发的时候传递数据：trigger(type[,data])

//$("#btn").trigger("yuzijieclick",["good ","boy"]);

//4 事件触发后，是否执行默认操作：trigger() and triggerHandler()

//trigger()：触发事件，执行回调函数里面的内容，同时执行默认行为，比如得到焦点

//triggerHandler()：触发事件，执行回调函数里面的内容，不执行默认行为，比如不会得到焦点

//$("input").trigger("focus");

$("input").triggerHandler("focus");

});

</script>

</head>

<body>

<button id="trigger">trigger()</button>

</body>

</html>

七、事件的其他操作

<!DOCTYPE html>

<html>

<head>

<title>事件的其他操作.html</title>

.over{

background:red

}

</style>

$(function(){

//1绑定多个事件类型

/* $("div").bind("mouseover mouseout",function(){

$(this).toggleClass("over");

}); */

//等同于下面所示代码

/* $("div").bind("mouseover",function(){

$(this).toggleClass("over");

});

$("div").bind("mouseout",function(){

$(this).toggleClass("over");

}); */

//2添加事件命名空间,便于管理

/* $("div").bind("click.plugin",function(){

$("body").append("<p>click 事件</p>");

});

$("div").bind("mouseover.plugin",function(){

$("body").append("<p>mouseover事件</p>");

});

$("button").click(function(){

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

//$("div").unbind(".plugin");

//$("div").unbind("click").unbind("mouseover");

}); */

});

</script>

</head>

<body>

</body>

</html>

以上是关于Jquery中的事件的主要内容，如果未能解决你的问题，请参考以下文章

Jquery中的事件

jQuery中的事件与驱动

使用jQuery快速高效制作网页交互特效——07 第七章 jQuery中的事件与动画

第三章 jQuery中的事件与动画

锋利的jQuery ——jQuery中的事件和动画

jQuery中的事件