当前位置:首页 > 开发 > Web前端 > DOM > 正文

DOM模型和事件处理---事件处理

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
dom
摘要: 常用的事件方式常规的事件处理方法无法批量的为节点添加事件,所以一般都是通过如下方式进行事件操作 <input type="button" value='click' id='btn'/> //另外一种创建事件的方式,基本上都是使用这种方法 var btn = document.getElementById('btn'); btn.onclick =

常用的事件方式
常规的事件处理方法无法批量的为节点添加事件,所以一般都是通过如下方式进行事件操作

<input type="button" value='click' id='btn'/>



//另外一种创建事件的方式,基本上都是使用这种方法



var btn = document.getElementById('btn');

btn.onclick = function(event){

    //会自动传入一个event的事件参数对象

    console.log(event.type);

    console.log(this.value);

}

//script 目前必须在input之后,否则无法找到节点

//btn.onclick  当btn这个按钮被点执行相应的操作



使用这钟方式可能带来的问题如下所示

/*

    些时会报错,btn is null

    因为js 是解释执行的,执行到这个位置时并没有html中的标签存在

    所以id为btn的节点也就不存在了!

*/

event参数和window.wvent

对于以上事件的处理方式而言,会默认传递一个event的参数来获取一些事件信息,但是对于ie和firefox的获取
方式不一致,ie使用window.event,firefox使用event获取,所拟需要使用如下方法解决

function show(event){

    //特别注意:对于IE而言,不会自动传递event这个参数进去,IE需要通过window.event来获取事件

    //但是FF却不支持window.event,所以通常使用如下方式解决

    event = event || window.event;

    console.log(event.type);

    console.log(this.innerHTML);

}

window.onload事件
以上问题解决方案有两种
在body中加入onload =X 来解决

function loadSuccess(){

    /*

    些时会报错,btn is null

    因为js 是解释执行的,执行到这个位置时并没有html中的标签存在

    所以id为btn的节点也就不存在了!

    解决方案有两种

    1、直接在body中有一个事件,叫做onload,目前这些代码在loadSuccess方法中

    此时,就表示要把所有的元素都load成功之后才执行

    2、使用window.load = x来设置执行的事件(建议使用的方法)

    */

    var btn = document.getElementById('btn');

    btn.onclick = function(event){

        //会自动传入一个event的事件参数对象

        console.log(event.type);

        console.log(this.value);

    }

}



<body onload='loadSuccess()'></body>



使用window.onload事件解决

//当窗口加载完成之后执行loadSuccess,注意loadSuccess不加括号

window.onload = loadSuccess;

批量添加事件

window.onload = ready;

function ready(){

    var lis = document.getElementsByTagName('li');

    for(var i=0;i<lis.length;i++){

        lis[i].onclick = show;

    }

}



function show(event){

    //特别注意:对于IE而言,不会自动传递event这个参数进去,IE需要通过window.event来获取事件

    //但是FF却不支持window.event,所以通常使用如下方式解决

    event = event || window.event;

    console.log(event.type);

    console.log(this.innerHTML);

}

 

DOM模型和事件处理---事件处理

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
参考了如下链接,备忘一下: DOM事件模型 见下图: 标准DOM2的事件传播模型分2个阶段: 首先是捕获阶
简介 很多领域中的企业过去总是以一种事件驱动的方式经营,且必须每天处理不断增加的业务事件和交易
UI编程通常都会伴随事件处理,Android也不例外,它提供了两种方式的事件处理:基于回调的事件处理和
Author:放翁(文初) Date: 2010/11/23 Email:fangweng@taobao.com mblog: http://t.sina.com.cn/f
Author:放翁(文初) Date: 2010/11/23 Email:fangweng@taobao.com mblog: http://t.sina.com.cn/f
Author:放翁(文初) Date: 2010/11/25 Email:fangweng@taobao.com mblog: http://t.sina.com.cn/f
这篇文章将会从问题,技术背景,设计实现,代码范例这些角度去谈基于管道化和事件驱动模型的Web请求
Author:放翁(文初) Date: 2010/11/23 Email:fangweng@taobao.com mblog: http://t.sina.com.cn/f
Author:放翁(文初) Date: 2010/11/25 Email:fangweng@taobao.com mblog: http://t.sina.com.cn/f
前两天想研究下Android点击事件是如何处理的,翻译了一篇国外文件,英文原版下载地址附在文后。 And
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号