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 DOM模型操作
Dec 28 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
js动态切换图片的方法
Jan 20 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php 引用(&amp;)详解
2009/11/20 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
详解AngularJS控制器的使用
2016/03/09 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Django 外键的使用方法详解
2019/07/19 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
python函数定义和调用过程详解
2020/02/09 Python
实现向右循环移位
2014/07/31 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
亲子拓展活动方案
2014/02/20 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
中学生励志演讲稿
2014/04/26 职场文书
白莲教口号
2014/06/18 职场文书
超市促销活动总结
2014/07/01 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
子女赡养老人协议书
2016/03/23 职场文书
员工升职自我评价
2019/03/26 职场文书
五年级作文之成长
2019/09/16 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers