JavaScript 事件的一些重要说明


Posted in Javascript onOctober 25, 2009

1,JavaScript异步回调

<script language="javascript"> 
//注册回调函数loaded到处理函数window.onload上 
window.onload = loaded; 
//把方法window.alert地址传递给show函数 
var show = window.alert; 
function loaded(){ 
show("success"); 
} 
</script>

2,事件对象

下面的js实现当在textarea文本框里面键入回车时,并不导致换行。即禁用回车键

<textarea ></textarea> 
<script language = "javascript"> 
/* 
事件的对象的棘手部分在于,IE的实现与W3C的规范有查表。IE使用一个独立的全局事件对象(它可以再全局变量属性window.event中找到),而其他浏览器则使用独立的包含事件对象的参数传递。 
*/ 
document.getElementsByTagName("textarea")[0].onkeypress = function(e) 
{ 
//如果不存在事件对象,则获取全局的(仅IE)的对象 
var e = e || window.event; 
//如果敲击了回车键,返回false(使它不发生任何行为) 
return e.keyCode != 13; 
} 
</script>

3,this关键字

浏览器会把this关键字等同于引用该函数(含有this关键字的函数)的当前元素

<body> 
<div id = "body"> 
<ul class = "links"> 
<li> 
<a href = "/">Home</a> 
</li> 
<li> 
<a href = "./">mappath</a> 
</li> 
<li> 
<a href = "../">parentpath</a> 
</li> 
</ul> 
</div> 
</body> 
<script language = "javascript"> 
var li = document.getElementsByTagName("li"); 
for (var i = 0; i < li.length; i++) 
{ 
li[i].onclick = handeClick; 
} 
function handeClick() 
{ 
this.style.backgroundColor = "blue"; 
this.style.color = "red"; 
} 
</script>

4,取消事件冒泡

通常当你对子元素作样式作修改,或者触发事件,根据冒泡原理,其父元素也会作相同改变,为防止这类事情发生,需要做取消事件冒泡的处理。

下面实例展示了鼠标会为其悬停的当前元素加上红色的边框。如果不阻止事件冒泡的话,每次把鼠标移到一个元素上时,该元素及其父元素都会有红色的边框,这是我们不希望看到的。

<body> 
<div id = "body"> 
<ul class = "links"> 
<li> 
<a href = "/">Home</a> 
</li> 
<li> 
<a href = "./">mappath</a> 
</li> 
<li> 
<a href = "../">parentpath</a> 
</li> 
</ul> 
</div> 
</body> 
<script language="javascript"> 
//阻止冒泡的通用函数 
function stopBubble(e) 
{ 
if (e && e.stopPropagation) 
//w3c方法 
e.stopPropagation(); 
else 
//ie方法 
window.event.cancelBubble = true; 
} 
var li = document.getElementsByTagName("*"); 
for (var i = 0; i < li.length; i++) 
{ 
//监听用户鼠标,当移动到元素上时,为元素加上红色边框 
li[i].onmouseover = function(e) 
{ 
this.style.border = "1px solid red"; 
stopBubble(e); 
} 
//检查用户鼠标,当移开元素时,删除我们加上的边框 
li[i].onmouseout = function(e) 
{ 
this.style.border = "0px"; 
stopBubble(e); 
} 
} 
</script>

5,重载浏览器的默认行为

浏览器都有这种默认的行为,即当我们在<a>标签上点击的时候会链接到href属性的地址上,有的时候我们并不希望这种事情发生,而想实现我们自己的效果,比如弹出警告框,示例如下。

<a href = "https://3water.com">重载浏览器的默认行为</a> 
<script language = "javascript"> 
/* 
为了达到同<a href = "#" onclick = function(){alert("success");}>content</a>相同效果 
*/ 
function stopDefault(e) 
{ 
//W3C防止浏览器默认行为 
if (e && e.preventDefault) 
e.preventDefault(); 
//IE防止浏览器默认行为 
else 
window.event.returnValue = false; 
return false; 
} 
var a = document.getElementsByTagName("a"); 
for (var i = 0; i < a.length; i++) 
{ 
a[i].onclick = function(e) 
{ 
alert("我已经修改了浏览器的默认行为了"); 
return stopDefault(e); 
//好像直接写下面一句也可以 
//return false; 
} 
} 
</script>

6,事件的亲和力(accessibility,又称可访问性)

为了使得自己的网站更有亲和力,可以这样考虑,当我们把鼠标放在一个元素上或者通过键盘的tab键访问时,其样式应该保持一致,如下代码

<body> 
<div id = "body"> 
<ul class = "links"> 
<li> 
<a href = "/">Home</a> 
</li> 
<li> 
<a href = "./">mappath</a> 
</li> 
<li> 
<a href = "../">parentpath</a> 
</li> 
</ul> 
</div> 
</body> 
<script language="javascript"> 
var a = document.getElementsByTagName("a"); 
for (var i = 0; i < a.length; i++) 
{ 
//绑定鼠标悬停和聚焦事件处理函数到<a>元素上 
//当用户把鼠标悬停到链接上,或者(使用键盘)聚焦到链接上时,它会把<a>的背景颜色变成蓝色 
a[i].onmouseover = a[i].onfocus = function() 
{ 
this.style.backgroundColor = "blue"; 
} 
//绑定鼠标离开和模糊事件处理函数到<a>元素上 
//当用户从链接移开时,它会把<a>的背景颜色变成白色 
a[i].onmouseout = a[i].onblur = function() 
{ 
this.style.backgroundColor = "white"; 
} 
} 
</script>

7,绑定事件监听
//addEventt()添加事件 
//Scott Andrew's original addEvent() function 
//elm元素,document.getElementId('btn1') 
//evType事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on",如Click 
//fn当然就是绑定的函数了,记住不要跟括号,如showalert 
//useCapture布尔值,表示该事件的响应顺序.userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式.建议用false 
function addEvent(elm, evType, fn, useCapture) 
{ 
if (elm.addEventListener) 
{//firefox,navigation,etc.. 
elm.addEventListener(evType, fn, useCapture); 
} 
else if (elm.attachEvent) 
{//IE 
var r = elm.attachEvent('on' + evType,fn); 
} 
else 
{ 
elm['on' + evType] = fn; 
} 
} 
//removeEvent()注销事件 
//参数名同addEvent()函数 
function removeEvent(elm, evTye, useCapture) 
{ 
if (elm.detachEvent) 
{ 
elm.detachEvent('on' + evType); 
} 
else if (elm.removeEventListener) 
{ 
elm.removeEventListener(evType, userCapture); 
} 
}
Javascript 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
如何编写高质量JS代码
Dec 28 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
javascript写的一个链表实现代码
Oct 25 #Javascript
JavaScript的变量作用域深入理解
Oct 25 #Javascript
理解JavaScript变量作用域更轻松
Oct 25 #Javascript
理解 JavaScript 预解析
Oct 25 #Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 #Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 #Javascript
javascript window对象属性整理
Oct 24 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php-app开发接口加密详解
2018/04/18 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python的pycurl包用法简介
2015/11/13 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python如何删除文件中重复的字段
2019/07/16 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
西湖英语导游词
2015/02/06 职场文书
开场白怎么写
2015/06/01 职场文书
初二英语教学反思
2016/02/15 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Python图像处理库PIL详细使用说明
2022/04/06 Python