`
talentluke
  • 浏览: 606682 次
  • 性别: 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事件是JavaScript编程中至关重要的一个概念，它用于响应用户或浏览器的行为，如点击、滚动、键盘输入等。本文将详细解析JavaScript事件的几个关键点：异步回调、事件对象、`this`关键字以及事件冒泡的管理...

    javascript事件处理模型实例说明

    通过上述的说明，我们可以看到，虽然IE和火狐在添加和删除事件监听器方面有所不同，但通过一些技巧和工具类（如 `EventUtil`），我们可以编写出兼容不同浏览器的事件处理代码。这些知识点对于前端开发人员来说至关...

    javascript重复绑定事件造成的后果说明.docx

    在进行Web前端开发时，事件处理是非常重要的一部分。合理的事件绑定能够提高用户体验，而错误的事件绑定则可能导致各种问题，比如性能下降、功能异常等。本文将详细介绍在JavaScript中重复绑定事件所带来的后果，并...

    javascript触发模拟鼠标点击事件

    通过本文提供的示例和详细说明，相信读者能更好地理解JavaScript中模拟触发鼠标点击事件的原理和实现方法，并在自己的项目中加以应用。需要注意的是，虽然模拟事件触发在很多情况下非常有用，但过度使用或不当使用...

    javascript经典特效---动态状态栏说明.rar

    3. 定时器：`setTimeout`和`setInterval`是JavaScript中用于延迟或周期性执行任务的重要工具。它们可以在指定的时间间隔后执行函数，常用于实现动画效果或持续更新的状态栏。 在"动态状态栏说明.htm"这个文件中，...

    javascript中文帮助文档

    8. **事件和事件处理**：JavaScript通过事件监听和处理函数来响应用户或浏览器的行为。 9. **DOM操作**：Document Object Model允许JavaScript操作HTML或XML文档，添加、删除、修改元素。 10. **闭包**：一种特殊的...

    JavaScript 事件记录使用说明

    JavaScript 事件记录是Web开发中的重要概念，它允许开发者捕捉并响应用户在网页上的各种交互行为。通过事件，JavaScript能够监听用户的动作，并在特定事件发生时执行相应的代码，从而实现动态效果和交互功能。 首先...

    js大全,javascript说明

    本文将深入探讨“事件源对象”、“捕获释放”、“事件按键”、“事件返回值”以及“窗体活动元素”这些JavaScript中的重要概念。 一、事件源对象（Event Source Object） 在JavaScript中，当一个事件发生时，我们会...

    javascript的一些实例

    以下是一些关于JavaScript的基本概念、常用功能以及一些实例的详细说明。 1. **变量与数据类型** JavaScript支持动态数据类型，这意味着你不需要预先声明变量的数据类型。`var`, `let`, 和 `const` 是声明变量的...

    javascript混淆,javascript压缩,javascript加密软件

    `使用说明.txt`可能包含关于如何使用`hdjso.exe`进行JavaScript压缩的指南。 **JavaScript加密**： JavaScript加密是一种更高级的安全措施，它不仅使代码难以阅读，还可能涉及到对代码逻辑的加密，使其在未解密前...

    photoshop-cc-javascript参考2019

    总的来说，Photoshop CC JavaScript参考2019是开发者深入学习和实践Photoshop脚本开发的重要资源。通过这个指南，开发者可以学习如何利用JavaScript和ECMAScript的强大功能，提高图像处理的工作效率，创建个性化的UI...

    javascript经典特效---有说明的下拉菜单.rar

    本资源“javascript经典特效---有说明的下拉菜单.rar”聚焦于使用JavaScript实现具有说明性的下拉菜单效果，这对于我们理解JavaScript动态交互设计至关重要。 首先，下拉菜单的基本结构通常由HTML构建，包括`&lt;ul&gt;`...

    javascript五子棋

    7. **事件监听与处理**：JavaScript的事件监听机制使得游戏能够响应用户的点击操作，如棋子的选取和放置，同时也能监听到服务器发送过来的其他玩家的操作信息。 8. **游戏逻辑算法**：五子棋游戏的核心是其游戏规则...

    javascript源码.rar

    在这个场景下，它可能包含关于源码的许可信息，如何贡献代码，或是对JavaScript10.chm中未涵盖的重要概念的补充说明。 在学习这个压缩包中的内容时，你可能会接触到以下几个JavaScript的知识点： 1. **基础语法**...

    javascript css html 中文帮助手册

    以下是对这些技术的详细说明： **HTML（HyperText Markup Language）** HTML是网页的基础，用于定义页面的结构和内容。HTML文档由一系列元素（tags）组成，这些元素以开始标签和结束标签的形式存在，例如`&lt;p&gt;`和`...

    浏览器与JavaScript事件循环及消息队列执行机制详解

    最后讨论了JavaScript单线程特性的优势与局限性，指出了同步与异步任务处理的不同方式对程序流畅性的重要意义，并指出浏览器具体实现中的细节差异。通过具体的案例分析加深了对事件循环机制的理解。还探讨了由于...

    JavaScript基础回顾(1)

    JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在客户端脚本方面，它的重要性不言而喻。在“JavaScript基础回顾(1)”中，我们将会深入探讨JavaScript的基础知识，为后续的学习打下坚实的基础。 首先，...

    javascript

    本压缩包包含了一些JavaScript精彩实例，这些实例有助于理解JavaScript在实际应用中的功能和用法。 `dir.htm`可能是一个目录页，列出了压缩包内所有文件的结构和简要说明，便于用户快速定位所需内容。`main.htm`...

    javascript 帮助手册学习

    JavaScript帮助手册是学习和理解这种语言的重要参考资料，提供了全面的语法、函数、对象和API的详细说明。 JavaScript语法基础： JavaScript基于ECMAScript规范，其语法类似于C++和Java。它包含变量声明（var, let,...

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