先讲解下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>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>4-3-2</title>
<script type="text/javascript"src="JQ/jquery-1.11.2.js"></script>
<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>
<div id="panel">
<h5class="head">什么是jQuery?</h5>
<divclass="content">
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 JohnResig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</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() 方法也可以绑定自定义的方法
添加事件命名空间,此命名空间自行定义,优势就是把多个方法可以批量删除