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. occcont.cpp 925

    将InitInstance()中调用的 InitATL() 替换为 AfxOleInit()即可.

  2. swift入门之TableView

    IOS8更新了,oc还将继续但新增了swift语言,能够代替oc编写ios应用,本文将使用swift作为编写语言,为大家提供step by step的教程. 工具 ios每次更新都须要更新xcode, ...

  3. linux下的打包和压缩

    linux中常见的两种压缩包文件的格式是.tar..gz和.tar.gz..tar仅仅是将文件简单地打包,文件的大小没有变化,也就是说.tar文件仅仅是一个包,没有被压缩:.tar.gz文件是打包后用 ...

  4. Android使用BitmapFactory.Options解决加载大图片内存溢出问题

    由于Android对图片使用内存有限制,若是加载几兆的大图片便内存溢出.Bitmap会将图片的所有像素(即长x宽)加载到内存中,如果图片分辨率过大,会直接导致内存溢出(java.lang.OutOfM ...

  5. iOS开发Quartz2D之 七：雪花效果

    #import "VCView.h" @implementation VCView -(void)awakeFromNib { //[NSTimer scheduledTimerW ...

  6. 【Nutch2.2.1基础教程之3】Nutch2.2.1配置文件 分类： H3_NUTCH 2014-08-18 16:33 1376人阅读 评论(0) 收藏

    nutch-site.xml 在nutch2.2.1中,有两份配置文件:nutch-default.xml与nutch-site.xml. 其中前者是nutch自带的默认属性,一般情况下不要修改. 如 ...

  7. 怎样用O2O去改变充满谎言、疑虑和愤慨的维修行业

    为什么千亿级的维修服务市场出不了行业巨头?   据相关统计,我国的整个维修服务市场规模可达每年数千亿元之巨(当中仅家电维修就可达近千亿规模,更遑论手机.数码.家具等维修). 相同是千亿级规模的服务行业 ...

  8. Android改变图片颜色的自定义控件

    效果如下: 理解:Xfermode的16总模式如图 第一步: package com.rong.activity; import com.rong.test.R; import android.con ...

  9. jquery-5 jQuery筛选选择器

    jquery-5  jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...

  10. 嵌入式project师考试知识点总结 微内核结构

    在操作系统的结构设计中,微内核结构表示的是 A)  总体式结构 B)  层次结构 C)  分布式结构 D)  客户机/server结构    微内核是指把操作系统结构中的内存管理.设备管理.文件系统等 ...