文档章节

JavaScript事件

菜小小白
 菜小小白
发布于 2016/06/01 19:13
字数 784
阅读 1
收藏 0

1事件句柄:

属性 当以下情况发生时,出现此事件 FF N IE
onabort 图像加载被中断 1 3 4
onblur 元素失去焦点 1 2 3
onchange 用户改变域的内容 1 2 3
onclick 鼠标点击某个对象 1 2 3
ondblclick 鼠标双击某个对象 1 4 4
onerror 当加载文档或图像时发生某个错误 1 3 4
onfocus 元素获得焦点 1 2 3
onkeydown 某个键盘的键被按下 1 4 3
onkeypress 某个键盘的键被按下或按住 1 4 3
onkeyup 某个键盘的键被松开 1 4 3
onload 某个页面或图像被完成加载 1 2 3
onmousedown 某个鼠标按键被按下 1 4 4
onmousemove 鼠标被移动 1 6 3
onmouseout 鼠标从某元素移开 1 4 4
onmouseover 鼠标被移到某元素之上 1 2 3
onmouseup 某个鼠标按键被松开 1 4 4
onreset 重置按钮被点击 1 3 4
onresize 窗口或框架被调整尺寸 1 4 4
onselect 文本被选定 1 2 3
onsubmit 提交按钮被点击 1 2 3
onunload 用户退出页面

 

//标签中定义该事件触发后执行函数	
<body onload="hello()">
</body>

//srcipt 标签中使用

window.onload=hello; //<body onload="hello()"></body>
function hello(){
            var msg="hello world!";
            document.open();
            document.write(msg);
            document.close();
}

 

2.事件冒泡

//html中定义 内嵌就是捕获
<img src="./img/123.jpg" onerror="f2()" />
//js文件
function f2(){
  alert("buhao");
}

 这个问题其实是一个很经典的问题,在使用<div>标签布局时,对外层事件和内层事件都绑定相同事件句柄时,会有一个事件冒泡的过程。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/event.js">
        </script>
    </head>
    <body>
        <div id="first" style="paddig: 20px; background-color:#ff0; width: 150px;" >
            <div id="second" style="background-color: #f00; width: 100px; height: 100px; border: 1px dashed #000;">
            </div>
        </div>
    </body>
</html>
window.onload=setEvents;
function setEvents(){
    document.getElementById("first").onmousedown=function(){
        alert("first");	
    }
    document.getElementById("second").onmousedown=function(){
        alert("second");
    }
    document.oncontextmenu=function(){
        alert("document"+this);
    }
}

这个时候你点击最里层的second,这个时候你会发现,会提示出三个警告框。其实很多时候我们并不会想要出现这样的情况,这个时候就必须借助eventstopPropagation属性

window.onload=setEvents;
function setEvents(){
    document.getElementById("first").onmousedown=function(){
        alert("first");
        stopEvent(window.event);
    }
    document.getElementById("second").onmousedown=function(){
        alert("second");
        stopEvent(window.event);
    }
    document.oncontextmenu=function(){
        alert("document"+this);
        return false;
    }
}


function stopEvent(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble=true;
    }
}

   有些时候对窗口事件例如是点击鼠标右键该event.stopPropagation会失效,这个时候就需要return false出场。代码中已经有体现。

                                                DOM Level 2 事件模型

    主要就是三个关键方法:addEventListener,removeEventListener(),dispatchEvent()

    addEventListener(‘event’,eventFunction,boolean)三个参数。

    当boolean 为false时是冒泡阶段,当为true 时为捕获阶段。

function cascadeDown(event){
    alert("capturing "+this);
}

function bubbleUp(event){
    alert("bubbing "+this);
}

window.onload=setup;
function setup(event){
    //扑捉阶段
    document.addEventListener('click',cascadeDown,true);
    document.forms[0].addEventListener('click',cascadeDown,true);
    document.forms[0].elements[0].addEventListener('click',cascadeDown,true);
    
    //冒泡阶段
    document.addEventListener('click',bubbleUp,false);
    document.forms[0].addEventListener('click',cascadeDown,false);
    document.forms[0].elements[0].addEventListener('click',cascadeDown,false);
    
}

 当需要阻止冒泡阶段时:

function bubbleUp(event){
    alert("bubbing "+this);
    event.stopPropagation();
}

专门的博客讲的比较好:http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/

http://biancheng.dnbcw.info/javascript/223788.html

本文转载自:http://my.oschina.net/QAAQ/blog/684333

菜小小白

菜小小白

粉丝 1
博文 15
码字总数 6386
作品 0
海淀
私信 提问

暂无文章

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
今天
56
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
今天
27
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
今天
60
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
今天
57
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
今天
50
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部