第四章 JQuery 中的事件和动画

最新推荐文章于 2021-02-24 16:18:18 发布

凌珞

最新推荐文章于 2021-02-24 16:18:18 发布

阅读量587

点赞数

分类专栏： CSS 和JS

本文链接：https://blog.csdn.net/dyp330/article/details/45031695

版权

CSS 和JS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

先讲解下JS中的事件监听,缺点：兼容性比较差

以下是IE中的事件监听，只能在IE中进行使用

function fnClick1(){

alert("我被fnClick1点击了");

}

function fnClick2(){

alert("我被fnClick2点击了");

//oP.detachEvent("onclick",fnClick1); //删除监听函数1

}

var oP;

window.onload = function(){

oP= document.getElementById("myP"); //找到对象

oP.attachEvent("onclick",fnClick1); //添加监听函数1

oP.attachEvent("onclick",fnClick2); //添加监听函数2

}

以下是既可以在IE中也可以在火狐中使用的监听事件：

function fnClick1(){

alert("我被fnClick1点击了");

//oP.removeEventListener("click",fnClick2,false); //删除监听函数2

}

function fnClick2(){

alert("我被fnClick2点击了");

}

var oP;

window.onload = function(){

oP= document.getElementById("myP"); //找到对象

oP.addEventListener("click",fnClick1,false); //添加监听函数1

oP.addEventListener("click",fnClick2,false); //添加监听函数2

}

4.1.2事件绑定—无需考虑兼容性

bind(type [,data], fn)的方法，方法有3个参数，第一个是事件，比如：blur,focus,load,select, change,submit,error等；第二个参数可选参数，做为event.data属性值传递给事件的额外数据对象。第三个参数是绑定的处理函数

toggle()方法，我测试中发现一个jquery-1.11.2.js版本的一个问题，无论用什么浏览器这个方法都没法使用，打开页面使用这个方法的部分就会全部逐渐隐藏，和书上说的不一致哦~代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"><head>

<scripttype="text/javascript">

$(function(){

$("#panel h5.head").toggle(function(){

$(this).addClass("highlight");

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

},function(){

$(this).removeClass("highlight");

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

});

})

</script>

</head>

<body>

<h5class="head">什么是jQuery?</h5>

<divclass="content">

jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 JohnResig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

</div>

</body>

</html>

我暂时没有太好的办法解决，只能不使用toggle(),或者降低版本，如果大家有好办法欢迎评论哦！！！

1.1.4 冒泡事件

l 冒泡事件说明：就是多个元素具有相同的事件，例如多个div嵌套，但是每一层都有个click()方法，这样的代码就可以叫冒泡事件了。

冒泡事件需要注意：1.每个事件都需要有自己的终止方法，运行完后自动销毁事件对象例如：

$('span').bind("click",function(event){

vartxt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

$('#msg').html(txt);

event.stopPropagation(); // 阻止事件冒泡

});

l 阻止默认行为，例如点击<a>标签默认调整到指定的href中去，这个时候如果不需要调整就需要用到阻止行为事件。可以直接写 return false;当然书上写的event.stopPropagation()也可以

4.1.5事件对象的属性

属性名称	事件的属性说明	举例
event.type	可以获取到实际的类型	$(“a”).click(function(event){alert(event.type); return false;})
event.preventDefault()	阻止默认行为	无
event.target	获取到触发事件的元素	$(“a[title=’test1’]”).click(function(event){alert( event.target); return false;})
event.relatedTarget	event.relatedTarget属性返回当鼠标移动时哪个元素进入或退出。（W3CSchool中定义http://www.w3cschool.cc/jquery/jq-event-relatedtarget.html）
event.pageX和event.pageY	获取到光标相对页面的x和y坐标	$(".content").click(function(event){ alert(event.pageX+","+event.pageY);return false;})
event.which	获取鼠标的单击事件中鼠标左中右键	$(".content").mousedown(function(event){ alert(event.which);return false;}) //1左键 3表示右键 2表示中间键（鼠标没有中间键所以没有测试。）
event.metaKey	为键盘中的ctrl键	经过测试无法获取到ctrl键，一直提示false，各位如果有测试成功的评论告诉我下，我也习下。

Event.metaKey 在http://www.w3cschool.cc/jsref/event-metakey.html这里说的和书中有所出入~本博客仅供参考

4.1.6移除事件绑定

$(“#test”).unbind(type,[,data]);

4.1.7 模拟操作

自动触发的方法：trigger(type,[,data])，既可以触发自带的方法也可以触发自定义的方法。

bind() 方法也可以绑定自定义的方法

添加事件命名空间，此命名空间自行定义，优势就是把多个方法可以批量删除

凌珞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四章 JQuery 中的事件和动画

4.1.2事件绑定bind(type [,data], fn)的方法，方法有3个参数，第一个是事件，比如：blur,focus,load,select, change,submit,error等；第二个参数可选参数，做为event.data属性值传递给事件的额外数据对象。第三个参数是绑定的处理函数 toggle()方法，我测试中发现一个jquery-1.11.2.js版本的一个问题
复制链接

扫一扫