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.csu.edu.cn">重载浏览器的默认行为</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中事件的一些重要说明的更多相关文章

  1. javascript中事件概述

    事件就是用户或浏览器自身执行的某种动作.诸如click.load.和mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器).事件处理程序的名字以"on&q ...

  2. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  3. Android与javascript中事件分发机制的简单比较

    在前面两篇博客中,我们讨论了Android中的事件分发的相关内容,那么在本篇博客当中,我们就简单探讨一下html或javascript中的事件分发机制,并进行简单的对比. 在前端中,对事件进行绑定有三 ...

  4. JavaScript中事件委托(事件代理)详解

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

  5. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

  6. JavaScript 中事件对象参数：clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  7. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  8. 浅谈javascript中事件冒泡与事件捕获

    事件冒泡:一个事件会顺着他的层级一直往上传,一直传到document上为止,即从盒模型上看是从内到外的过程. 例: <!DOCTYPE html><html lang="e ...

  9. JavaScript中事件绑定的三种方式

    JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...

  10. 专题8：javascript中事件

    一.事件流 1.1 事件冒泡 冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标的顺序逐一触发: 注意:各个浏览器在处理<html>标记级别的事件时顺序有出入,因此无论任何情况,都 ...

随机推荐

  1. WPF应用程序启动的问题(自定义Main函数启动)

    问题引入: 一般WPF创建之后可以直接运行并不需要编写Main函数指定入口,但是在开发的过程中会遇到一些情况需要自定义Main让WPF从指定的Main函数中进行启动,这样可能会更好控制一点.但是我们再 ...

  2. [AngularFire2] Auth with Firebase auth -- email

    First, you need to enable the email auth in Firebase console. Then implement the auth service: login ...

  3. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  4. javascript数组全排列,数组元素所有组合

    function permute(input) { var permArr = [], usedChars = []; function main(input){ var i, ch; for (i ...

  5. Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法

    对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除.1.在CSS中写入代码.找到相关性的CSS,在..li和. ...

  6. QT代理Delegates使用实例（三种代理控件）

    效果如下,在表格的单元格中插入控件,用Delegates方式实现 源代码如下: main.cpp文件 #include <QApplication>#include <QStanda ...

  7. js如何实现动态点击改变单元格颜色？

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  8. [NPM] Make npm scripts cross-environment friendly

    Unfortunately not all shell commands work across various environments. Two main techniques to suppor ...

  9. 【vs调试】PDB 文件：每个开发人员都必须知道的

    [vs调试]PDB文件:每个开发人员都必须知道的 GDB:The GNU Project Debugger, 将会包含代码中符号(自定义变量, 数据类型), 还有函数调用或类引用的关联性, 有了pdb ...

  10. NSArray NSMutableArray 初始化

    NSArray* Array;//此时数组没有初始化,数组＝nil [Array objectAtIndex:2];//不会调用其属性方法,这里不会崩溃 NSMutableArray *Mutable ...