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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
jquery构造器的实现代码小结
May 16 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
js模拟F11页面全屏显示
Sep 17 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制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
js数组的操作指南
2014/12/28 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
学习python (1)
2006/10/31 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
python 实现倒排索引的方法
2018/12/25 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
大专自我鉴定范文
2013/10/23 职场文书
活动邀请函范文
2014/01/19 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
美术教师求职信范文
2015/03/20 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server