`
talentluke
  • 浏览: 592737 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript事件的一些重要说明

JavaScriptIE浏览器FirefoxAccess
阅读更多

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 = "http://www.jb51.net">重载浏览器的默认行为</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);
}
}
分享到：
| js 覆盖和重载函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript 事件的一些重要说明

    关于JavaScript中事件的一些重要说明,需要的朋友可以参考下。

    Maintainable+JavaScript(编写可维护的JavaScript)

    　《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码，书中详细说明了作为团队一分子，应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几...

    编写可维护的JavaScript

    　《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码，书中详细说明了作为团队一分子，应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几...

    javascript写的windows资源管理器

    这里需要说明的是很少用到了innerHTML和innerTEXT两个方法，这是微软提供的专利方法，还没有得到W3C的认可， 在别的浏览器里面这两个方法不一定会被支持。 所以很多地方是用了DOM的方式进行处理。 首次的功能有： 1....

    2024年学习JavaScript这一篇就够了.zip

    此外，还强调了参与JavaScript社区的重要性。通过这个教程，读者可以对JavaScript有一个全面的理解，并为未来的深入学习打下坚实的基础。 ### 适用人群 本博客适合对前端开发和JavaScript感兴趣的初学者。无论你是...

    Google-JavaScript-编码规范指南

    此外，Google JavaScript编码规范指南还强调了代码性能和可维护性的重要性。它提倡使用高效的数据结构和算法，避免不必要的性能开销；同时，也鼓励开发者编写可重用的代码，减少重复劳动，提高开发效率。 对于初学...

    JavaScript 注释.docx

    注释语句在JavaScript中用来解释代码或者添加说明，对于代码的可读性和维护性都非常重要。在开发过程中，良好的注释习惯可以帮助其他开发者更快地理解代码，也方便自己在以后的维护中快速定位问题。

    Awesome-JavaScript-Projects：此存储库包含很棒的原始JavaScript项目

    您是否正在寻找一些很棒的Javascript项目，每个项目都将教给您一个重要的Javascript概念？ 您是否想为一些Awesome Javascript项目做出贡献并通过它展示您的Javascript技能？ :star-struck: 然后，你来对了！ 很...

    用javascript写的windows资源管理器

    &lt;br&gt;功能不是最重要的，本功能在windows资源管理器都能轻易做到，相信没人用这个做资源管理器吧，呵呵~~ &lt;br&gt;主要是为了让javascript，DOM，CSS良好的呈现一种网页组织，真正的使 “结构”，“行为”，...

    Javascript优化技巧（文件瘦身篇）

    结合从书中获得的知识以及本人实际开发过程中的经验，下面说明本人所采取的一些花招（也算是照本宣科一下）。 前言 相比脚本语言，编译型的语言并不需要太关心优化问题。在极大的程度上，编译时编译器都会之行优化...

    lotus domino AJAX json获取视图列重要说明

    lotus domino AJAX json获取视图列重要说明

    JavaScript：Namaste JS和Core JS

    JavaScript Namaste JS和Core JSAkshay Saini的Namaste JS的重要说明和概念对于采访非常有帮助，请随时推荐他们

    JavaScript中var的重要性实例分析

    本文实例讲述了JavaScript中var的重要性。分享给大家供大家参考，具体如下： 在JS中申明变量是使用var来进行申明，但是有的时候我们没有使用var也可以。这是为什么呢？我来给大家细细的说来。 var的本质 var的本质...

    js-goodies:一些JavaScript的东西

    重要说明： 仍然不是HTML中的内置API。 “替换”是一种广泛使用的方法（因为它没有额外的依赖性） underscore具有内置支持。 起源 miniEventEmitter 自制的EventEmitter是自然需要像Backbone这样的完整框架的...

    contacts-filter:示例小部件以说明JavaScript组件的演变

    该存储库的历史证明了客户端JavaScript小...这是尝试说明从前者到后者的路径实施的目的不是完美无缺，而仅仅是为了教育目的突出重要的结构方面演示： : 测试套件： : 入门安装npm install和bower install下载第三方组件

    Hands-on-JavaScript-for-Python-Developers:Packt发布的面向Python开发人员的动手Java脚本

    Python知识是学习其他语言的重要基础。 本书将利用您的Python编程技能来学习JavaScript，并将其独特的功能不仅用于前端Web开发，而且还用于简化后端的工作，从而帮助您在软件工程领域发展。 本书涵盖以下激动人心的...

    JavaScript类和继承 this属性使用说明

    本文介绍了JavaScript里面的this属性。这个属性是理解JavaScript类和继承的重要基础。

    tui.calendar：JavaScript具有您所需一切JavaScript日历

    功能齐全JavaScript日程安排日历。 现在，您的服务刚刚获得了可自定义的日历。 :triangular_flag: 目录 收集有关使用开源的统计信息 TOAST UI日历应用Google Analytics（分析）（GA）来收集有关开放源代码使用情况...

Magicbox
Global site tag (gtag.js) - Google Analytics