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. word vba 1 页面视图

  2. LUA凝视语法

    server端代码已经完毕,client正在优化.游戏不久将上线,近期没事做,老大要我開始学习project Anarchy了.里面代码是比較偏爱的C++,包括lua,暂没学过lua.看了下LUA代码 ...

  3. 【35.29%】【codeforces 557C】Arthur and Table

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  4. Boost.Asio c++ 网络编程翻译（10）

    read/write方法 这些方法对一个流进行读写操作(能够是套接字,或者其它表现的像流的类): async_read(stream, buffer [, completion],handler):这 ...

  5. ios开发网络学习九：NSURLSessionDownloadTask实现大文件下载

    一:NSURLSessionDownloadTask:实现文件下载:无法监听进度 #import "ViewController.h" @interface ViewControl ...

  6. Android多线程研究（1）——线程基础及源码剖析

    从今天起我们来看一下Android中的多线程的知识,Android入门容易,但是要完成一个完善的产品却不容易,让我们从线程开始一步步深入Android内部. 一.线程基础回顾 package com. ...

  7. Mysql 安装(Using Generic Binaries)

    本次 Mysql 为Community 5.6.21 版本号.安装方式为通用Linux安装方式.即大多数Linux平台都能够採用该方式进行安装. 一.安装步骤 1.安装环境 1)Centos 7.0. ...

  8. gitlab+jenkins+pm2+rsync实现node的自动化部署

    环境配置 jenkins java环境 yum install -y java 安装jenkins wget -O /etc/yum.repos.d/jenkins.repo http://pkg.j ...

  9. 【hdu 2955】Robberies

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  10. [Ramda] Convert a Promise.all Result to an Object with Ramda's zip and zipObj

    In this lesson, we'll use Promise.all to get an array that contains the resolved values from multipl ...