首页 > 代码库 > 关于JavaScript中事件的一些重要说明

关于JavaScript中事件的一些重要说明

2024-07-18 22:22:23   217人阅读

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 = "http://www.mamicode.com/">Home</a>            </li>            <li>                <a href = "http://www.mamicode.com/">mappath</a>            </li>            <li>                <a href = "http://www.mamicode.com/">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 = "http://www.mamicode.com/">Home</a>            </li>            <li>                <a href = "http://www.mamicode.com/">mappath</a>            </li>            <li>                <a href = "http://www.mamicode.com/">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 = "http://www.mamicode.com/#" 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 = "http://www.mamicode.com/">Home</a>            </li>            <li>                <a href = "http://www.mamicode.com/">mappath</a>            </li>            <li>                <a href = "http://www.mamicode.com/">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方式.建议用falsefunction 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);        }}

 


联系
我们